一文教会你如何在JavaScript中使用展开运算符

更新时间：2022年10月08日 16:11:09 作者：执宁

展开运算符(spread operator)允许一个表达式在某处展开,下面这篇文章主要给大家介绍了关于如何通过一文教会你如何在JavaScript中使用展开运算符的相关资料,需要的朋友可以参考下

前言

在本教程中，您将了解在 JavaScript 中使用扩展运算符的不同方式，以及扩展运算符和剩余运算符之间的主要区别。

由三个点 ( ...) 表示，JavaScript 扩展运算符是在 ES6 中引入的。它可用于将集合和数组中的元素扩展为单个单独的元素。

扩展运算符可用于创建和克隆数组和对象、将数组作为函数参数传递、从数组中删除重复项等等。

语法

扩展运算符只能用于可迭代对象。它必须在可迭代对象之前使用，没有任何分隔。例如：

console.log(...arr);

功能以及参数

以Math.min()方法为例。此方法接受至少一个数字作为参数，并返回传递的参数中最小的数字。

如果您有一个数字数组并且您想找到这些数字中的最小值，那么在没有展开运算符的情况下，您需要使用它们的索引一个一个地传递元素，或者使用apply()方法来传递数组作为参数。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

请注意，第一个参数是null，因为第一个参数用于更改this调用函数的值。

扩展运算符是将数组元素作为参数传递给函数的更方便和可读的解决方案。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(numbers); // 13

创建数组

扩展运算符可用于从现有数组或其他包含Symbol.iterator()方法的可迭代对象创建新数组。这些是可以使用for...of循环迭代的对象。

例如，它可用于克隆数组。如果您只是将现有数组的值分配给新数组，则对新数组进行更改将更新现有数组：

const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]

通过使用扩展运算符，可以将现有数组克隆到一个新数组中，并且对新数组所做的任何更改都不会影响现有数组：

const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]

应该注意的是，这只会克隆一维数组。它不适用于多维数组。

扩展运算符也可用于将多个数组连接为一个。例如：

const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]

您还可以在字符串上使用扩展运算符来创建一个数组，其中每个项目都是字符串中的一个字符：

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

创建对象

扩展运算符可以以不同的方式用于创建对象。

它可用于浅克隆另一个对象。例如：

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

它还可以用于将多个对象合并为一个。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

需要注意的是，如果对象共享相同的属性名称，将使用最后一个对象展开的值。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}

扩展运算符可用于从数组创建对象，其中数组中的索引成为属性，该索引处的值成为属性的值。例如：

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}

它还可以用于从字符串创建对象，其中，字符串中的索引成为属性，该索引处的字符成为属性的值。例如：

const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}

将 NodeList 转换为数组

NodeList是节点的集合，它们是文档中的元素。元素通过集合中的方法访问，例如itemor entries，与数组不同。

您可以使用扩展运算符将 NodeList 转换为 Array。例如：

const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeList[0]); // <div>...</div>

从数组中删除重复项

Set对象是一个仅存储唯一值的集合。与 NodeList 类似，可以使用扩展运算符将 Set 转换为数组。

由于 Set 仅存储唯一值，因此可以将其与扩展运算符配对以从数组中删除重复项。例如：

const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3]
console.log(uniqueArr); // [1, 2, 3]

扩展运算符与休息运算符

rest 运算符也是一个三点运算符 ( ...)，但它用于不同的目的。rest 运算符可以在函数的参数列表中使用，表示该函数接受未定义数量的参数。这些参数可以作为数组处理。

例如：

function calculateSum(...funcArgs) {
  let sum = 0;
  for (const arg of funcArgs) {
    sum += arg;
  }

  return sum;
}

在此示例中，rest 运算符用作calculateSum函数的参数。然后，您循环遍历数组中的项目并将它们相加以计算它们的总和。

然后，您可以将变量一个一个地calculateSum作为参数传递给函数，或者使用扩展运算符将数组的元素作为参数传递：

console.log(calculateSum(1, 2, 3)); // 6
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers)); // 6

结论

扩展运算符允许您用更少的代码行做更多的事情，同时保持代码的可读性。它可以用于可迭代对象以将参数传递给函数，或从其他可迭代对象创建数组和对象。

总结

到此这篇关于如何在JavaScript中使用展开运算符的文章就介绍到这了,更多相关JS使用展开运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript实现拍照功能详细示例代码
这篇文章主要给大家介绍了关于javascript实现拍照功能的相关资料, 最近做项目,遇到一个正常但又少见的需求之拍照,文中给出了详细的代码示例,需要的朋友可以参考下
2023-07-07
基于JS实现带并发限制的异步调度器
这篇文章主要为大家详细介绍了如何基于JS实现带并发限制的异步调度器，文中的示例代码讲解详细，具有一定的学习价值，需要的可以参考下
2023-05-05
ES6教程之for循环和Map,Set用法分析
这篇文章主要介绍了ES6教程之for循环和Map,Set用法,结合实例形式分析了ECMAScript6中for循环和Map,Set基本概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
2017-04-04
ES6中字符串的使用方法扩展
这篇文章主要给大家介绍了关于ES6中字符串的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
详解用webpack把我们的业务模块分开打包的方法
本篇文章主要介绍了用webpack把我们的业务模块分开打包的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
支持ie与FireFox的剪切板操作代码
支持ie与FireFox的剪切板代码，包括读取与写入剪切板的实现代码。
2009-09-09
给easyui datebox扩展一个清空的实例
下面小编就为大家带来一篇给easyui datebox扩展一个清空按钮的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
js中map()函数的使用案例详解
map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值，这篇文章主要介绍了js中map()函数的使用,需要的朋友可以参考下
2022-11-11
JS 日期验证正则附asp日期格式化函数
JS 日期验证正则 asp日期格式化函数，大家以后的日期就是能通过验证的了。
2009-09-09
js使弹层下面的body禁止滚动
这篇文章介绍了js使弹层下面body禁止滚动的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06