JavaScript扩展运算符的学习及应用详情(ES6)_javascript技巧

前言：

扩展运算符是ES6新增的一种运算符，他可以帮助我们简化代码，简化操作，所以在开发中是非常常用的，下面我将从学习与应用两个方面来带掘友学习扩展运算符。

学习

我们先来学习一下扩展运算符的使用语法

扩展运算符使用形式为...[1,2,3]，...加上数组

其作用可以理解成与rest相反的操作，rest参数是在函数中将参数转化为数组形式传进函数内，而扩展运算符是将数组转换至以逗号相隔的参数序列。

let arr = ["a", "b"];
console.log(...arr); // a b

上面我声明了一个数组，通过扩展运算符的方式打印，得到一个参数序列，了解完语法后来主要学习扩展运算符的应用场景

应用

下面我将从函数应用，数组合并，解构赋值，字符串转换与转换数组五个方面展开扩展运算符的应用场景。

函数参数

由扩展运算符运算结果的特性，可以将其运用在函数传入参数时

function add(x, y) {
  return x + y;
}
let arr = [1, 2];
add(...arr); // 3

上面我将arr数组搭配扩展运算符传入函数，分别对应参数x与y

值得注意的是在有扩展运算符之前，我们是通过使用apply方法将数组作为参数传入函数的，它的使用方式如下，拿上面的add函数举例：

add.apply(null,arr) // 3

因为apply可以改变this指向并传入参数，借此特性可以将数组作为参数。

数组合并

在ES5中的数组合并是通过concat函数来实现的，又或者使用push来实现

let arr_1 = [1, 2, 3];
let arr_2 = [4, 5, 6];
console.log(arr_1.concat(arr_2)); // [ 1, 2, 3, 4, 5, 6 ]

而在ES6中通过扩展运算符进行直接合并，这样的做法可以很好得简洁代码，增加代码的可读性。

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

解构赋值

在一个数组中，我们想要拿到第一个元素外的所有元素，那么在ES5中我们可以这么做：

let arr = [1,2,3,4]
let node = arr[0];
let rest = arr.slice(1)
console.log(rest) // [ 2, 3, 4 ]

而在ES6中我们可以直接使用解构来分割参数

let arr = [1,2,3,4]
let [a,...b] = arr
console.log(a,b) // 1 [ 2 , 3 , 4 ]

字符串转换

可以使用使用解构赋值将字符串转换为数组

console.log([...'猪痞恶霸']) // ['猪', '痞', '恶', '霸']

还可以改造length属性，因为如果字符串内包含Unicode字符，那么直接的length会有问题，所以可以使用扩展运算符转换后拿到正确的length属性

function length(str) {
    return [...str].length
}
console.log(length("\uD83D\uDE80")) // 1
console.log("\uD83D\uDE80".length) // 2

如上代码所示，使用扩展运算符可以避免Unicode长度识别问题

转换数组

我们可以通过使用扩展运算符将伪数组转化为数组，伪数组我们可以理解为类似数组的一个集合，这里简单提一下伪数组。

我们常见的有俩种伪数组，一个是arguments还有一个是DOM的children属性，获取回来的子节点集合。伪数组与数组的区别就是它们的_proto_区别，而普通数组有很多数组的方法，比如说push，shift，map等等，而伪数组却无法使用这些方法。

这就涉及到一个痛点，大家在使用DOM的时候如果想使用数组的一些方法，那怎么办呢？我们就可以先转化为数组再去使用这些方法，下面举一个简单的操作dom例子。

const divs = document.querySelectorAll('div')
const divArr = [...divs]
console.log(divArr)