每天十分钟学好ES6--数组
Posted 桃子叔叔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了每天十分钟学好ES6--数组相关的知识,希望对你有一定的参考价值。
es6的数组相关部分主要包括:
- 扩展运算符
- 公共api
- 数组空位的处理
其中公共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可以 使用,索性这里先放上来了。
以上是关于每天十分钟学好ES6--数组的主要内容,如果未能解决你的问题,请参考以下文章