• 擴展運算符

1.擴展運算符的使用方法

console.log(1, [2, 3, 4], 5); //1 [2, 3, 4] 5
console.log(1, ...[2, 3, 4], 5); //1 2 3 4 5

//函數(shù)調(diào)用
var arr = [1, 2, 3];
function getArr(arr) {
    return [...arr];
}
console.log(getArr(arr)); //[1, 2, 3]

function sum(num1, num2, num3) {
    return num1 + num2 + num3;
}
console.log(sum(1, 2, 3)); //6
console.log(sum(...arr)); //6

//如果擴展運算符后面是一個空數(shù)組议街，則不產(chǎn)生任何效果。
console.log(...[], 1); //1

//擴展運算符后面還可以放置表達式璧榄。
let x = 1;
console.log(...(x > 0 ? ["a"] : [])); //a

2.擴展運算符的應(yīng)用
（1）復(fù)制數(shù)組

//復(fù)制數(shù)組
const a1 = [1, 2];
const a2 = a1; //數(shù)組是復(fù)合的數(shù)據(jù)類型，直接復(fù)制的話犹菱，只是復(fù)制了指向底層數(shù)據(jù)結(jié)構(gòu)的指針拾稳，而不是克隆一個全新的數(shù)組。
a2[0] = 2;
console.log(a1); //[2, 2];

//es5
const b1 = [1, 2];
const b2 = b1.concat();
b2[0] = 2;
console.log(b1); //[1, 2];

//es6
const c1 = [1, 2];
const c2 = [...c1]; //寫法一
//const [...c2] = c1; //寫法二
c2[0] = 2;
console.log(c1); //[1, 2];

（2）合并數(shù)組

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
//es5
console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5, 6]
//es6
console.log([...arr1, ...arr2]); //[1, 2, 3, 4, 5, 6]

//以上打印的是用兩種不同方法合并而成的新數(shù)組腊脱，但是它們的成員都是對原數(shù)組成員的引用访得，這就是淺拷貝。如果修改了原數(shù)組的成員陕凹，會同步反映到新數(shù)組悍抑。
arr1.push(77);
arr2.push(88)
console.log(arr1.concat(arr2)); //[1, 2, 3, 77, 4, 5, 6, 88]
console.log([...arr1, ...arr2]); //[1, 2, 3, 77, 4, 5, 6, 88]

（3）與解構(gòu)賦值結(jié)合

const list = [1, 2, 3, 4, 5];
// const a = list[0], rest = list.slice(1); //es5
const [a, ...rest] = list;
console.log(a); //1
console.log(rest); //[2, 3, 4, 5]

（4）字符串

console.log([..."hello"]); //["h", "e", "l", "l", "o"]

• Array.from()

Array.from方法用于將類數(shù)組對象和可遍歷對象轉(zhuǎn)為真正的數(shù)組。

let arrayLike = {
    "0": "ciel",
    "1": "frank",
    length: 2
};
//es5
var arr1 = [].slice.call(arrayLike);
console.log("arr1", arr1); //["ciel", "frank"]
var arr2 = Array.prototype.slice.call(arrayLike);
console.log("arr2", arr2); //["ciel", "frank"]

//es6
let arr3 = Array.from(arrayLike);
console.log("arr3", arr3); //["ciel", "frank"]

• Array.of()

Array.of方法用于將一組值杜耙，轉(zhuǎn)換為數(shù)組搜骡。這個方法的主要目的，是彌補數(shù)組構(gòu)造函數(shù)Array()的不足佑女。因為參數(shù)個數(shù)的不同记靡，會導(dǎo)致Array()的行為有差異。

console.log(Array()); //[]
console.log(Array(3)); //[ , , ,]
console.log(Array(1, 2, 3)); //[1, 2, 3]

console.log(Array.of()); //[]
console.log(Array.of(undefined)); //[undefined]
console.log(Array.of(3)); //[3]
console.log(Array.of(1, 2, 3)); //[1, 2, 3]

• 數(shù)組實例的 copyWithin()

數(shù)組實例的copyWithin()方法团驱，在當(dāng)前數(shù)組內(nèi)部摸吠，將指定位置的成員復(fù)制到其他位置（會覆蓋原有成員），然后返回當(dāng)前數(shù)組嚎花。也就是說寸痢，使用這個方法，會修改當(dāng)前數(shù)組紊选。

copyWithin()方法接受三個參數(shù)：
1.target（必需）：從該位置開始替換數(shù)據(jù)啼止。如果為負值道逗，表示倒數(shù)。2.start（可選）：從該位置開始讀取數(shù)據(jù)献烦，默認為 0憔辫。如果為負值，表示倒數(shù)仿荆。
3.end（可選）：到該位置前停止讀取數(shù)據(jù)贰您，默認等于數(shù)組長度。如果為負值拢操，表示倒數(shù)锦亦。

console.log([1, 2, 3, 4, 5].copyWithin(0, 1)); //[2, 3, 4, 5, 5]
console.log([1, 2, 3, 4, 5].copyWithin(0, 1, 2)); //[2, 2, 3, 4, 5]

• 數(shù)組實例的 find() 和 findIndex()

find()方法用于找出第一個符合條件的數(shù)組成員。它的參數(shù)是一個回調(diào)函數(shù)令境，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)杠园，直到找出第一個返回值為true的成員，然后返回該成員舔庶。如果沒有符合條件的成員抛蚁，則返回undefined。

var aaa = [1, 2, 3, 4, 5].find(function(value, index, array) {
    return value > 2
});
console.log(aaa); //3

findIndex()方法的用法與find()方法非常類似惕橙，返回第一個符合條件的數(shù)組成員的位置瞧甩，如果所有成員都不符合條件，則返回-1弥鹦。

var aaa = [1, 2, 3, 4, 5].findIndex(function(value, index, array) {
    return value > 2
});
console.log(aaa); //2

這兩個方法都可以接受第二個參數(shù)肚逸，用來綁定回調(diào)函數(shù)的this對象。

function getAge(age) {
    return age > this.age;
}
let person = {
    name: "ciel",
    age: 10
};
console.log([10, 20, 30].find(getAge, person)); //20

• 數(shù)組實例的 fill()

fill方法使用給定值彬坏，填充一個數(shù)組朦促。

console.log(["a", "b", "c"].fill(1)); //[1, 1, 1]
console.log(new Array(3).fill(1)); //[1, 1, 1]

fill方法還可以接受第二個和第三個參數(shù)，用于指定填充的起始位置和結(jié)束位置栓始。

console.log(["a", "b", "c"].fill(1, 0, 1)); //) [1, "b", "c"]

如果填充的類型為對象务冕，那么被賦值的是同一個內(nèi)存地址的對象，而不是深拷貝對象幻赚。

• 數(shù)組實例的 entries()禀忆，keys() 和 values()

entries()，keys()和values()用于遍歷數(shù)組坯屿。它們都返回一個遍歷器對象油湖，可以用for...of循環(huán)進行遍歷，唯一的區(qū)別是keys()是對鍵名的遍歷领跛、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷撤奸。

for(let index of ["a", "b"].keys()) {
    console.log(index);
}
//0
//1

for(let item of ["a", "b"].values()) {
    console.log(item);
}
//a
//b

for(let [index, item] of ["a", "b"].entries()) {
    console.log(index, item);
}
//0 "a"
//1 "b"

• 數(shù)組實例的 includes()

includes()方法返回一個布爾值吠昭，表示某個數(shù)組是否包含給定的值喊括。

console.log([1, 2, 3].includes(2)); //true
console.log([1, 2, 3].includes(4)); //false
console.log([1, 2, NaN].includes(NaN)); //true

該方法的第二個參數(shù)表示搜索的起始位置，默認為0矢棚。如果第二個參數(shù)為負數(shù)郑什，則表示倒數(shù)的位置，如果這時它大于數(shù)組長度（比如第二個參數(shù)為-4蒲肋，但數(shù)組長度為3）蘑拯，則會重置為從0開始。

console.log([1, 2, 3].includes(2, 2)); //false
console.log([1, 2, 3].includes(3, -1)); //true

• 數(shù)組實例的 flat()兜粘，flatMap()

flat()用于將嵌套的數(shù)組“拉平”申窘，變成一維的數(shù)組。該方法返回一個新數(shù)組孔轴，對原數(shù)據(jù)沒有影響剃法。flat()默認只會“拉平”一層，如果想要“拉平”多層的嵌套數(shù)組路鹰，可以將flat()方法的參數(shù)寫成一個整數(shù)贷洲，表示想要拉平的層數(shù)，默認為1晋柱。

console.log([1, 2, [3, 4], 5].flat()); //[1, 2, 3, 4, 5]
console.log([1, 2, [3, [4]], 5].flat()); //[1, 2, 3, [4], 5]
console.log([1, 2, [3, [4]], 5].flat(2)); //[1, 2, 3, 4, 5]

如果不管有多少層嵌套优构，都要轉(zhuǎn)成一維數(shù)組，可以用Infinity關(guān)鍵字作為參數(shù)雁竞。

console.log([1, 2, [3, [4]], 5].flat(Infinity)); //[1, 2, 3, 4, 5]

如果原數(shù)組有空位俩块，flat()方法會跳過空位。

console.log([1, 2, , 4, 5].flat()); //[1, 2, 4, 5]

flatMap()方法對原數(shù)組的每個成員執(zhí)行一個函數(shù)（相當(dāng)于執(zhí)行Array.prototype.map()）浓领，然后對返回值組成的數(shù)組執(zhí)行flat()方法玉凯。該方法返回一個新數(shù)組，不改變原數(shù)組联贩。

console.log([1, 2, 3].flatMap((x) => [x, x * 2])); //[1, 2, 2, 4, 3, 6]
//flatMap()只能展開一層數(shù)組漫仆。
console.log([1, 2, 3].flatMap((x) => [x, [x * 2]])); //[1, [2], 2, [4], 3, [6]]

flatMap()方法的參數(shù)是一個遍歷函數(shù)，該函數(shù)可以接受三個參數(shù)泪幌，分別是當(dāng)前數(shù)組成員盲厌、當(dāng)前數(shù)組成員的位置（從零開始）、原數(shù)組祸泪。該方法還可以有第二個參數(shù)吗浩，用來綁定遍歷函數(shù)里面的this。

arr.flatMap(function callback(currentValue[, index[, array]]) {
  // ...
}[, thisArg])

• 數(shù)組的空位

數(shù)組的空位没隘，指數(shù)組的某一個位置沒有任何值懂扼。ES5 對空位的處理很不一致，大多數(shù)情況下會忽略空位。ES6 則是明確將空位轉(zhuǎn)為undefined阀湿。由于空位的處理規(guī)則非常不統(tǒng)一赶熟，所以建議避免出現(xiàn)空位。

參考資料：阮一峰老師的 ECMAScript 6 入門教程