1). ECMAScript(核心)
2). 擴展==>瀏覽器端
* BOM(瀏覽器對象模型)
* DOM(文檔對象模型)
3). 擴展==>服務器端
* Node
2、嚴格模式:為消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為
消除代碼運行的一些不安全之處,為代碼的安全運行保駕護航
為未來新版本的Javascript做好鋪墊
嚴格模式使用:在全局或函數的第一條語句定義為: 'use strict';
如果瀏覽器不支持, 只解析為一條簡單的語句, 沒有任何副作用
語法和行為改變:
* 必須用var聲明變量
* 禁止自定義的函數中的this指向window
* 創建eval作用域
* 對象不能有重名的屬性
p:eval有解析代碼的作用
3、JSON對象:
JSON.stringify(obj/arr)? js對象(數組)轉換為json對象(數組)
JSON.parse(json)? json對象(數組)轉換為js對象(數組)
4、Object擴展:
Object.create(prototype, [descriptors]):以指定對象為原型創建新的對象
添加新屬性:
- value : 指定值
? ? - writable : 標識當前屬性值是否是可修改的, 默認為false
? ? - configurable: 標識當前屬性是否可以被刪除 默認為false
? ? - enumerable: 標識當前屬性是否能用for in 枚舉 默認為false
Object.defineProperties(object, descriptors): 為指定對象定義擴展多個屬性
get :用來獲取當前屬性值得回調函數
set :修改當前屬性值得觸發的回調函數,并且實參即為修改后的值
存取器屬性:setter,getter一個用來存值,一個用來取值
get propertyName(){} 用來得到當前屬性值的回調函數
set propertyName(){} 用來監視當前屬性值變化的回調函數
5、Array擴展:
Array.prototype.indexOf(value) : 得到值在數組中的第一個下標
Array.prototype.lastIndexOf(value) : 得到值在數組中的最后一個下標
Array.prototype.forEach(function(item, index){}) : 遍歷數組
Array.prototype.map(function(item, index){}) : 遍歷數組返回一個新的數組,返回加工之后的值
Array.prototype.filter(function(item, index){}) : 遍歷過濾出一個新的子數組, 返回條件為true的值
eg:arr.indexOf(4)
6、Function擴展:Function.prototype.bind(obj):將函數內的this綁定為obj, 并將函數返回
【面試題】: 區別bind()與call()和apply()?
* 都能指定函數中的this
? * call()/apply()是立即調用函數
? * bind()是將函數返回
傳參形式:
foo.call(obj,33);? //直接從第二個參數開始,依次傳入
foo.apply(obj,[33]); //第二參數必須是數組,傳入的參數放在數組里
bind的特點:綁定完this不會立即調用當前的函數,而是將函數返回
bind傳參的方式同call一樣
7、let關鍵字:與var類似, 用于聲明一個變量
? ? ? 特點:
? * 在塊作用域內有效
? * 不能重復聲明
? * 不會預處理, 不存在變量提升
8、const關鍵字:用于定義一個常量,保存不用改變的數據
? ? ? 特點:
* 不能修改
? * 其它特點同let
9、變量的解構賦值:從對象或數組中提取數據, 并賦值給變量(多個)
對象的解構賦值:let {n, a} = {n:'tom', a:12}
數組的解構賦值:let [a,b] = [1, 'hello'];
10、模板字符串:簡化字符串的拼接
模板字符串必須用 `` 包含
變化的部分使用${xxx}定義
eg:str = `我的名字叫:${obj.username},我的年齡:${obj.age}`;
11、簡化的對象寫法:
省略同名的屬性值
省略方法的function
例如:
? let x = 1;
? let y = 2;
? let point = {
? ? ? ? ? x,
? ? ? ? ? y,
? ? ? ? ? setX (x) {this.x = x}
? };
12、箭頭函數:定義匿名函數
基本語法:
? * 沒有參數: () => console.log('xxxx')
? * 一個參數: i => i+2
* 大于一個參數: (i,j) => i+j
? * 函數體不用大括號: 默認返回結果
? * 函數體如果有多個語句, 需要用{}包圍,若有需要返回的內容,需要手動返回
* 使用場景: 多用來定義回調函數
特點:
*簡潔
? ? *箭頭函數沒有自己的this,箭頭函數的this不是調用的時候決定的,而是在定義的時候所處的對象就是它的this
*擴展理解: 箭頭函數的this看外層的是否有函數,如果有,外層函數的this就是內部箭頭函數的this,如果沒有,則this是window。
13、三點運算符:rest(可變)參數:用來取代arguments 但比 arguments 靈活,只能是最后部分形參參數
擴展運算符
? let arr1 = [1,3,5];
? let arr2 = [2,...arr1,6];
? arr2.push(...arr1);
14、形參默認值:當不傳入參數的時候默認使用形參里的默認值
eg:function Point(x = 1,y = 2) {
this.x = x;
this.y = y;
? ? ? ? ? }
15、Promise對象: 代表了未來某個將要發生的事件(通常是一個異步操作)
有了promise對象, 可以將異步操作以同步的流程表達出來, 避免了層層嵌套的回調函數(俗稱'回調地獄')
ES6的Promise是一個構造函數, 用來生成promise實例
使用promise基本步驟(2步):
*創建promise對象
? ? let promise = new Promise((resolve, reject) => {
? ? ? ? //初始化promise狀態為 pending
? ? ? //執行異步操作
? ? if(異步操作成功) {
? ? ? ? resolve(value);//修改promise的狀態為fullfilled
? ? ? } else {
? ? ? ? reject(errMsg);//修改promise的狀態為rejected
? ? ? }
? ? })
? * 調用promise的then()
? ? promise.then(function(
? ? ? result => console.log(result),
? ? errorMsg => alert(errorMsg)
? ? ))
promise對象的3個狀態:
* pending: 初始化狀態
? * fullfilled: 成功狀態
? * rejected: 失敗狀態
應用:* 使用promise實現超時處理
? ? ? ? ? * 使用promise封裝處理ajax請求