Array.from() | 將`類數(shù)組與可遍歷對象(length)`轉(zhuǎn)化為數(shù)組 `ES5方法 [].slice.call(xx)`

1.Array.from()

只要是部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu)，Array.from都能將其轉(zhuǎn)化為數(shù)組

類數(shù)組對象轉(zhuǎn)化為數(shù)組

let arrayLike = {
    '0': 'a', // key模仿數(shù)組index索引
    '1': 'b',
    '2': 'c',
    length: 3 // 必須
}
let arr = Array.from(arrayLike) // ['a', 'b', 'c']

NodeList、arguments對象

// NodeList
let ps = document.querySelectorAll('p')
Array.from(ps) // [p,p,p,p,p]
// arguments
function fn() {
  return Array.from(arguments)
}
fn(1,2,3,4) // [1,2,3,4]

字符串、Set數(shù)據(jù)結(jié)構(gòu)

// String
Array.from('hello') // ['h', 'e', 'l', 'l', 'o']
// Set
let set = new set(['a', 'b'])
Array.from(set) // ['a', 'b']

擴展運算符...的相似用法，d

// arguments對象
function foo() {
  let args = [...arguments];
}

// NodeList對象
[...document.querySelectorAll('p')]

// String對象
[...'string'] // ["s", "t", "r", "i", "n", "g"]

// Set對象  
[...new Set(['a', 'b'])] // ["a", "b"]

對具有lenght屬性的對象轉(zhuǎn)換, ...運算符不適用

Array.from({length: 3}) // [undefined, undefined, undefined]

Array.from的第二個參數(shù)，類似Array.prototype.map

Array.from([1,2,3], x => x * x) // [1,4,9]
Array.from([1,2,3]).map(x => x * x)
// NodeList
let ps = document.querySelectorAll('p')
Array.from(ps, p => p.textContent)
Array.from(ps).map(p => p.textContent)

// 給數(shù)組內(nèi)為false的成員轉(zhuǎn)化為0
Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

Array.from({length: 2}, () => 'str') // ["str", "str"]

返回字符串長度，正確處理Unicode字符!

function countSymbols(string) {
  return Array.from(string).length;
}

2.Array.of()

Array.of總是返回參數(shù)值組成的數(shù)組
Array.of可以替代Array()、new Array()并且行為非常同意，不存在參數(shù)不同導(dǎo)致的問題

Array.of() 示例

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(null) // [null]
Array.of([]) // [Array[0]]
Array.of({}) // [Object]
Array.of(false, true) // [false, true]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

3.數(shù)組實例的copyWithin()

copyWithin方法把target位置起的成員替換為start-end的成員

Array.prototype.copyWithin(target, start = 0, end = this.length)

4.數(shù)組實例find()、findIndex()

find(callback)、findIndex(callback)參數(shù)都為一個回調(diào)函數(shù)

find(callback(value,index,arr))

找出第一個符合條件的數(shù)組成員

[1, -4, -5, 10].find((n) => n < 0)
// -4

findIndex(callback(value,index,arr))

找出第一個符合條件的數(shù)組成員的索引

[1, -4, -5, 10].findIndex((n) => n < 0)
// 1

彌補indexOf方法遇到NaN時的不足

indexOf無法識別NaN，但是findIndex可以借助Object.is做到

[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0

5.數(shù)組實例fill()

fill使用給定值填充一個數(shù)組，

['a', 'b', 'c'].fill(7)
// [7, 7, 7] 替換
new Array(3).fill(7) // 初始化
// [7, 7, 7] 填充長度為3的空數(shù)組
Array.of(1,2,3).fill(7)
// [7, 7, 7] 替換

fill(value, start, end)參數(shù)

['a', 'b', 'c'].fill(7, 1, 2) // 指定替換
// ['a', 7, 'c']

6.數(shù)組實例的entries(), keys(), values()

數(shù)組的三個遍歷器接口
[].enteries() / [].keys() / [].values()

for of循環(huán)

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

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

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

next() 遍歷

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']

7.數(shù)組實例的include()方法

返回布爾值，表示數(shù)組是否包含給定值，可以判斷NaN

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

一個參數(shù)

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

第二個參數(shù)表示數(shù)組的位置

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