一、擴展運算符[1]
擴展運算符的表示法是：... （三個點），它可以將數(shù)組，字符串，函數(shù)返回值，有部署Iterator 接口的對象等轉(zhuǎn)化為對應(yīng)的參數(shù)序列。
擴展運算符的應(yīng)用：
1、合并數(shù)組
var arr1 = [1, 2];
var arr2 = [3];
var arr3 = [4, 5];
// ES5 數(shù)組合并寫法
arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5]
// ES6 數(shù)組合并寫法
[...arr1, ...arr2, ...arr3]; // [1, 2, 3, 4, 5]
2、與解構(gòu)賦值結(jié)合使用
let [first, ...rest] = [1, 2, 3, 4, 5];
first; // 1
rest; // [ 2, 3, 4, 5]
const [first, ...rest] = ["yuan"];
first; // "yuan"
rest; // []
const [one, ...another] = [];
one; // undefined
another; // []
這里注意，rest參數(shù)后面就不能在設(shè)置參數(shù)了。
3、函數(shù)返回值
在函數(shù)返回多個值時，如返回數(shù)組或?qū)ο?，使用擴展運算符可以解決：
let dateFields = [1970, 0, 1];
let d = new Date(...dateFields);
d; // Thu Jan 01 1970 00:00:00 GMT+0800 (中國標(biāo)準時間)
let dateFields = readDateFields(database);
let d = new Date(...dateFields);
上面代碼是從數(shù)據(jù)庫里取出一段數(shù)據(jù)，然后直接傳入構(gòu)造函數(shù)Date里。
4、字符串
[...'yuan']; // ["y", "u", "a", "n"]
5、具有Iterator 接口的對象
任何具有Iterator 接口的對象，如類數(shù)組、Set和Map數(shù)據(jù)結(jié)構(gòu)等，都可以通過擴展運算符轉(zhuǎn)化為真正的數(shù)組，那些沒有Iterator 接口的數(shù)據(jù)結(jié)構(gòu)，是不能使用擴展運算符轉(zhuǎn)為數(shù)組的。
var nodeList = document.querySelectorAll('div');
var arrList = [...nodeList];
let map = new Map([
["animal", "yuan"],
["type", "monkey"]
]);
console.log([...map.entries()]);
// ["animal", "yuan"]
// ["type", "monkey"]
二、數(shù)組方法擴展[2]
1、Array.from()
從一個類似數(shù)組或者可迭代對象中創(chuàng)建一個新的數(shù)組實例。
這里的類似數(shù)組指：擁有 length 屬性和若干索引屬性的任意對象。
可迭代對象指：可以獲取元素中的對象，如Map 和Set 等。
使用方式：Array.from(arrayLike, mapFn, thisArg);
三個參數(shù)代表如下：
arrayLike：要轉(zhuǎn)化成數(shù)組的目標(biāo)對象（類似數(shù)組或者可迭代對象）；
mapFn：可選參數(shù)，新數(shù)組中的每個元素都會調(diào)這個回調(diào)函數(shù)，類似數(shù)組中的map 方法；
thisArg：可選參數(shù)，執(zhí)行回調(diào)函數(shù) mapFn 的 this 對象。
代碼案例：
// 1、字符串轉(zhuǎn)數(shù)組
Array.from("yuan"); // ["y", "u", "a", "n"]
// 2、Set 對象轉(zhuǎn)數(shù)組
let s = new Set(["yuan", "monkey"]);
Array.from(s); // ["yuan", "monkey"]
// 3、Map 對象轉(zhuǎn)數(shù)組
let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); // [[1, 2], [2, 4], [4, 8]]
// 4、arguments 類數(shù)組對象轉(zhuǎn)數(shù)組
function arg() {
return Array.from(arguments);
}
arg(2,3,4); // [2, 3, 4]
// 5、啟用第二個參數(shù)
let a = [1, 2, 3];
Array.from(a, x => x * x); // [1, 4, 9]
// 6、與length 的關(guān)系
Array.from({ length : 3}, (v, i) => i * i); // [0, 1, 4]
2、Array.of()
定義：將一組值轉(zhuǎn)化為數(shù)組，這一組值的個數(shù)為任意個數(shù)。
用法：Array.of(el1, el2, ..., elN);
elN: 指任意個參數(shù)；
與Array() 的區(qū)別：
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
Array.of() 和 Array 構(gòu)造函數(shù)之間的區(qū)別在于處理整數(shù)參數(shù)：Array.of(7) 創(chuàng)建一個具有單個元素 7 的數(shù)組，而 Array(7) 創(chuàng)建一個包含 7 個 undefined 元素的數(shù)組。
代碼案例：
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
三、數(shù)組實例擴展[3]
1、copyWithin()：復(fù)制數(shù)組的一部分到同一數(shù)組的另一個位置，返回的是修改后的數(shù)組，不會修改數(shù)組的大小。
使用方式：arr.copyWithin(target, start, end);
target（必選）：目標(biāo)索引，指從該位置開始替換數(shù)據(jù)。若為負數(shù)，則從末尾開始算起。
start（可選）：開始復(fù)制元素的起始位置，默認為0，若為負數(shù)，則從末尾開始算起。
end（可選）：開始復(fù)制元素的結(jié)束位置，默認為數(shù)組的長度，若為負數(shù)，則從末尾開始算起。
[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]
[].copyWithin.call({length: 5, 3: 1}, 0, 3);
// {0: 1, 3: 1, length: 5}
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 兼容寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
2、find() 和 findIndex()：找出第一個符合條件的數(shù)組成員。
使用方法：arr.find(callback[, thisArg])
calback：數(shù)組的每個元素都執(zhí)行這個回調(diào)函數(shù)，且這個回調(diào)函數(shù)包含三個參數(shù)，分別是：
element：當(dāng)前的值；
index：數(shù)組當(dāng)前元素的位置；
array：數(shù)組本身。
thisArg（可選）：指定 callback 的 this。
代碼案例：
// 用對象的屬性查找數(shù)組中的對象
var inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];
function findCherries(fruit) {
return fruit.name === 'cherries';
}
console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
// 尋找數(shù)組中的質(zhì)數(shù)
function isPrime(element, index, array) {
var start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) {
return false;
}
}
return element > 1;
}
console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5
3、fill()：填充數(shù)組
使用方法：arr.fill(value, start, end);
value：要填充的值；
start：填充的起始位置，填充不包括第一個位置，默認為0；
end：填充結(jié)束位置，填充包括最后一個位置，默認數(shù)組的長度。
代碼案例：
[1, 2, 3].fill(4) // [4, 4, 4]
[1, 2, 3].fill(4, 1) // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]
[1, 2, 3, 4].fill(4, 1, 3) // [1, 4, 4, 4]
[1, 2, 3].fill(4, 1, 1) // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN) // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({length: 3}, 4) // {0: 4, 1: 4, 2: 4, length: 3}
4、entries()、values()、keys()：遍歷數(shù)組每個元素的鍵值對、值、鍵
代碼案例：
// entries
var arr = ["y", "u", "a", "n"];
var iterator = arr.entries();
for (let v of iterator) {
console.log(v);
}
// [0, "y"]
// [1, "u"]
// [2, "a"]
// [3, "n"]
// values
var arr = ["y", "u", "a", "n"];
var iterator = arr.values();
for (let v of iterator) {
console.log(v);
}
// y
// u
// a
/ /n
// keys
var arr = ["y", "u", "a", "n"];
var iterator = arr.keys();
for (let v of iterator) {
console.log(v);
}
// 0
// 1
// 2
// 3
5、includes()：判斷數(shù)組是否包含某個特定的值，返回的是布爾值
使用方法：arr.includes(value, fromIndex)
value：需要查找的值
fromIndex：查找開始的位置，若為負值，查找開始的位置為數(shù)組的長度length + 這個負值fromIndex，默認為0。
代碼案例：
var arr = ["y", "u", "a", "n"];
arr.includes("y"); // true
arr.includes("z"); // false
四、總結(jié)
1、掌握擴展運算符的使用。
2、掌握數(shù)組方法和數(shù)組實例方法的擴展。
章節(jié)目錄
1、ES6中啥是塊級作用域？運用在哪些地方？
2、ES6中使用解構(gòu)賦值能帶給我們什么？
3、ES6字符串?dāng)U展增加了哪些？
4、ES6對正則做了哪些擴展？
5、ES6數(shù)值多了哪些擴展？
6、ES6函數(shù)擴展（箭頭函數(shù)）
7、ES6 數(shù)組給我們帶來哪些操作便利？
8、ES6 對象擴展
9、Symbol 數(shù)據(jù)類型在 ES6 中起什么作用？
10、Map 和 Set 兩數(shù)據(jù)結(jié)構(gòu)在ES6的作用
11、ES6 中的Proxy 和 Reflect 到底是什么鬼？
12、從 Promise 開始踏入異步操作之旅
13、ES6 迭代器(Iterator)和 for...of循環(huán)使用方法
14、ES6 異步進階第二步：Generator 函數(shù)
15、JavaScript 異步操作進階第三步：async 函數(shù)
16、ES6 構(gòu)造函數(shù)語法糖：class 類
