首先,我们先介绍什么叫展开运算符,...这个就是展开运算符,这个...和rest参数的...不一样,rest参数的...是写在方法的形参前面的。
需要注意的是:展开运算符,可以展开对象的全部成员,也可以将一个对象的成员,克隆给另一个对象
接下来我们就一起通过代码实现一下:
比如我这边我先写出两个数组:let arr1 = [11,22,33];let arr2 = [44,55,66] 以前如果我们想把arr1和arr2这两个数组合并的话,需要借助数组的concat()方法:let arr3 = arr1.concat(arr2);=>let arr3 = [11,22,33,44,55,66]
如图:
得到的效果如图:
在ES6中,我们可以通过我们的展开运算符...去实现数组的合并:let arr4 = [...arr1,...arr2];通过这行代码就可以实现效果,最后的结果就是arr4=[11,22,33,44,55,66]
话不多说这就送上我们的实现的代码图:
效果图:
//在这里我们需要咋重新声明的一点是:...展开运算符是将一个数组的对象克隆给另一个数组。
同时:展开运算符,可以将多个对象的成员,合并到一个大的对象中,后面对象中的成员,如果跟前面对象中的成员同名,会覆盖前面的
let obj1 = {
a:100,
b:200
}
let obj2={
c:300,
d:400,
a:500
}
当我们 let obj3 = {...obj1,...obj2};=>{a:500,b:200,c:300,d:400}因为当我们把几个对象合并到一个大的对象当中时,后面同名的属性值会直接覆盖前面的同名的属性值,所以这里的a的值变成了obj2.a的500
效果如图:
实现的效果如图:
==========
在JavaScript中,展开运算符(spread operator)是一个非常实用的功能,它允许将一个数组或类数组对象的元素以单个元素的形式展开到另一个数组或函数调用中。展开运算符用三个点 ...
表示。
展开运算符的主要用途包括:
1合并数组:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]
2复制数组:
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray]; // [1, 2, 3]
3扩展到函数参数:
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
const result = sum(...numbers); // 6
4组合数组与新元素:
const array1 = [1, 2];
const newArray = [0, ...array1, 3]; // [0, 1, 2, 3]
5字符串展开:
const str = "hello";
const charArray = [...str]; // ["h", "e", "l", "l", "o"]
6用于对象: 对象也可以使用展开运算符来复制属性或合并多个对象:
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2 }
请注意,对于对象,展开运算符创建的是浅拷贝,这意味着如果对象包含引用类型的值(如其他对象或数组),这些值会被引用而不是被复制
// 合并两个数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2];
console.log(combinedArr); // 输出: [1, 2, 3, 4, 5, 6]
// 复制数组
const originalArr = [1, 2, 3];
const copiedArr = [...originalArr];
console.log(copiedArr); // 输出: [1, 2, 3]
// 使用展开运算符调用函数
function multiply(a, b, c) {
return a * b * c;
}
const args = [2, 3, 4];
const product = multiply(...args);
console.log(product); // 输出: 24