- Array.from()
该方法用于将类数组或者可遍历对象转化成数组
// 正确写法
obj = {0: 'a', 1: 'b', 2: 'c', length:3}
console.log(Array.from(obj)) // ["a", "b", "c"]
// 改变顺序是被支持的
obj = {2: 'a', 1: 'b', 0: 'c', length:3}
console.log(Array.from(obj)) // ["c", "b", "a"]
// 错误写法1
obj = {0: 'a', 1: 'b', 2: 'c'} // 注意这里没有length属性
console.log(Array.from(obj)) // []
// 错误写法二
obj = {0: 'a', 1: 'b', 3: 'c', length:3} // 注意这里的key不是连续的
console.log(Array.from(obj)) // ["a", "b", undefined]
分析：对象里必须是连续的key值，并且需要length属性
// 针对dom对象的类数组
let lists = document.getElementsByTagName('li')
Array.from(lists).forEach(function (list) {
console.log(list)
})
// 针对arguments
function fn() {
let args = Array.from(arguments)
}
只要部署了Iterator接口的数据结构都可以用这个转化成数组，例如字符串
Array.from('hello word') // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "d"]
拓展：
- 如果参数是一个真正的数组Array.from()会返回一个新的完全一样的数组
- 扩展运算符(...)也可以将部分数据结构转化成数组
// arguments对象
function fn() {
let args = [...arguments]
}
// dom集合
let lists = document.getElementsByTagName('li')
[...lists].forEach(function (list) {
console.log(list)
})
- 兼容写法
Array.from ? Array.from : obj => [].slice.call(obj)
-
多个参数
- 第二个参数，类似于map，将每个元素进行处理，返回处理后的值到新数组
let obj = {0: 'a', 1: 'b', 2: 'c', length: 3} Array.from(obj, param => 'param:' + param) // ["param:a", "param:b", "param:c"] // 等价于 let obj = {0: 'a', 1: 'b', 2: 'c', length: 3} Array.from(obj).map(param => 'param:' + param)- 第三个参数，用来绑定this
- Array.of()
该方法用于将一组值转化成数组
Array.of(1,2,3) // [1, 2, 3]
Array.of(undefined) // [undefined]
Array.of(null) // [null]
Array.of(1) // [1]
对比new Array()
new Array(1,2,3) // [1, 2, 3]
new Array(undefined) // [undefined]
new Array(null) // [null]
new Array(1) // [empty × 1]
new Array(6) // [empty × 6]
说明：
Array.of()总是返回参数组成的数组，new Array() 只有一个参数并且参数为数字的时候则会返回有N项的数组，每一项为空
- copyWithin()
在数组内部将指定位置的成员复制到其他位置，会覆盖原来的成员，返回当前数组（即会改变原数组）
[1, 2, 3, 4].copyWithin(0, 2, 3) // [3, 2, 3, 4]
u=1709716023,1926310656&fm=27&gp=0.jpg
上面的表情代表我对这个结果的反应，一脸懵逼，开始疯狂搜索，结果，解释在这里
- 该方法接收三个参数
- 第一个target：从这个位置开始替换数据
- 第二个start：从该位置开始读取数据，默认为0，负数表示倒数
- 第三个end：到该位置之前停止读取数据，默认是数组的长度，负数表示倒数
- 解析上面的代码
从第0个开始替换，第2个开始到第3个结束并且为半闭半开空间即[2, 3)，所以应该对应数组里面的“3”；把第0个位置替换成3，则数组变成了[3,2,3,4]
更多尝试
[1,2, 3,4].copyWithin(0, 2) // [3, 4, 3, 4]
[1,2,3,4].copyWithin(0) // [1, 2, 3, 4]
[1,2,3,4].copyWithin(0, 2, -2) // [1, 2, 3, 4]
[1,2,3,4].copyWithin(0, 2, 2) // [1, 2, 3, 4]
[1,2,3,4].copyWithin(0, -2, -1) // [3, 2, 3, 4]
[1,2,3,4].copyWithin(0, -1, -2) // [1, 2, 3, 4]
- find()
找出数组内第一个符合条件的成员
[1, 2, 3].find((n) => {return n % 2 === 0}) // 2
[1, 2, 3, 4].find((n) => {return n % 2 === 0}) // 2
说明：find方法接受一个参数function，数组成员会依次执行，直到找到条件符合的，如果都不符合则返回undefined。
拓展
- 更多参数：
第二个参数用来绑定回调函数的this - NaN
[NaN].find((n) => {return n === NaN}) // undefined
[NaN].find((n) => {return Object.is(NaN, n)})
- findIndex()
用来返回数组第一个符合条件成员的位置，该方法接受三个参数：value当前的值；index当前的位置；array原数组
[1, 2, 3, 4].findIndex((value, index, array) => {return value % 2 === 0}) // 1
- fill()
使用给定值填充数组（原来的元素会全部被抹掉）
[1, 2, 3].fill('a') // ["a", "a", "a"]
更多参数：
- 第1个参数表示填充内容
- 第2个参数表示填充的开始位置，包含开始位置
- 第3个参数表示填充的结束位置，不包含结束位置
[1, 2, 3].fill('a', 0, 1) // ["a", 2, 3]
- entries()，keys()和values()
用来遍历数组
let arr = ['a', 'b', 'c']
for(let index of arr.keys()) {
console.log(index)
} // 0, 1, 2
for(let val of arr.values()) {
console.log(val)
} // 'a', 'b', 'c'
for(let [index, val] of arr.entries()) {
console.log(index, val)
} // 0 "a" 1 "b" 2 "c"
- includes
返回某个数组是否包含给定的值，返回一个Boolean值
[1, 2, 3].includes(3) // true
[1, 2, 3].includes('2') // false
[1, 2, NaN].includes(NaN) // true
多个参数：
- 第1个参数表示要查找的值
- 第2个参数表示搜索的开始位置，默认0，负数表示从后面，超出重置为0
想了解更多数组ES5支持的方法请点击这里