JavaScript 展开运算符
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript 展开运算符,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1397字,纯文字阅读大概需要2分钟。
内容图文
![JavaScript 展开运算符](/upload/InfoBanner/zyjiaocheng/593/06605fc27ca64ee480e1877b223f91e7.jpg)
1. 合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]
2. 数组解构赋值
let [arr1, ...arr2] = [1, 2, 3, 4, 5];
console.log(arr1); // 1
console.log(arr2); // [ 2, 3, 4, 5 ]
3. 将类数组或可遍历对象转换为真正的数组
// 这里取到的oDivs是类数组(有length属性)
let oDivs = document.getElementsByTagName('div');
console.log(Array.isArray(oDivs)); // false
// 转化为真正的数组
oDivs = [...oDivs];
console.log(Array.isArray(oDivs)); // true
4. 替代apply()
let arr = [1, 2];
function sum(a, b) {
console.log(a + b);
}
// 下面两行结果相同
sum.apply(null, arr); // 3
sum(...arr); // 3
5. 合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }
6. 对象解构赋值
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }
7. 数组、对象浅拷贝
用扩展运算符对数组
或者对象
进行拷贝时,是浅拷贝
。只能扩展和深拷贝第一层的值,对于第二层极其以后的值,扩展运算符将不能对其进行打散扩展,也不能对其进行深拷贝,即拷贝后和拷贝前第二层中的对象
或数组
仍然引用的是同一个地址
,其中一方改变,另一方也跟着改变。
const a = [{ a: 1 }, { b: 2 }, { c: 3 }];
const b = [...a];
a[0].a = 0;
console.log(a); // [ { a: 0 }, { b: 2 }, { c: 3 } ]
console.log(b); // [ { a: 0 }, { b: 2 }, { c: 3 } ]
内容总结
以上是互联网集市为您收集整理的JavaScript 展开运算符全部内容,希望文章能够帮你解决JavaScript 展开运算符所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。