陣列的擴充套件 —— ES6基礎總結（一）

萌小萌和她的前端筆記發表於2019-04-06
陣列套件

前言

本文主要介紹ES6中關於陣列擴充套件的一些知識點，具體包括以下內容：

Array 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
複製程式碼
  1. 替代函式的apply方法；
// ES5 的寫法
Math.max.apply(null, [1, 2, 3])

// ES6 的寫法
Math.max(...[1, 2, 3])

// 等同於
Math.max(1, 2, 3);
複製程式碼
  1. 複製合併陣列（物件為引用複製）；

複製陣列

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 
複製程式碼
  1. 與解構賦值結合，使用者生成陣列；
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
複製程式碼
  1. 將字串轉為陣列；
[...'12345']   // ["1", "2", "3", "4", "5"]
複製程式碼

  1. 任何定義了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,2,3,4,5])

// Uncaught SyntaxError: Invalid destructuring assignment target
複製程式碼
  • 如果是一個空陣列，則不會產生任何效果；
console.log(...[])  // 無效果

[1, ...[]]  // [1]
複製程式碼
  • 可以放表示式；
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)
複製程式碼
  1. 可遍歷（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]
複製程式碼
  1. 彌補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())等方面做主要闡述。

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

相關文章