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()也可以
arr2[0] = 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].reverse().join('') // 'kcaj'

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

Array.from还可以传入回调函数作为第二个参数，会对每个项进行map遍历操作Array.from(arrayLike, item => item + 1)，示例如下：

/** 
 *
 * <span>1</span>
 * <span>2</span>
 * <span>3</span>
 */
let spans = document.querySelectorAll('span')

// map()
let names1 = Array.prototype.map.call(spans, s => s)
// [<span>1</span>,<span>2</span>,<span>3</span>]

// Array.from()
let names2 = Array.from(spans, s => s.textContent)
// ['1','2','3']

3.Array.of

将一组值转换为数组

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

4.Array.find

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

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

5.Array.fill

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

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