es6数组拓展

1. 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

2. 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项的数组，每一项为空

3. 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]

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)})

5. findIndex()
   用来返回数组第一个符合条件成员的位置，该方法接受三个参数：value当前的值；index当前的位置；array原数组

[1, 2, 3, 4].findIndex((value, index, array) => {return value % 2 === 0}) // 1

6. fill()
   使用给定值填充数组（原来的元素会全部被抹掉）

[1, 2, 3].fill('a') // ["a", "a", "a"]

更多参数：

• 第1个参数表示填充内容
• 第2个参数表示填充的开始位置，包含开始位置
• 第3个参数表示填充的结束位置，不包含结束位置

[1, 2, 3].fill('a', 0, 1) // ["a", 2, 3]

7. 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"

10. 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支持的方法请点击这里