理解熟悉ES6-数组操作扩展运算符-为开发提效

这是我参与11月更文挑战的第27天，活动详情查看: 2021最后一次更文挑战

前言:

回顾前文对 JS 中的重要数据结构 WeakSet/JSON/Set 的理解/使用处理后数据进行交互, JSON 是经常打交道的用到的也比较多. 本文来记录学习一下 ES6 对处理数组数据的扩展方法

在前面系列更文中, 我们对 JavaScript 的一些知识点进行了学习, 也有通过 JS 实现经典算法作具体学习, 小总结更多阅读-list & 经典排序算法-list

（...）代表扩展运算符, 在对剩余参数进行表示时使用 rest, 那么扩展运算符可以看作是剩余参数的逆运算，将一个数组转为用逗号分隔的参数序列

在项目中扩展运算符使用比较多的就是和函数搭配结合使用了, 特别灵活:

选这个函数的 rest 代表剩余参数, 而使用...扩展运算符将其展开传参给函数

function sycs(arg1, ...rest) {
  // 该运算符将一个数组，变为参数序列
  // 函数逻辑...
}

function pushRestToArr(arr, ...items) {
  arr.push(...items)
}

对普通的数组进行展开输出, 同样也可对伪数组进行操作(比如上面的函数剩余参数/ 获取的DOM 元素的数组形式)

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

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

[...document.querySelectorAll('span')]
// [<span>, <span>, <span>]

而如果扩展运算符后面是一个空数组, 这将不产生任何效果,,

如下的代码: 将一个空数组对象给弄丢了:

;[...[], 1] // [ 1 ]

扩展运算符后面还可以跟着表达式:

let arr = [...(x > 0 ? ['a'] : []), 'b']