參考書《ECMAScript 6入門》
http://es6.ruanyifeng.com/

數組的擴展

1.擴展運算符:可以將數組轉化成逗號隔離的單個參數
...[1,2,3] //控制臺運行報錯
console.log(...[1,2,3]);//1,2,3

(1)代替apply方法
function test(a,b){return a b;}
test.apply(null,[1,2]) 同 test(...[1,2]) 作用一樣
(2)復制數組
var arr1 = [1,2,3],var arr2 = [];
arr2 = arr1.concat();
arr2 = [...arr1] 或 [...arr2] = arr1 //同樣可達到復制數組的效果
改變arr2的值也不會影響到arr1
(3)合并數組
將arr2追加到arr1的尾部
var arr1 = [1,2,3],arr2 = [4,5,6],arr3;
Array.prototype.push.apply(arr1,arr2); 同 arr1.push(...[arr2]);作用一樣
arr3 = [...arr1,...arr2] //[1,2,3,4,5,6]
(4)與解構賦值結合來賦值
[a,...b] = [1,2,3,4,5] // a---1, b---->[2,3,4,5]
(5)將字符串轉為數組
let str = "word";
console.log(...str);//['w','o','r','d']
還可以識別unicode編碼超過\uFFFF 需要用四個字節表示的字符 var str = "asdc𠮷";console.log([...str].length) //5 "𠮷"是一個四字節的字符，str.length = 6 不準確，錯把四字節字符判斷成兩個字符,[...str].length更準確

(6)可以將有Iterator接口的對象轉化為數組，如nodelist
var nodes = document.querySelectorAll('div');
[...nodes] //轉化為節點數組
Map,Set數據結構和Generator函數都有迭代器接口，可以使用擴展運算符

數組實例方法的擴展
(1)Array.prototype.from:可以將類數組對象和帶有Iterator接口的對象轉化成數組
類數組對象：必須要有length屬性，Array.from轉化時會把空位認為是undefined。如果length值與屬性個數不對應，多于屬性個數的的值是undefiend，少于屬性個數的部分都被去掉。
var obj = {
? 0 : "n1",
? 1 : "n2",
? 2 : "n3",
? length : 3
}
Array.from(obj) //["n1", "n2", "n3"]
[].slice.call(obj) //["n1", "n2", "n3"]
帶有Iterator接口的對象：常見的如dom樹，可以通過Array.from轉成數組
var nodes = document.querySelectorAll('div');
Array.from(nodes);

(2)Array.of()總是返回由參數組成的數組，如果沒有則返回空數組
Array.of(3) //[3]
new Array(3) //[,,,]
Array.of({"n1" : 1},{"n2" : 2},{"n3" : 3})//[{"n1" : 1},{"n2" : 2},{"n3" : 3}]
(3)Array.prototype.copyWithin : 將指定位置的數組成員賦值到其他位置（覆蓋原位置成員），返回當前數組。
有三個參數，第一個代表開始替換數據的位置，第二個代表開始讀取的位置（包括），第三個代表結束讀取的位置（不包括）
[1,2,3,4,5,'m',6,7,8,9,0].copyWithin(0,6,11) //[6, 7, 8, 9, 0, "m", 6, 7, 8, 9, 0]
(4)Array.prototype.find與Array.prototype.findIndex
相同點：都可以接受兩個參數，第一個參數是回調函數，第二個參數可以是一個對象，用來為第一個參數回調函數提供this；
??????? 第一個參數是回調函數，此回調函數可以有三個參數，第一個是當前的數組元素值，第二個是當前元素的下標值，第三個參數是一個數組。
不同點：find用于找出第一個滿足要求的數組成員，如果沒有滿足條件的，則返回undefined。
??????? findIndex用于找出第一個滿足要求的數組成員的位置下標，如果沒有滿足條件的，則返回-1。

[1,2,3,4,5].find(function(v,i,arr){v = v 2;arr = [];arr.push(v);console.log(i);console.log(arr)})
0 [3]
1 [4]
2 [5]
3 [6]
4 [7]

[1,2,3,4,5].findIndex(function(v,i,arr){return v === 5});
//4 數組元素5的下標

(5)Array.prototype.fill 用于填充數組
??? 可以接受三個參數，第一個是要填充的值，第二個是填充開始的位置（包括），第三個是填充結束的位置（不包括，填充在此前結束）。
?? 如果只傳第一個參數，不指定第二第三個位置參數，則原有數組的值全部會被新的填充值取代。
?? 生成數組元素為0的長度為10的數組
?? Array.from({length:0}).fill(0)//[0,0,0,0,0,0,0,0,0,0]
?? 使用fill像數組中填充新對象或者新數組時，不是深拷貝
? let array = Array.from({length:3}).fill({"name" : "test"})
? //array?? (3) [{name: "test"}, {name: "test"}, {name: "test"}]
? array[0].name = "thisone" //改變第一個元素的屬性值
? //array?? (3) [{name: "thisone"}, {name: "thisone"}, {name: "thisone"}]
? array[0] = {"name" : "thattwo"} //整個賦值
? //array?? (3) [{name: "thattwo"}, {name: "thisone"}, {name: "thisone"}]

(6)Array.prototype.keys //對鍵名進行遍歷，返回遍歷器對象
(7)Array.prototype.values //對值進行遍歷，返回遍歷器對象
(8)Array.prototype.entries//對整個鍵值對進行遍歷，返回遍歷器對象
var arr = [1,2,3,4,5];
for(let k of arr.keys()){
? console.log(k);//0 1 2 3 4
}
for(let v of arr.values()){
? console.log(v);//1 2 3 4 5
}
for(let entry of arr.entries()){
? console.log(entry);//[0,1] [1,2] [2,3] [3,4] [4,5]
}

(9)Array.prototype.includes 用于判斷數組是否包含某元素，是則返回true,否則返回false
?? 有兩個參數，第一個參數值要判斷是否存在的值，第二個表示判斷開始的位置（此參數如果為負，則倒數開始）
(10)Array.prototype.indexOf 用于判斷數組是否包含某元素，如果存在，返回此元素在數組中的下標，如果不存在，則返回-1
?? [NaN].indexOf(NaN) // -1
?? [NaN].includes(NaN) //true? includes方法更準確直觀

(3)空位
? 所有ES6新定義的數組實例的方法都會將空位處理成undefined
? Array.from({length:3}) //[undefined,undefined,undefined]
? var arr = [,,];
? for(let c of arr.keys()){console.log(c)} // 0 1
? for(let c of arr.values()){console.log(c)} // undefined undefined

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Es6学习笔记(7)----数组的扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。