• 售前

  • 售后

热门帖子
入门百科

JavaScript中睁开运算符及应用的实例代码

[复制链接]
两个小胖猪遗 显示全部楼层 发表于 2021-10-25 19:20:41 |阅读模式 打印 上一主题 下一主题
展开运算符(spread operator)答应一个表达式在某处睁开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以利用。
  1. let obj1 = {
  2. value1: 1,
  3. value2: 2
  4. };
  5. let obj2 = {...obj1
  6. };
  7. console.log(obj2); // {value1: 1, value2: 2}
复制代码
上面的用法实际相当于
  1. obj2 = {value1: 1, value2: 2}
复制代码
展开运算符的写法与
  1. obj2 = obj1
复制代码
直接赋值的写法的区别在于如果直接赋值的话,对于
  1. 引用类型
复制代码
来说,相当于只是赋值了
  1. obj1
复制代码
的内存空间地址,当
  1. obj2
复制代码
发生改变的时间,
  1. obj1
复制代码
也会随着发生改变。而是用
  1. 展开运算符
复制代码
写法的话,由于
  1. obj1
复制代码
对象中的属性范例都是
  1. 基本类型
复制代码
,相当于重新创建了一个对象,此时
  1. obj2
复制代码
发生改变的时间,并不会影响
  1. obj1
复制代码
这个对象。但是仅限于其属性都为基本类型的环境(或者说只举行了一层的深拷贝)。如果该对象中的属性另有引用类型的话,修改属性中引用类型的值,则两个对象的属性值都会被修改。
  1. let obj1 = {
  2. attri1: [3, 6, 0],
  3. attri2: 4,
  4. attri4: 5
  5. };
  6. let obj2 = {...obj1
  7. };
  8. obj2.attri2 = 888;
  9. obj2.attri1[0] = 7;
  10. console.log('obj1:', obj1);
  11. console.log('obj2:', obj2);
复制代码
展开运算符的应用

1.在函数中利用展开运算符
  1. function test(a, b, c){};
  2. let arr = [1, 2, 3];
  3. test(...arr);
复制代码
2.数组字面量中利用展开运算符
  1. let arr1 = [1, 2];
  2. let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
  3. // 使用push方法
  4. let arr1 = [1, 2];
  5. let arr2 = [3. 4];
  6. arr1.push(...arr2); // [1, 2, 3, 4]
复制代码
3.用于解构赋值,解构赋值中展开运算符只能用在末了,否则会报错。
  1. // 解构赋值中展开运算符只能用在末了。let [a, b, ...c] = [1, ,2, 3, 4]console.log(a, b, c) // 1, 2, [3, 4]
复制代码
4.类数组酿成数组
  1. let oLis = document.getElementsByTagName("li");
  2. let liArr = [...oLis];
复制代码
5.对象中利用展开运算符
ES7中的对象展开运算符符可以让我们更快捷地操纵对象:
  1. let {x,y,...z}={x:1,y:2,a:3,b:4};
  2. x; // 1
  3. y; // 2
  4. z; // {a:3,b:4}
复制代码
将一个对象插入别的一个对象当中:
  1. let z={a:3,b:4};
  2. let n={x:1,y:2,...z};
  3. console.log(n); //{x:1,y:2,a:3,b:4}
复制代码
归并两个对象:
  1. let a={x:1,y:2};
  2. let b={z:3};
  3. let ab={...a,...b};
  4. console.log(ab); // {x:1,y:2,z:3}
复制代码
到此这篇关于JavaScript中展开运算符及应用的实例代码的文章就先容到这了,更多相干js展开运算符内容请搜刮草根技术分享从前的文章或继续浏览下面的相干文章盼望各人以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作