擴(kuò)展運(yùn)算符（...）

含義：擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）芍躏。它好比 reset 參數(shù)的逆運(yùn)算皆怕，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分割的參數(shù)列表救欧。

console.log(...[1,2,3]);  // 1 2 3
console.log(1, ...[2, 3, 4], 5);  // 1 2 3 4 5
console.log([...document.querySelectorAll('div')]);  // [div, div]

該運(yùn)算符主要用于函數(shù)調(diào)用定庵。

function push (arr, items) {
  arr.push(...items);
  console.log(arr)
}
push([1,2,3], [4, 5, 6]);
function add (x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers);  // 42

上面都是函數(shù)的調(diào)用吏饿，它們都是使用擴(kuò)展運(yùn)算符，將一個(gè)數(shù)組變?yōu)閰?shù)序列蔬浙。

擴(kuò)展運(yùn)算符與函數(shù)參數(shù)結(jié)合使用猪落。

function f (v, w, x, y, z) {};
const args = [0, 1];
f(-1, ...args, 2, ...[3]);

let x = 1;
// 擴(kuò)展運(yùn)算符還可以防置表達(dá)式
const arr = [
  ...(x > 0 ? ['a'] : []), 'b'
];

如果擴(kuò)展運(yùn)算符后面是一個(gè)空數(shù)組，則不產(chǎn)生任何效果畴博。

console.log([...[],1]);  // [1]

只有函數(shù)調(diào)用時(shí)笨忌，擴(kuò)展運(yùn)算符才可以放在圓括號(hào)里，否則會(huì)報(bào)錯(cuò)俱病。

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

擴(kuò)展運(yùn)算符的應(yīng)用：

1. 復(fù)制數(shù)組
數(shù)組是復(fù)合數(shù)據(jù)類型官疲，直接復(fù)制的話，只是復(fù)制了指向底層數(shù)據(jù)解構(gòu)的指針庶艾，而不是克隆一個(gè)全新的數(shù)組袁余。

const a1 = [1, 2];
// 寫法一
const a2 = [...a1];

// 寫法二：解構(gòu)賦值
const [...a2] = a1;

2. 合并數(shù)組

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
let allArr = [...arr1,...arr2,...arr3];
console.log(allArr);  // ["a", "b", "c", "d", "e"]

注意，上邊兩種方法都是淺拷貝咱揍。

3. 與結(jié)構(gòu)賦值結(jié)合使用
擴(kuò)展運(yùn)算符可以與解構(gòu)賦值結(jié)合使用颖榜，用于生產(chǎn)數(shù)組。

{
  const [first, ...rest] = [1, 2, 3, 4, 5];
  console.log(first);  // 1
  console.log(rest);  // [2, 3, 4, 5]
}
{
  const [first, ...rest] = []
  console.log(first);  // undefined
  console.log(rest);  // []
}
{
  const [first, ...rest] = ["foo"];
  console.log(first);  // foo
  console.log(rest);  // []
}

如果擴(kuò)展運(yùn)算符用于數(shù)組賦值，只能放在參數(shù)的最后一位掩完，否則會(huì)報(bào)錯(cuò)噪漾。

const [...butLast, last] = [1, 2, 3, 4, 5];  // Error
const [first, ...middle, last] = [1, 2, 3, 4, 5];  // Error

4. 字符串
擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)換為真正的數(shù)組。

{
  console.log(...'hello');  // h e l l o
  console.log([...'hello']);  // ["h", "e", "l", "l", "o"]
}
擴(kuò)展運(yùn)算符且蓬，還可以識(shí)別四個(gè)字節(jié)的 Unicode 字符欣硼。

數(shù)組新增方法

Array.from()

Array.from() 方法將兩類對(duì)象轉(zhuǎn)換為真正的數(shù)組：類似數(shù)組的對(duì)象和可遍歷的對(duì)象（包括 Set 和 Map）。返回一個(gè)新的數(shù)組恶阴。

將一個(gè)類似數(shù)組的對(duì)象诈胜，將它轉(zhuǎn)換為真正的數(shù)組。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
}
var arr = Array.from(arrayLike);
console.log(arr);  // ["a", "b", "c"]

實(shí)際應(yīng)用中冯事，常見的類數(shù)組對(duì)象是 DOM 操作返回的 NodeList 集合焦匈，以及函數(shù)內(nèi)部的 arguments 對(duì)象。Array.from() 都可以將它轉(zhuǎn)換為真正的數(shù)組昵仅。

// NodeList 對(duì)象
let ps = document.querySelectorAll('p');
console.log(Array.from(ps))
let pss = Array.from(ps).filter(p => {
  return p.className === "oP";
})
console.log(pss);
// arguments 對(duì)象
function foo () {
  var regs = Array.from(arguments);
  // ...
}

Array.from() 第二個(gè)參數(shù)缓熟，用于對(duì)每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組摔笤。

console.log(Array.from([1, 2, 3], x => x * x));  // [1, 4, 9]

下面例子將數(shù)組中布爾值為 false 的成員轉(zhuǎn)為 0够滑；

console.log(Array.from([1,  , 2,  , 3], n => n || 0));  // [1, 0, 2, 0, 3] 
// Array.from([], (n, m) => {});  n -> 值；m -> 索引

返回各種數(shù)據(jù)的類型吕世。

function typesOf () {
 return Array.from(arguments, value => typeof value);
}
console.log(typesOf(null, [], NaN));  // ["object", "object", "number"]

Array.from() 有一個(gè)數(shù)據(jù)結(jié)構(gòu)傅瞻，可以對(duì)值進(jìn)行處理分飞。

console.log(Array.from({ length: 2}, () => 'jack'));  // ["jack", "jack"]

Array.of()

Array.of() 方法用于將一組值肮雨，轉(zhuǎn)換為數(shù)組猜欺。

console.log(Array.of(3, 11, 8));  // [3, 11, 8]
console.log(Array.of(3));  // [3]
console.log(Array.of(3).length);  // 1

這個(gè)方法的主要目的，是彌補(bǔ)數(shù)組構(gòu)造函數(shù) Array() 的不足吮龄。因?yàn)閰?shù)個(gè)數(shù)的不同俭茧，會(huì)導(dǎo)致 Array() 的行為有差異。

console.log(Array());  // []
console.log(Array(3));  // [, , ,]
console.log(Array(3, 11, 8));  // [3, 11, 8]

上代碼中漓帚，沒有參數(shù)母债、一個(gè)參數(shù)、三個(gè)參數(shù)時(shí)尝抖，返回結(jié)果都不一樣毡们。只有當(dāng)參數(shù)個(gè)數(shù)不少于 2 個(gè)時(shí)，Array() 才會(huì)返回由參數(shù)組成的新數(shù)組昧辽。參數(shù)個(gè)數(shù)只有一個(gè)時(shí)衙熔，實(shí)際上指的是數(shù)組的長度。

Array.of() 基本上可以用來代替 Array() 或 new Array()搅荞，并且不存在由于參數(shù)不同而導(dǎo)致的重載红氯。

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

Array.of() 總是返回參數(shù)值組成的數(shù)組框咙。如果沒有參數(shù)，返回一個(gè)空數(shù)組痢甘。

實(shí)例方法：copyWithin()

數(shù)組實(shí)例的 copyWithin() 方法喇嘱，在當(dāng)前數(shù)組內(nèi)部，將指定位置的成員復(fù)制到其他位置（會(huì)覆蓋原有成員）塞栅，然后返回當(dāng)前數(shù)組者铜。這個(gè)方法，會(huì)修改當(dāng)前數(shù)組放椰。

語法
Array.prototype.copyWithin(target, start = 0, end = this.length);
參數(shù)

• target（必需）：從該位置開始替換數(shù)據(jù)作烟。如果為負(fù)數(shù)，表示倒數(shù)庄敛；
• start（可選）：從該位置開始讀取數(shù)據(jù)俗壹，默認(rèn)為 0科汗。如果為負(fù)數(shù)藻烤，表示從末尾開始計(jì)算。
• end（可選）：到該位置前停止讀取數(shù)據(jù)头滔，默認(rèn)等于數(shù)組長度怖亭。如果為負(fù)數(shù)，表示從末尾開始計(jì)算坤检。

這三個(gè)參數(shù)都應(yīng)該是數(shù)值兴猩，如果不是，會(huì)自動(dòng)轉(zhuǎn)換為數(shù)值早歇。

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

上代碼表示將從 3 號(hào)位直到數(shù)組結(jié)束的成員（4 和 5）倾芝，復(fù)制到從 0 號(hào)位開始的位置，結(jié)果覆蓋了原來的 1 和 2箭跳。

下面是簡(jiǎn)單倆例子

// 將 3 號(hào)位復(fù)制到  0 號(hào)位
console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4));  // [4, 2, 3, 4, 5]
// -2 相當(dāng)于 3 號(hào)位晨另，-1 相當(dāng)于 4 號(hào)位
console.log([1, 2, 3, 4, 5].copyWithin(1, -2, -1));  // [1, 4, 3, 4, 5]

實(shí)例方法：find()、findIndex()

數(shù)組實(shí)例的 find() 方法谱姓，用于找出第一個(gè)符合條件的數(shù)組成員借尿。它的參數(shù)是一個(gè)回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)屉来，直到找出第一個(gè)返回值為 true 的成員路翻，染回返回該成員。如果沒有符合條件的成員則返回 undefined茄靠。

// 找出數(shù)組中小于 0 的成員
let arr = [1, 4, -5, 10];
console.log(arr.find(n => n < 0));  // -5

find 方法的回調(diào)可以接受三個(gè)參數(shù)茂契，依次為當(dāng)前的值、當(dāng)前的位置和原數(shù)組慨绳。

[1, 4, 4, 5, 55, 2].find((value, index, arr) => {
  console.log(value, index, arr);
});

findIndex() 方法掉冶，返回第一個(gè)符合條件的數(shù)組成員的位置莫瞬，如果所有成員都不符合，則返回 -1郭蕉。

console.log([1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}));  // 2

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

function f (v) {
  return v > this.age;
}
let person = {name: 'John', age: 20};
let age = [10, 12, 26, 15].find(f, person);
console.log(age);  // 26
// find() 方法接受了第二個(gè)參數(shù) person 對(duì)象召锈，回調(diào)函數(shù)中的this 對(duì)象指向 person 對(duì)象旁振。

實(shí)例方法：fill()

fill() 方法使用給定值，填充一個(gè)數(shù)組涨岁。

let arr = ['a', 'b', 'c'];
console.log(arr.fill(7));  // [7, 7, 7]
new Array(3).fill(7);  // [7, 7, 7]

上代碼拐袜，fill() 方法用于空數(shù)組初始化非常方便。數(shù)組中已有的元素梢薪，會(huì)被全部抹去蹬铺。

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

['a', 'b', 'c'].fill(7, 1, 2);  // ['a', 7, 'c']

上代碼甜攀，fill() 方法從 1 號(hào)位開始，向原數(shù)組填充 7琐馆，到 2 號(hào)位之前結(jié)束规阀。

如果填充的類型為對(duì)象，那么被賦值的是同一個(gè)內(nèi)存地址的對(duì)象瘦麸，而不是深拷貝對(duì)象谁撼。

{
  let arr = new Array(3).fill({name: "Mike"});
  arr[0].name = "Ben";
  console.log(arr);  // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
}
{
  let arr = new Array(3).fill([]);
  arr[0].push(5);
  console.log(arr);  // [[5], [5], [5]]
}

實(shí)例方法：entries()、keys() 和 value()

Es6 提供三個(gè)新的方法：entries()滋饲、keys() 和 values() 用于遍歷數(shù)組厉碟。它們都返回一個(gè)遍歷器對(duì)象，可以用 for...of 循環(huán)進(jìn)行遍歷屠缭，唯一的區(qū)別是 keys() 是對(duì)鍵名的遍歷箍鼓、values() 是對(duì)鍵值的遍歷，entries() 是對(duì)鍵值對(duì)的遍歷勿她。

let arr = ['a', 'b'];
// 鍵名遍歷
for (let index of arr.keys()) {
  console.log(index);  // 0 1
}
// 鍵值遍歷
for (let elem of arr.values()) {
  console.log(elem);  // 'a' 'b'
}
// 鍵值對(duì)遍歷
for (let item of arr.entries()){
  console.log(item);  // [0, 'a'] [1, 'b']
}
for (let [index, elem] of arr.entries()){
  console.log(index, elem);  // 0, 'a' 1, 'b'
}

// 如果不適用 for...of 循環(huán)袄秩，可以手動(dòng)調(diào)用遍歷器對(duì)象的 next 方法，進(jìn)行遍歷
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries);
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

實(shí)例方法：includes()

Array.prototype.includes 方法返回一個(gè)布爾值逢并，表示某個(gè)數(shù)組是否包含給定的值之剧，與字符串的 includes 方法類似。

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

includes() 方法的第二個(gè)參數(shù)表示搜索的起始位置砍聊，默認(rèn)為 0背稼。如果第二個(gè)參數(shù)為負(fù)數(shù)，則表示倒數(shù)玻蝌，如果大于數(shù)組的長度蟹肘，則會(huì)重置為 0 開始词疼。

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

沒有該方法之前我們使用 indexOf() 方法，檢查是否包含這個(gè)值帘腹。if (arr.indexOf(el) !== -1) { ... }贰盗。

indexOf() 方法有兩個(gè)缺點(diǎn)，一是不夠語義化阳欲，它的含義是找到參數(shù)值得第一個(gè)出現(xiàn)的位置舵盈，所以要比較是否不等于 -1，表達(dá)不夠直觀球化。二是秽晚，它內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）進(jìn)行判斷，這會(huì)導(dǎo)致對(duì) NaN 的誤判筒愚。

console.log([NaN].indexOf(NaN));  // -1

includes() 使用的是不一樣的判斷算法赴蝇，就沒有這個(gè)問題。

console.log([NaN].includes(NaN));  // true

實(shí)例方法：flat()巢掺、flatMap()

Array.prototype.flat() 用于將嵌套的數(shù)組 “拉平”句伶，變成一維的數(shù)組。該方法返回一個(gè)新數(shù)組址遇，對(duì)原數(shù)據(jù)沒有影響熄阻。

let arr = [1, 2, [3, 4]];
console.log(arr.flat());  // [1, 2, 3, 4]

flat() 方法默認(rèn)只會(huì) “拉平” 一層，如果想有 “拉平” 多層的嵌套數(shù)組倔约，可以將 flat() 方法的參數(shù)寫成一個(gè)整數(shù)，表示想要拉平的層數(shù)坝初，默認(rèn)為 1浸剩。

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]

上代碼，flat() 方法參數(shù)為 2鳄袍，表示要 “拉平” 兩層的嵌套數(shù)組绢要。

不管有多少層嵌套，都要轉(zhuǎn)成一維數(shù)組拗小，可以使用 Infinity 關(guān)鍵字作為參數(shù)重罪。

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

如果原數(shù)組有空位，flat() 方法會(huì)跳過空位哀九。

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

flatMap() 方法對(duì)原數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù)（相當(dāng)于執(zhí)行 Array.prototype.map()）剿配，然后對(duì)返回值組成的數(shù)組執(zhí)行 flat() 方法。該方法返回一個(gè)新數(shù)組阅束，不改變?cè)瓟?shù)組呼胚。

console.log([2, 3, 4].flatMap(x => [x, x * 2]));  // [2, 4, 3, 6, 4, 8]
console.log([1, 2, 3, 4].flatMap((x) => [[x * 2]]));  // [[2], [4], [6], 8]

flatMap() 方法的參數(shù)是一個(gè)遍歷函數(shù)，該函數(shù)可以接受三個(gè)參數(shù)息裸，分別是當(dāng)前數(shù)組成員蝇更、當(dāng)前數(shù)組成員的位置（從零開始）沪编、原數(shù)組。

arr.flatMap(function callback(currentValue, index, array) {
  console.log(currentValue, index, array);
})

flatMap() 方法還可以有第二個(gè)參數(shù)年扩，用來綁定遍歷函數(shù)里面的 this蚁廓。

可以使用 flat() 來跳過空格。參數(shù)傳 0 或不傳參厨幻。

數(shù)組的空位

數(shù)組的空位指纳令，數(shù)組的某一個(gè)位置沒有任何值。比如克胳，Array 構(gòu)造函數(shù)返回的數(shù)組都是空位平绩。

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

上代碼，Array(3) 返回一個(gè)具有 3 個(gè)空位的數(shù)組漠另。

注意捏雌，空位不是 undefined，一個(gè)位置的值等于 undecided笆搓，依然是有值的性湿。空位是沒有任何值满败，in 運(yùn)算符可以說明這一點(diǎn)肤频。

console.log(0 in [undefined]);  // true
console.log(0 in [,]);  // false

上面代碼說明，第一個(gè)數(shù)組的 0 號(hào)位置是有值的算墨，第二個(gè)數(shù)組的 0 號(hào)位置沒有值宵荒。

Es5 對(duì)空位的處理，已經(jīng)很不一致了净嘀，大多數(shù)情況下會(huì)忽略空位报咳。
Es6 則是明確將空位轉(zhuǎn)為 undefined
由于空位的處理規(guī)則非常不統(tǒng)一，所以建議避免出現(xiàn)空位挖藏。