js-展开运算符

首先,我们先介绍什么叫展开运算符,...这个就是展开运算符,这个...和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

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值