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

猪痞恶霸 7784 阅读 0 评论 0 点赞

学习

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

扩展运算符使用形式为...[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)

到此这篇关于JavaScript扩展运算符的学习及应用详情(ES6)的文章就介绍到这了,更多相关JS扩展运算符内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！