JavaScript展开运算符的方式有哪些

这篇文章主要讲解了“JavaScript展开运算符的方式有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript展开运算符的方式有哪些”吧！由三个点 ( ...) 表示，JavaScript 扩展运算符是在 ES6 中引入的。它可用于将集合和数组中的元素扩展为单个单独的元素。扩展运算符可用于创建和克隆数组和对象、将数组作为函数参数传递、从数组中删除重复项等等。扩展运算符只能用于可迭代对象。它必须在可迭代对象之前使用，没有任何分隔。例如：


console.log(...arr);

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


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

请注意，第一个参数是null，因为第一个参数用于更改this调用函数的值。扩展运算符是将数组元素作为参数传递给函数的更方便和可读的解决方案。例如：


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

扩展运算符可用于从现有数组或其他包含Symbol.iterator()方法的可迭代对象创建新数组。这些是可以使用for...of循环迭代的对象。例如，它可用于克隆数组。如果您只是将现有数组的值分配给新数组，则对新数组进行更改将更新现有数组：


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

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


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

应该注意的是，这只会克隆一维数组。它不适用于多维数组。扩展运算符也可用于将多个数组连接为一个。例如：


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

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


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

扩展运算符可以以不同的方式用于创建对象。它可用于浅克隆另一个对象。例如：


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

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


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

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


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

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


constnumbers=[15,13,100,20];
constobj={...numbers};
console.log(obj);//{0:15,1:13,2:100,3:20}
它还可以用于从字符串创建对象，其中，字符串中的索引成为属性，该索引处的字符成为属性的值。例如：


conststr='Hello,World!';
constobj={...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是节点的集合，它们是文档中的元素。元素通过集合中的方法访问，例如itemor entries，与数组不同。您可以使用扩展运算符将 NodeList 转换为 Array。例如：


constnodeList=document.querySelectorAll('div');
console.log(nodeList.item(0));//...
constnodeArray=[...nodeList];
console.log(nodeList[0]);//...

Set对象是一个仅存储唯一值的集合。与 NodeList 类似，可以使用扩展运算符将 Set 转换为数组。由于免费云主机域名 Set 仅存储唯一值，因此可以将其与扩展运算符配对以从数组中删除重复项。例如：


constduplicatesArr=[1,2,3,2,1,3];
constuniqueArr=[...newSet(duplicatesArr)];
console.log(duplicatesArr);//[1,2,3,2,1,3]
console.log(uniqueArr);//[1,2,3]

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


functioncalculateSum(...funcArgs){
letsum=0;
for(constargoffuncArgs){
sum+=arg;
}

returnsum;
}

在此示例中，rest 运算符用作calculateSum函数的参数。然后，您循环遍历数组中的项目并将它们相加以计算它们的总和。然后，您可以将变量一个一个地calculateSum作为参数传递给函数，或者使用扩展运算符将数组的元素作为参数传递：


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

感谢各位的阅读，以上就是“JavaScript展开运算符的方式有哪些”的内容了，经过本文的学习后，相信大家对JavaScript展开运算符的方式有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: python else语句怎么使用

这篇文章主要介绍“python else语免费云主机域名句怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“python else语句怎么使用”文章能帮助大家解决问题。常规的if…else语句我就不过多赘述了，…