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

Posted 桃子叔叔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了每天十分钟学好ES6--数组相关的知识,希望对你有一定的参考价值。

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可以 使用,索性这里先放上来了。

以上是关于每天十分钟学好ES6--数组的主要内容,如果未能解决你的问题,请参考以下文章

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

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

每天十分钟学好ES6---新集合Set和Map

每天十分钟学好ES6---新集合Set和Map

每天十分钟学好ES6---新集合Set和Map

每天十分钟学好ES6---新集合Set和Map