ES6 數組相關

1.1擴展運算符(...)

1.1.1 用於函數調用

將一個數組變爲參數序列；可與正常的函數參數結合使用；擴展運算符後面也能夠放表達式；若是擴展運算符後面是空數組，不產生任何效果。只有函數調用時，擴展運算符才能夠放到圓括號裏。

const array1 = [];
const array2 = [];
const arr = [1,2,3];
function push(array,...items){
  array.push(...items);
  console.log(...(items+'1')); // 1 , 2 , 3 1
}
push(array1,...arr);
push(array2,...[]);

array1 // [1,2,3]
array2 //[]
複製代碼

1.1.2 替代Apply方法

apply方法的第二個參數把數組轉換爲函數的參數，有了擴展運算符，能夠替代apply的這個做用

function f(x, y, z) {
  // ...
}

// ES5 的寫法
var args = [0, 1, 2];
f.apply(null, args);

// ES6的寫法
let args = [0, 1, 2];
f(...args);
複製代碼

1.1.3 複製數組

數組是複合數據類型，直接複製只是複製了數組的地址，沒有從新建立一個數組。擴展運算符能夠提供複製數組的簡便方法。若是數組成員是對象，只能複製對象的引用，若是修改了新數組成員，會同步反映到原數組（淺拷貝）

const a1 = [1, 2];
const a2 = a1;
// 只複製了a1的地址
a2[0] = 2;
a1 // [2, 2]

// ES5
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]

// 擴展運算符方法
const a2 = [...a1]; // 寫法一
const [...a2] = a1; // 寫法二
複製代碼

1.1.4 合併數組

提供了數組合並的新寫法

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合併數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
複製代碼

1.1.5 結合解構賦值

擴展運算符能夠與解構賦值結合生成數組，只能把擴展運算符，會報錯

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯
複製代碼

1.1.6 將字符串轉爲數組

[...'hello']
// [ "h", "e", "l", "l", "o" ]
複製代碼

1.1.7 將==定義了Iterator==接口的對象轉換爲數組

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
// 沒有部署Iterator接口的相似數組的對象
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
複製代碼

1.1.8 帶有Iterator接口的對象可以使用擴展運算符

擴展運算符背後調用的是遍歷器接口

// map結構
let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

// generator
const go = function*(){
  yield 1;
  yield 2;
  yield 3;
};
[...go()] // [1, 2, 3]
複製代碼

1.2Array.from()

用於將相似數組的對象和可遍歷的對象轉爲真正的數組。==對象裏必須有length屬性==,任何有length屬性對對象均可以經過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']

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
複製代碼

Array.from()還能夠接受第二個參數，做用相似數組的map方法，用來對每一個元素進行處理，處理後放入數組。

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
複製代碼

1.3Array.of()

將一組值轉爲數組，這個函數主要爲了彌補構造函數Array()由於參數個數不一樣，致使Array()行爲有差別的不足。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(3) // [3]
Array.of(1, 2) // [1, 2]
複製代碼

1.4數組實例的copyWithin()

把當前數組內部指定位置的成員複製到其餘位置（會覆蓋原有成員），而後返回當前數組。能夠修改當前數組。

參數：

1. target（必須）：從該位置開始替換數據。若是爲負值，表示倒數。
2. start（可選）：從該位置開始讀取數據，默認爲 0。若是爲負值，表示從末尾開始計算。
3. 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]
複製代碼

1.5數組實例find(),findIndex()

1.find方法：用於找出第一個符合條件的數組成員。參數是一個回調函數，全部數組成員依次執行該回調函數，知道找到第一個返回值爲true的成員，而後返回該成員。find方法的回調參數能夠接受三個參數，依次爲當前值、當前位置和原數組。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10
複製代碼

2.findIndex方法：和find相似，返回符合條件的成員位置。

這兩個方法能夠接受第二個參數，用來綁定回調函數的this對象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26
複製代碼

能夠發現NaN，彌補了indexOf方法的不足。

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0
複製代碼

1.6數組實例fill()

使用給定值，填充數組

參數：

1. value：用來填充數組元素的值
2. start（可選）：起始索引，默認爲0
3. end（可選）：終止索引，默認爲this.length

若是參數只有第一個，會把數組全部元素覆蓋，適合用於給空數組賦初值。

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

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
複製代碼

1.7數組實例entries(),keys(),values()

1. 三個方法的相同點：都是用於遍歷數組。返回一個遍歷器對象。
2. 區別：entries遍歷鍵值對，keys遍歷鍵名，values遍歷鍵值。

console.log(...['a','b','c'].keys()); // 0 1 2
console.log(...['a','b','c'].values()); // a b c
console.log(...['a','b','c'].entries()); // [ 0, 'a' ] [ 1, 'b' ] [ 2, 'c' ]
複製代碼

3. 遍歷 能夠用for...of循環遍歷，也能夠手動調用遍歷器的next方法。

// for...of
for (let elem of ['a', 'b','c'].entries()) {
  console.log(elem);
}

// 遍歷器
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
複製代碼

1.8數組實例includes()

表示數組是否包含給定的值。

參數：

1. valueToFind：須要查找的元素值
2. fromIndex（可選）：從fromIndex索引處開始查找。若是第二個參數爲負數，則表示倒數的位置，若是這時它大於數組長度（好比第二個參數爲-4，但數組長度爲3），則會重置爲從0開始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, 3].includes(3,-4); //true
[1, 2, NaN].includes(NaN); // true
複製代碼

與Map，Set的has方法的區別：

1. Map的has方法：查找鍵名
2. Set的has方法：查找值

1.9數組實例的flat(),flatMap()

1.flat()：用於將嵌套的數組拉平，返回一個一維數組，對原數據沒有影響。參數：depth-指定要提取嵌套數組的結構深度，默認值爲1。若是無論有多少層嵌套，都要轉成一維數組，能夠用Infinity關鍵字做爲參數。若是原數組有空位，flat()方法會跳過空位。

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

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

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
複製代碼

2.flatMap()：首先使用映射函數映射每一個元素，而後將結果壓縮成一個新數組。

參數：

1. callback-能夠生成一個新數組中的元素的函數，能夠傳入三個參數：currentValue（當前正在數組中處理的元素），index（可選，數組中正在處理的當前元素的索引）， array（可選，被調用的 map 數組）
2. thisArg-可選，執行 callback 函數時 使用的this值

// 至關於 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

// flatMap只能展開一層數組
// 至關於 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
複製代碼

1.10數組的空位

數組對空位是指數組對某一位置沒有任何值，空位不是undefined，一個位置值等於undefined仍然是有值。

ES5對空位的處理不一致，大多數狀況忽略空位。ES6明確將空位轉爲undefined。上述ES6新增的數組方法都不會忽略空位。

// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]

// keys()
[...[,'a'].keys()] // [0,1]

// values()
[...[,'a'].values()] // [undefined,"a"]

// find()
[,'a'].find(x => true) // undefined

// findIndex()
[,'a'].findIndex(x => true) // 0
複製代碼

1.11數組經常使用方法（ES5的）

1.11.1 some和every方法

1. some()：測試是否==至少有一個==元素能夠經過被提供的函數方法。返回Boolean類型
2. every()：測試是否==全部元素==都能經過被提供的函數方法。返回Boolean類型。

參數（兩個方法參數一致）：

1. callback-測試元素的函數，可接受三個參數：element（測試的當前值）；index（可選，測試的當前值的索引）；array（可選，調用some，every的當前數組）
2. thisArg-執行callback使用的this值

const hasProvider = providerList.some(item => item.providerNumber === providerNumber);

arr2.every((item, index) => item === arr1[index])
複製代碼

1.11.2 filter方法

建立一個新數組,其包含經過所提供函數實現的測試的全部元素。

參數（兩個方法參數一致）：

1. callback-測試元素的函數，可接受三個參數：element（測試的當前值）；index（可選，測試的當前值的索引）；array（可選，調用的當前數組）
2. thisArg-執行callback使用的this值

const newlist = list.filter(item => item.channelNumber === channelNumber);
複製代碼

1.11.3 map方法

建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。

參數：

1. callback-測試元素的函數，可接受三個參數：currentValue（測試的當前值）；index（可選，測試的當前值的索引）；array（可選，調用的當前數組）
2. thisArg-執行callback使用的this值

const channelNumberList = channelList.map(item => item.channelNumber)
複製代碼

1.11.4 forEach方法

對數組的每一個元素執行一次提供的函數

參數：

1. callback-測試元素的函數，可接受三個參數：currentValue（測試的當前值）；index（可選，測試的當前值的索引）；array（可選，調用的當前數組）
2. thisArg-執行callback使用的this值

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);
});
複製代碼

1.11.5 push(), pop(), shift(), unshift()方法

1.push()：將一個或多個元素添加到數組末尾，並返回數組新長度。

參數：elementN-被添加到數組末尾到n個元素（按順序添加）

能夠用來合併兩個數組

var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// 將第二個數組融合進第一個數組
// 至關於 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables); 
// ['parsnip', 'potato', 'celery', 'beetroot']
複製代碼

2.pop()：刪除數組最後一個元素，返回該元素的值。

對於空數組使用pop方法，返回undefined。

var arr = ['a', 'b', 'c'];

arr.pop() // 'c'
arr // ['a', 'b']
[].pop() // undefined
複製代碼

3.shift()：刪除數組第一個元素，返回該元素的值。

var a = ['a', 'b', 'c'];

a.shift() // 'a'
a // ['b', 'c']
複製代碼

push和shift方法結合使用，構成了先進先出的隊列結構。

4.unshift()：在數組第一個位置添加元素，返回添加新元素後數組長度。可接受多個參數。

var a = ['a', 'b', 'c'];

a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']
複製代碼

1.11.6 join(), concat()方法

1.join()：指定參數做爲分隔符，將全部數組成員鏈接成字符串返回。不提供參數默認用逗號分隔。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
複製代碼

2.concat()：用於多個數組的合併，將新數組的成員加到原數組成員後部，==返回一個新數組==，原數組不變。

參數：valueN-將數組和/或值鏈接成新數組

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]

[2].concat({a: 1})
// [2, {a: 1}]
複製代碼

1.11.7 slice(), splice()方法

1.slice()：提取目標數組的一部分，返回一個新數組，原數組不變。

參數：

1）begin 可選 提取起始處的索引，從該索引開始提取原數組元素，默認爲 0。

若是該參數爲負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2)表示提取原數組中的倒數第二個元素到最後一個元素（包含最後一個元素）。

若是省略 begin，則 slice 從索引 0 開始。

若是 begin 大於原數組的長度，則會返回空數組。

2）end 可選 提取終止處的索引，在該索引處結束提取原數組元素，默認爲 0。slice 會提取原數組中索引從 begin 到 end。

若是該參數爲負數， 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1) 表示抽取了原數組中的倒數第二個元素到最後一個元素（不包含最後一個元素，也就是隻有倒數第二個元素）。

若是 end 被省略，則slice 會一直提取到原數組末尾。

若是 end 大於數組的長度，slice也會一直提取到原數組末尾。

var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]
複製代碼

2.splice()：用於刪除原數組的一部分紅員，並能夠在刪除的位置添加新的數組成員，返回值是被刪除的元素。注意，==該方法會改變原數組==。

參數：

1）start-指定修改的開始位置（從0計數）

若是超出了數組的長度，則從數組末尾開始添加內容；

若是是負值，則表示從數組末位開始的第幾位（從-1計數，這意味着-n是倒數第n個元素而且等價於array.length-n）；

若是負數的絕對值大於數組的長度，則表示開始位置爲第0位。

2）deleteCount-可選，整數，表示要移除的數組元素的個數。

若是 deleteCount 大於 start 以後的元素的總數，則從 start 後面的元素都將被刪除（含第 start 位）。

若是 deleteCount被省略了，或者它的值大於等於array.length-start(也就是說，若是它大於或者等於start以後的全部元素的數量)，那麼start以後數組的全部元素都會被刪除。

若是 deleteCount 是 0 或者負數，則不移除元素。這種狀況下，至少應添加一個新元素。

3）item1, item2, ... 可選

要添加進數組的元素,從start 位置開始。若是不指定，則 splice() 將只刪除數組元素。

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]
複製代碼

---

摘自阮一峯

參考MDN