1 擴充運算符
擴充運算符是三個點（...）。可以将一個數組轉化為用逗号隔開的參數序列。
console.log(...[1,2,3])
// 1 2 3
console.log(1, ...[2,3,4], 5)
// 1 2 3 4 5
該運算符主要用于函數調用
function add(x, y) {
return x + y
}
const number = [2, 50];
add(...number) // 52
2 替代函數的apply方法
// es5
function f(x,y,z){
console.log(x+y+z)
}
var args = [0, 1, 2];
f.apply(null, args)
// es6
function f(x, y, z) {
console.log(x + y + z)
}
const args = [1, 2, 3];
f(...args)
下面是一個應用的實際例子，應用Math.max方法，簡化求最大值的方法
// es5
Math.max.apply(null, [1 , 6 , 55])
// es6
Math.max(...[1, 55, 6])
另一個例子是通過
push
函數，将一個數組添加到另一個數組的尾部。
// es5
var arr1 = [1,3,5];
var arr2 = [2,4,6];
Arrray.prototype.push.apply(arr1, arr2);
// es6
var arr1 = [1,3,5];
var arr2 = [2,4,6];
arra.push(...arr2);
擴充運算符的應用
（1） 複制數組
數組直接複制的話，隻是複制了指向底層資料結構的指針，而不是克隆一個全新的數組。
const a1 = [1,2];
const a2 = a1;
a2[0] = 2;
a1 // [2,2]
上面代碼中，
a2
并不是
a1
的克隆，而是指向同一份資料的另一個指針。修改
a2
，會直接導緻
a1
的變化。
ES5隻能通過變通的方法去實作複制數組，擴充運算符提供了複制數組的簡便寫法。
let arr1 = [1, 2];
let arr2 = [...arr1];
// 或者
let [...arr2] = arr1;
（2） 合并數組
// es5
[1,2].concat(more)
// es6
[1,2, ...more]
var a1 = ['a','b'];
var a2 = ['c'];
var a3 = ['d', 'e'];
// es5
a1.concat(a2, a3);
// es6
[...a1, ...a2, ...a3];
（3） 與解構指派結合
const [first, ...rest] = [1,2,3,4,5];
first // 1
rest // [2,3,4,5]
const [first, ...rest] = [];
first // undefind
rest // []
const [first, ...rest] = ['foo'];
first // 'foo'
rest // []
需要注意的是，如果将擴充運算符用于數組指派，隻能放在參數的最後一位，否則會報錯。
（4） 字元串
[...'hello']
// ['h', 'e', 'l', 'l', 'o']
（5） Map和Set結構
擴充運算符内部調用的是資料結構的 Iterator 接口，是以隻要具有 Iterator 接口的對象，都可以使用擴充運算符。
2 Array.from()
Array.from方法用于将兩類對象轉化為真正的數組，一種是類數組，一種是可周遊的對象。
下面是一個類似數組的對象，Array.from轉化為真正的數組。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
實際應用中，常用的類似數組的對象是DOM操作傳回的NodeList集合，以及函數内部的arguments對象。Array.from都可以将它們轉化為真正的數組。
// NodeList
let ps = document.querySelectorAll('p');
Array.from(ps).forEach( p => {
console.log(p)
})
// argument
function fn() {
let arg = Array.from(arguments);
}
隻要是部署了 Iterator 接口的資料結構，Array.from都能将其轉為數組
擴充運算符背後調用的是周遊器接口（
Symbol.iterator
），如果一個對象沒有部署這個接口，就無法轉換。
Array.from
方法還支援類似數組的對象。所謂類似數組的對象，本質特征隻有一點，即必須有
length
屬性。是以，任何有
length
屬性的對象，都可以通過
Array.from
方法轉為數組，而此時擴充運算符就無法轉換。
Array.from 還提供了第二個參數，類似于數組的map方法，可以對數組進行處理後，放入傳回的數組。
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
3 Array.of()
Array.of用于将一組值，轉換為數組
Array.of(3, 21, 56) // [3,21,56]
Array.of(3) // [3]
Array.of() // []
Array.of(undefined) // [undefined]
Array.of
總是傳回參數值組成的數組。如果沒有參數，就傳回一個空數組。基本上可以彌補Array的不足。
4 數組執行個體的 copyWithin()
數組執行個體的
copyWithin
方法，在目前數組内部，将指定位置的成員複制到其他位置（會覆寫原有成員），然後傳回目前數組。也就是說，使用這個方法，會修改目前數組。
它接受三個參數。
- target（必需）：從該位置開始替換資料。如果為負值，表示倒數。
- start（可選）：從該位置開始讀取資料，預設為 0。如果為負值，表示倒數。
- end（可選）：到該位置前停止讀取資料，預設等于數組長度。如果為負值，表示倒數
// 将3号位複制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相當于3号位，-1相當于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 将3号位複制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 将2号位到數組結束，複制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
5 數組執行個體的find()和findIndex()
數組執行個體的
find
方法，用于找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個傳回值為
true
的成員，然後傳回該成員。如果沒有符合條件的成員，則傳回
undefined
[1, 4, -5, 10].find((n) => n < 0)
// -5
另外，這兩個方法都可以發現
NaN
，彌補了數組的
indexOf
方法的不足。
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
上面代碼中，
indexOf
方法無法識别數組的
NaN
成員，但是
findIndex
方法可以借助
Object.is
方法做到
6 數組執行個體的fill()
fill方法使用給定值，填充一個數組
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
7 數組執行個體得entries() keys() values()
可以用
for...of
循環進行周遊，唯一的差別是
keys()
是對鍵名的周遊、
values()
是對鍵值的周遊，
entries()
是對鍵值對的周遊。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)