网站建设设计企业,wordpress问答社区主题,镇江市城市建设档案馆网站,wordpress安全标题 前言概述拓展操作符#xff08;Spread Operator#xff09;赋值与扩展操作符的区别 剩余操作符#xff08;Rest Operator#xff09; 前言 大家应该都在代码中用过或者看到…方法#xff0c;我每次用到这个方法的时候都会想到第一次见到这个方法一头雾水的样子#… 标题 前言概述拓展操作符Spread Operator赋值与扩展操作符的区别 剩余操作符Rest Operator 前言 大家应该都在代码中用过或者看到…方法我每次用到这个方法的时候都会想到第一次见到这个方法一头雾水的样子心想为什么会有这样子的写法以及方法后面也是因为在工作中需求太多没有深入去了解这个方法今天就深入的分析一下。 概述
在 ES6 中…点点点被称为扩展操作符Spread Operator或剩余操作符Rest Operator它使用三个连续的点来展开一个可迭代对象例如数组、字符串、对象等将其拆分成独立的元素。
拓展操作符Spread Operator
扩展操作符用于将一个可迭代对象如数组或类数组对象拆分为单独的元素在函数调用、数组字面量或对象字面量中使用。以下是一些使用扩展操作符的示例
数组拆分
const array [1, 2, 3];
const newArray [...array]; // 拆分为独立的元素
console.log(newArray); // 输出 [1, 2, 3]函数调用
function myFunction(a, b, c) {console.log(a, b, c);
}const args [1, 2, 3];
myFunction(...args); // 将数组元素作为独立的参数传递给函数数组合并
const array1 [1, 2, 3];
const array2 [4, 5, 6];
const mergedArray [...array1, ...array2]; // 合并两个数组
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]看到这里大家可能会想到一个点 当我定义一个array之后将array赋值给array1例如
const array [1,2,3]
array1 array
console.log(array1) //输出[1,2,3]与我下面用拓展操作符
const array [1,2,3]
array1 [...array]
console.log(array1) //输出[1,2,3]这两个方法值都是一样的那么他们是否又相等呢
赋值与扩展操作符的区别
这里我们看到他们的值的确是一样的但是在 JavaScript 中将 array1 设置为 array 或 […array ] 是有细微差别的。 这里就涉及到深拷贝与浅拷贝的内容了
array1 array 这种方式将array1 变量指向了 array数组的引用它们实际上指向了同一个数组。如果你修改 array 或 array1 中的元素另一个数组也会受到影响。这是因为它们引用的是同一个数组对象。array1 […array] 这种方式使用扩展操作符创建了一个 array数组的浅拷贝副本并将其赋值给 array1 变量。array1 指向的是一个新的数组而不是原始的 array 数组对象。修改 array1不会影响到 array。
总结一下使用 array1 array 会让 array1和 array 引用同一个数组对象而使用 array1 […array ] 则会创建一个新的数组副本给 array1二者对原始数组的修改的影响是不同的。
如果你想要创建一个数组的独立副本以便对其进行独立的操作建议使用 array1 […array ] 或其他深拷贝方法而不是将其指向同一个引用。
剩余操作符Rest Operator
剩余操作符用于将剩余的参数收集为一个数组在函数参数中使用。以下是一个使用剩余操作符的示例
function myFunction(a, b, ...rest) {console.log(a); // 第一个参数console.log(b); // 第二个参数console.log(rest); // 剩余的参数作为数组
}myFunction(1, 2, 3, 4, 5); // 输出1 2 [3, 4, 5]通过使用 ... 运算符你可以更方便地操作数组和函数参数。
