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]