Array.from() | 将`类数组与可遍历对象(length)`转化为数组 `ES5方法 [].slice.call(xx)`
1.Array.from()
只要是部署了Iterator接口的数据结构，Array.from都能将其转化为数组
类数组对象转化为数组
let arrayLike = {
'0': 'a', // key模仿数组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数据结构
// 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属性的对象转换, ...运算符不适用
Array.from({length: 3}) // [undefined, undefined, undefined]
Array.from的第二个参数，类似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)
// 给数组内为false的成员转化为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总是返回参数值组成的数组
Array.of可以替代Array()、new Array()并且行为非常同意，不存在参数不同导致的问题
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.数组实例的copyWithin()
copyWithin方法把target位置起的成员替换为start-end的成员
Array.prototype.copyWithin(target, start = 0, end = this.length)
4.数组实例find()、findIndex()
find(callback)、findIndex(callback)参数都为一个回调函数
find(callback(value,index,arr))
找出第一个符合条件的数组成员
[1, -4, -5, 10].find((n) => n < 0)
// -4
findIndex(callback(value,index,arr))
找出第一个符合条件的数组成员的索引
[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.数组实例fill()
fill使用给定值填充一个数组，
['a', 'b', 'c'].fill(7)
// [7, 7, 7] 替换
new Array(3).fill(7) // 初始化
// [7, 7, 7] 填充长度为3的空数组
Array.of(1,2,3).fill(7)
// [7, 7, 7] 替换
fill(value, start, end)参数
['a', 'b', 'c'].fill(7, 1, 2) // 指定替换
// ['a', 7, 'c']
6.数组实例的entries(), keys(), values()
数组的三个遍历器接口
[].enteries() / [].keys() / [].values()
for of循环
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.数组实例的include()方法
返回布尔值，表示数组是否包含给定值，可以判断NaN
[NaN].indexOf(NaN)
// -1
一个参数
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
第二个参数表示数组的位置
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
