了解ES6扩展运算符，谈谈它的8种使用方法-tutorial js-php.cn

了解ES6扩展运算符，谈谈它的8种使用方法

青灯夜游

Lepaskan： 2021-07-16 09:29:47

ke hadapan

2331 orang telah melayarinya

本篇文章带大家了解一下ES6中的扩展运算符，介绍一下ES6扩展运算符的8种使用方法。

了解ES6扩展运算符，谈谈它的8种使用方法

扩展操作符 … 是ES6中引入的，将可迭代对象展开到其单独的元素中，所谓的可迭代对象就是任何能用for of循环进行遍历的对象，例如：数组、字符串、Map 、Set 、DOM节点等。

1. 拷贝数组对象

使用扩展符拷贝数组是ES6中常用的操作：

const years = [2018, 2019, 2020, 2021];
const copyYears = [...years];

console.log(copyYears); // [ 2018, 2019, 2020, 2021 ]

Salin selepas log masuk

扩展运算符拷贝数组，只有第一层是深拷贝，即对一维数组使用扩展运算符拷贝就属于深拷贝，看下面的代码：

const miniCalendar = [2021, [1, 2, 3, 4, 5, 6, 7], 1];

const copyArray = [...miniCalendar];
console.log(copyArray); // [ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]

copyArray[1][0] = 0;
copyArray[1].push(8);
copyArray[2] = 2;
console.log(copyArray); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]
console.log(miniCalendar); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]

Salin selepas log masuk

把打印的结果放在一起便于更加清楚进行对比，如下：

变量说明	结果	操作
`copyArray`	`[ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]`	复制数组 `miniCalendar`
`copyArray`	`[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]`	1. 将数组第二个元素的第一个元素重新赋值为 0 ；2. 往数组的第二个元素增加一个元素 8 ；3. 将数组第三个元素重新赋值为2
`miniCalendar`	`[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]`	从结果来看，数组的第二个元素为数组，大于1维了，里面的元素的变更将导致原变量的值随之改变

拷贝对象，代码如下：

const time = {
    year: 2021,
    month: 7,
    day: {
        value: 1,
    },
};
const copyTime = { ...time };
console.log(copyTime); // { year: 2021, month: 7, day: { value: 1 } }

Salin selepas log masuk

扩展运算符拷贝对象只会在一层进行深拷贝，从下面代码是基于上面代码：

copyTime.day.value = 2;
copyTime.month = 6;
console.log(copyTime); // { year: 2021, month: 6, day: { value: 2 } }
console.log(time); // { year: 2021, month: 7, day: { value: 2 } }

Salin selepas log masuk

从打印的结果看，扩展运算符只对对象第一层进行了深拷贝。

严格来讲，扩展运算符不执行深拷贝

2. 合并操作

先来看数组的合并，如下：

const halfMonths1 = [1, 2, 3, 4, 5, 6];
const halfMonths2 = [7, 8, 9, 10, 11, 12];

const allMonths = [...halfMonths1, ...halfMonths2];
console.log(allMonths); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

Salin selepas log masuk

合并对象，在合并对象时，如果一个键已经存在，它会被具有相同键的最后一个对象给替换。

const time1 = {
    month: 7,
    day: {
        value: 1,
    },
};
const time2 = {
    year: 2021,
    month: 8,
    day: {
        value: 10,
    },
};
const time = { ...time1, ...time2 };
console.log(time); // { month: 8, day: { value: 10 }, year: 2021 }

Salin selepas log masuk

3. 参数传递

const sum = (num1, num2) => num1 + num2;

console.log(sum(...[6, 7])); // 13
console.log(sum(...[6, 7, 8])); // 13

Salin selepas log masuk

从上面的代码看，函数定义了多少个参数，扩展运算符传入的值就是多少个。

和 math 函数一起使用，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10];
const min = Math.min(...arrayNumbers);
const max = Math.max(...arrayNumbers);
console.log(min); // 1
console.log(max); // 10

Salin selepas log masuk

4. 数组去重

与 Set 一起使用消除数组的重复项，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]

Salin selepas log masuk

5. 字符串转字符数组

String 也是一个可迭代对象，所以也可以使用扩展运算符 ... 将其转为字符数组，如下：

const title = "china";
const charts = [...title];
console.log(charts); // [ &#39;c&#39;, &#39;h&#39;, &#39;i&#39;, &#39;n&#39;, &#39;a&#39; ]

Salin selepas log masuk

进而可以简单进行字符串截取，如下：

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch

Salin selepas log masuk

6. `NodeList` 转数组

NodeList 对象是节点的集合，通常是由属性，如 Node.childNodes 和方法，如 document.querySelectorAll 返回的。

NodeList 类似于数组，但不是数组，没有 Array 的所有方法，例如find、map、filter 等，但是可以使用 forEach() 来迭代。

可以通过扩展运算符将其转为数组，如下：

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

Salin selepas log masuk

7. 解构变量

解构数组，如下：

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]

Salin selepas log masuk

解构对象，如下：

const userInfo = { name: "Crayon", province: "Guangdong", city: "Shenzhen" };
const { name, ...location } = userInfo;
console.log(name); // Crayon
console.log(location); // { province: &#39;Guangdong&#39;, city: &#39;Shenzhen&#39; }

Salin selepas log masuk

8. 打印日志

在打印可迭代对象的时候，需要打印每一项可以使用扩展符，如下：

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021

Salin selepas log masuk

总结

扩展运算符 … 让代码变得简洁，应该是ES6中比较受欢迎的操作符了。

本文转载自：https://juejin.cn/post/6979840705921286180

更多编程相关知识，请访问：编程入门！！

Atas ialah kandungan terperinci 了解ES6扩展运算符，谈谈它的8种使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

了解ES6扩展运算符，谈谈它的8种使用方法

1. 拷贝数组对象

2. 合并操作

3. 参数传递

4. 数组去重

5. 字符串转字符数组

6. NodeList 转数组

7. 解构变量

8. 打印日志

总结

6. `NodeList` 转数组