5. Array扩展

这里只介绍常用到的ES6数组扩展

1. 数组解绑

...运算操作符可以将数组解绑

...[1,2,3] // 1,2,3
add(...[1,2,3])// add(1,2,3)

let arr1 = [1,2,3]
let arr2 = [4,5,6]
arr1.push(...arr2) // [1,2,3,4,5,6]

...操作符的其他应用

①克隆数组

const arr1 = [1,2]
const arr2 = [...arr1]  // Array.from(arr1) / arr1.concat() / arr1.slice()也可以
arr2 // [1,2]
arr1 // [1,2] 不受影响，即arr2保存的并非arr1的指针，而是真正意义的克隆

②合并数组

const arr1 = [1,2]
const arr2 = [3,4]
const arr3 = [...arr1, ...arr2]

③同解耦结合

const[a, ...rest] = [1,2,3,4]
// 相当于
rest = [...[2,3,4]]

const[a, ...rest] = [1]
a // 1
rest // []
// 注意...rest只能放在最后一位，放在其他位置都会报错喔~

④字符串转数组

var str = 'jack',
[...str] // ['j','a','c','k']

str.split('').reverse().join('') // 'kcaj'
[...str].reverse().join('') // 'kcaj'

2. Array.find

对数组进行遍历操作传入一个函数作为回调，返回符合条件的第一个项

[1,2,3,5,6,7].filter(n=>n>4)[0] // 5

// 使用find代替filter
[1,2,3,5,6,7].find(n => n > 4) // 5

3. Array.from()

Array.from(arrayLike)用于将伪数组转换为真数组，所谓伪数组满足两个基本条件:

• 有length这个属性
• 除了length属性，其他属性都是数字索引

将伪数组转化为真数组示例如下:

// NodeList伪数组
let ps = document.querySelectorAll('p')
let pArr = Array.from(ps).filter(p => p.textContent.length > 100) 
// 筛选文本长度大于100的所有p填入数组赋值给pArr

// arguments对象
function fn() {
  var args = Array.from(arguments)
  // ...
}

只要是部署了Iteraror接口的数据结构，Array.from都能将其转为数组,如字符串、Set结构

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

对象满足伪数组条件，也可以通过Array.from转为数组

var obj ={
  "0":1,
  "1":2,
  length:2
}
console.log(Array.from(obj)) [1,2]

4. Array.fill

填充Array.fill(item, start, end)，将数组 [start,end) 范围的项替换成 item

[1, 2, 3, 4].fill(7, 1, 4) // [1,7,7,7]

5. Array.of

将一组值转换为数组

Array.of(1,2,3) // [1,2,3]