數組的擴展 —— ES6基礎總結（一）

前言

本文主要介紹ES6中關於數組擴展的一些知識點，具體包括如下內容：

擴展運算符 ...

將數組轉爲用逗號分隔的參數序列。

console.log(...[1,2,3,4,5])   
    
    // 1 1 2 3 4 5
複製代碼

1. 用於函數調用時傳參，可與普通參數結合使用；

function add (x, y, z) {
        console.log(x + y + z)
    }
    
    add(...[1, 2, 3])   // 6
    add(1, ...[2, 3])   // 6
    add(1, ...[1, 2, 3])    // 4
複製代碼

2. 替代函數的apply方法；

// ES5 的寫法
    Math.max.apply(null, [1, 2, 3])
    
    // ES6 的寫法
    Math.max(...[1, 2, 3])
    
    // 等同於
    Math.max(1, 2, 3);
複製代碼

3. 複製合併數組（對象爲引用複製）；

• 複製數組

let arr1 = [1, 2, 3, 4, 5, {name: 'Memory'}]
    let arr2 = [...arr1]
    
    arr2   // [1, 2, 3, 4, 5, {name: "Memory"}]
    arr1 === arr2  // false
    
    arr2[0] = 'test'
    arr2[5].name = 'doubleMeng'
    
    arr1   // [1, 2, 3, 4, 5, {name: "doubleMeng"}]
    arr2   // ["test", 2, 3, 4, 5, {name: "doubleMeng"}]
複製代碼

• 合併數組

let arr1 = [{ foo: 1 }]
    let arr2 = [1, 2, 3]
    let arr3 = ['a', 'b', 'c']
    let arr4 = [...arr1, ...arr2, arr3]
    
    arr4   // [{foo: 1}, 1, 2, 3, ["a", "b", "c"]]
    arr4[0] === arr1[0]    // true 
複製代碼

4. 與解構賦值結合，用戶生成數組；

let [first, ...rest] = [1, 2, 3, 4, 5]
    first  // 1
    rest   // [2, 3, 4, 5]
複製代碼

let [first, ...rest] = [];
    first  // undefined
    rest   // []
複製代碼

let [first, ...rest] = [1];
    first  // 1
    rest   // []
複製代碼

• 只能放在參數的最後一位，不然會報錯。

let [first, ...second, last] = [1, 2, 3, ,4, 5]
    
    // Uncaught SyntaxError: Rest element must be last element
複製代碼

5. 將字符串轉爲數組；

[...'12345']   // ["1", "2", "3", "4", "5"]
複製代碼

6. 任何定義了Iterator接口的對象，均可以用擴展運算符轉爲真正的數組。

   好比函數arguments、document.getElementsByTagName('div')、Set、Map、Generator函數返回值等。

• 定義了Iterator接口

function test () {
        console.log([...arguments])     // [1, 2, 3, 4, 5]
        console.log(arguments instanceof Array)     // false 
        console.log([...arguments] instanceof Array)    // true
    }
    test(1, 2, 3, 4, 5)
複製代碼

let map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ])
    
    let arr = [...map.keys()]
    arr    // [1, 2, 3]
複製代碼

• 未定義Iterator接口

let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
    };
    
    [...arrayLike];
    // Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
複製代碼

注意

1. 若是放在()中，會被解析爲函數調用。若是這時不是函數調用，則會報錯；

(...[1,2,3,4,5])
    
    // Uncaught SyntaxError: Invalid destructuring assignment target
複製代碼

2. 若是是一個空數組，則不會產生任何效果；

console.log(...[])  // 無效果
    
    [1, ...[]]  // [1]
複製代碼

3. 能夠放表達式；

let x = 1
    [
        ...(x > 0 ? ['a', 'b', 'c'] : [1, 2, 3]), 'test'
    ];      // ["a", "b", "c", "test"]
    ``` ```
    let y = -1
    [
        ...(y > 0 ? ['a', 'b', 'c'] : [1, 2, 3]), 'test'
    ];      // [1, 2, 3, "test"]
複製代碼

建立數組

主要講將其餘類型數據轉換爲數組，可用的方法有Array.from()、Array.of()

Array.from(target， [map]， [this])

用於將相似數組的對象（array-like object）和可遍歷（iterable）對象轉爲真正的數組

參數：

-target: 目標對象，爲類數組或可遍歷對象；

-[map]: 函數，做用相似於map，用來對每一個元素進行處理，將處理的值放入返回的數組;

-[this]: 用來綁定函數(map)的this對象。

1. 相似數組的對象（array-like object），擁有length屬性；

• 常見場景：DOM選擇器返回的NodeList集合、函數的arguments。

let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    
    let arr = Array.from(arrayLike)   // ["a", "b", "c"]
複製代碼

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

2. 可遍歷（iterable）的對象（例如Set、Map、String等）。

let set = new Set([1, 2, 3)  // {1, 2, 3}
    
    Array.from(set)   // [1, 2, 3]
    Array.from([set, (x) => x * x)   // [1, 4, 9]
    ``` ```
    let str = 'abc'   // "abc"
    
    Array.from(str)   // ["a", "b", "c"]
複製代碼

Array.of(arg1, arg2, ...)

1. 用於將一組值，轉換爲數組；

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

2. 彌補Array()的不足。

• Array()

Array(3)    // [empty × 3] 被當作length處理
    Array('3')      // ["3"]
複製代碼

• Array.of()

Array.of(3)   // [3] 被當作元素處理
    Array.of('3')   // ["3"]
複製代碼

查找元素

用於在當前數組中查找指定目標，可用的方法有includes()、find()、findIndex()。

includes(target, [start])

是否包含給定的目標值，返回一個Boolean值。

參數：

-target: 要尋找的目標值；

-[start]: 開始尋找的位置。

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

起始位置爲負數，則表示倒數的位置。若是該值得絕對值大於數組長度，則從第0位開始查找。

[1, 2, 3].includes(2, 1)   // true
    [1, 2, 3].includes(2, 2)   // false
    
    [1, 2, 3, 4, 5].includes(4, -2)   // true
    [1, 2, 3, 4, 5].includes(3, -2)   // false
    [1, 2, 3, 4, 5].includes(3, -100)   // true 從第0位開始查找
複製代碼

find(callback, [this])

找出第一個符合條件的值，全部沒有找到該元素，則返回undefined。

參數：

-callback: 回調函數；

-[this]: 用來綁定回調函數的this對象。

let arr = [-2, -1, 0, 1, 2]
    arr.find(item => item > 0)    // 1
    arr.find(item => item > 5)    // undefined
複製代碼

findIndex(callback, [this])

找出第一個符合條件的值的下標，全部沒有找到該元素，則返回-1。

參數：

-callback: 回調函數；

-[this]: 用來綁定回調函數的this對象。

let arr = [-2, -1, 0, 1, 2]
    arr.findIndex(item => item > 0)   // 3
    arr.findIndex(item => item > 5)   // -1
複製代碼

填充數組

將其餘數據填充至該數組，可用的方法有copyWithin()、fill。

copyWithin(target, [start], [end])

將指定位置的成員複製到其餘位置，將原數組修改並返回。

參數：

-target: 從該位置開始替換數組，若是爲負值，則表示倒數；

-[start]: 從該位置讀取數據，默認爲0，若是爲負數，則表示倒數；

-[end]: 從該位置前中止讀取數據，默認等於數組長度，若是爲負數，表示倒數。

[1, 2, 3, 4, 5].copyWithin(0, 3)    // [4, 5, 3, 4, 5]
    [1, 2, 3, 4, 5].copyWithin(1, 3)    // [1, 4, 5, 4, 5]
    
    [1, 2, 3, 4, 5].copyWithin(0, -3, -1)   // [3, 4, 3, 4, 5]
    [1, 2, 3, 4, 5].copyWithin(1, -3, -2)   // [1, 3, 3, 4, 5]
複製代碼

fill(value, [start], [end])

使用給定值，填充一個數組。

參數：

-value: 要填充的值；

-[start]: 開始填充的位置；

-[end]: 結束位置。

[1, 2, 3, 4, 5].fill('test')    // ["test", "test", "test", "test", "test"]
    [1, 2, 3, 4, 5].fill('test', 2, 4)    // [1, 2, "test", "test", 5]
複製代碼

遍歷數組

遍歷數組，返回一個遍歷器對象，可用的方法有entries()、 keys()、 values()。

keys()

遍歷鍵名

for (let index of ['a', 'b', 'c', 'd', 'e'].keys()) {
    	console.log(index)    // 0 1 2 3 4
    }
複製代碼

values()

遍歷鍵值

for (let item of ['a', 'b', 'c', 'd', 'e'].values()) {
        console.log(item)    // a b c d e
    }
複製代碼

entries()

遍歷鍵值對

for (let [index, item] of ['a', 'b', 'c', 'd', 'e'].entries()) {
    	console.log(index, item)    // 0 "a" 1 "b" 2 "c" 3 "d" 4 "e"
    }
複製代碼

打平數組

將數組打平，可用的方法有flat()、 flatMap()。

flat([n])

該方法會跳過空位。

參數：

-[n]: 打平n層嵌套，默認爲1，打平任意層可以使用Infinity。

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

flatMap(func, [this])

對數組的每個成員執行一個函數，而後對返回值執行flat(1)方法；

返回新數組，不改變原數組。

參數：

-func: 遍歷函數，該函數可接受三個參數：當前數組成員、當前數組成員的位置、原數組；

-[this]: 綁定遍歷函數的this。

[1, 2, 3].flatMap(item => item * 2)   // [2, 4, 6]
    [1, 2, 3].flatMap(item => [item * 2])   // [2, 4, 6]
    [1, 2, 3].flatMap(item => [[item * 2]])   // [[2, 4, 6]] 默認只能展開一層 
複製代碼

參考

ECMAScript 6 入門

小結

本文主要介紹了ES6中對於數組的一些擴展，其中包括擴展運算符（...）、建立數組(Array.from() Array.of())，查找元素(find() findIndex() includes())、填充數組(copyWithin() fill())、遍歷數組(keys() values() entries)、打平數組(flat() flatMap())等方面作主要闡述。

感謝閱讀，若有問題，歡迎指正。