每天十分钟学好ES6--数组

Posted 2021-06-30 桃子叔叔

es6的数组相关部分主要包括：

1. 扩展运算符
2. 公共api
3. 数组空位的处理

其中公共api主要包括：

• Array.from
• Array.of
• copyWithin、find、findIndex、fill、entries、keys、values、inclues

我在数组这部分主要分享扩展运算符部分，公共api只需要参照官方使用方法即可很好的使用，空位的处理由于不够统一，所以建议数组使用时避免使用空位。

一、数组的扩展运算符

扩展运算符三个点…， 是rest参数的逆运算，将数组转为逗号分隔的参数序列

console.log(...[1, 2, 3]) // 1, 2, 3

上面这段代码就是扩展运算符的最基础的用法。

1.1 该运算法主要用于函数的调用

function push(array, ...items){
	array.push(...items)
}

Math.max(...[14, 3 ,77])
// 等同于：
Math.max(14, 3 ,77)

上面两个就是扩展运算符在函数调用中的实例。让我们看一下更多应用：

1.2 合并数组

// es5的方法
let more = [3, 4, 5],
	head = [1, 2]
	newArray = head.concat(...more)
//es6改写的方法运用
[...head, ...more]

通过es6改写的数组合并方法，更加的简单直观了。

1.3 与解构赋值结合生成新数组

const [first, ...rest] = [1, 2, 3, 4, 5]

// first 1
// rest [2, 3, 4, 5]

要注意的一点：

如果将扩展运算符用于数组赋值，则只能将其放在参数最后一位

二、entries、keys、values

es6提供了三个新方法：entries、keys、values，用语遍历数组，他们都返回一个遍历器对象，可用for…of循环遍历。

for (let index of ['a', 'b'].keys) {
	console.log(index)
}
// 0
// 1

for (let index of ['a', 'b'].values) {
	console.log(index)
}
// a
// b

for (let [index, val] of ['a', 'b'].values) {
	console.log(index, val)
}
// 0 a
// 1 b

本来说好不介绍公共api的，但是这三个真的很有趣，一个是想着说不定未来大家能用到，再一个就是在对象的部分也有三个名称一样的api可以 使用，索性这里先放上来了。