ES5和ES6中的一些綜合應用（持續更新）

specialCoder發表於2019-02-16

1.函式的length屬性

ES5中，length代表形參（即希望傳入的引數）的數量，如function display(a,b,c){ / /} ；display.length等於3
ES6中情況有所不同：
（1）函式預設引數
指定了預設引數後，函式的 length 將返回沒有指定預設引數的引數的個數

funciton display(str1=`test`,str2){
    console.log(str1+str2);
}
display.length;//1

（2）rest(…變數名)
rest引數也不會計入length屬性

funciton display(str1,...strs){
        console.log(str1+str2);
    }
    display.length;//1

2.類陣列轉成真正陣列的幾種方式

ES5中：Array.prototype.slice.call();

Array.prototype.slice.call(arguments);//argemtns->Array

ES6中：
（1）Array.from()可以將類似陣列的物件和可遍歷的物件轉換為真正的陣列

var arr = Array.from(arguments);

（2）rest引數 形式：“ …變數名”主要用在將arguments物件轉換為陣列

把arguments類陣列物件變為真正的物件：
funciton display(...arr){
    //...arr代替arguments
    arr instanceof Array //true
}

(3)擴充套件運算子：

[...arrayLive]

（4）set方法：

new Set(arrayLive);

3.使用函式函式的幾點注意（重點理解）

箭頭函式沒有自己的this，它們的this都是外層函式的this
（1）函式體內的this物件就是定義時所在的物件，而不是使用時所在的物件
（2）不可以當作建構函式。也就是不可以使用new命令，否則會報錯
（3）不可以使用arguments物件，該物件在函式體內不存在.如果要用可以用rest引數代替
（4）不可以使用yield命令，因此箭頭函式不能做Generator函式
詳細內容請參閱：http://es6.ruanyifeng.com/#do…

4.使用ES6為物件新增屬性

Object.assign:用來將源物件的所有的可列舉屬性複製到目標物件
語法：Object.assign(targetObj,source1,source2,…)
例如：

var target = {a：1,b:2};
var source1 = {c:3};
var source2 = {d:4};
Object.assign(target,source1,source2);
target//{a:1,b:2,c:3,d:4};

這裡有一些需要注意的地方：
（1）只複製自由屬性並且是可列舉的屬性
（2）這裡的複製是淺複製
（3）如果目標物件與原物件有同名屬性，或者多個原物件有同名屬性，則後面的屬性會覆蓋前面的屬性

5.物件屬性的遍歷方法一覽

ES5中有三種方法會忽略enumerable為false的屬性
（1）for…in迴圈：遍歷物件自身和繼承的可列舉的屬性
（2）Object.keys():返回物件自身的所有可列舉的屬性的鍵名
（3）json.stringify():只序列化物件自身的可列舉屬性
ES6中新增了兩個操作會忽略enumerable為false的屬性
（1）Object.assign():只複製物件自身的可列舉屬性
（2）Reflect.enumerate():返回所有for…in會遍歷的屬性

屬性的遍歷：
ES6中有6中方法可以遍歷物件
（1）for…in迴圈：遍歷物件自身和繼承的可列舉的屬性
（2）Object.keys():返回物件自身的所有可列舉的屬性的鍵名
（3）getOwenPropertyNames()：返回一個陣列，包含物件自身所有的屬性（不包括 Symbol屬性，但是包括不可列舉屬性）
（4）getOwenSymbolNames()：返回一個陣列，包含物件自身所有的Symbol屬性
（5）Reflect.ownKeys():返回一個陣列，包含物件自身所有的屬性(包括Symbol和不可列舉屬性)
（6）Reflect.enumerate():返回所有for…in會遍歷的屬性

以上6種方法共同遵守的遍歷次序規則：
（1）首先遍歷屬性名為數字的屬性，按照數字順序排序
（2）其次遍歷所有屬性名為字串的屬性，按照字串生成時間排序
（3）最後遍歷所有屬性名為symbol值得屬性，按照生成時間排序
物件屬性從屬關係判斷：
hasOwnPrototyOf():自身 可列舉
in ：自身和繼承

6._proto_屬性

_proto_屬性用來讀取或者設定當前物件的prototype物件。
奉上鍊接：https://github.com/creeperyan…

7.Iterator

8.Generator

相關文章