JavaScript 展开运算符

最新推荐文章于 2024-07-29 13:51:31 发布

火星飞鸟

最新推荐文章于 2024-07-29 13:51:31 发布

阅读量303

点赞数 1

分类专栏：前端基础前端整理文章标签：前端 JavaScript 展开运算符

本文链接：https://blog.csdn.net/Jack_lzx/article/details/115718633

版权

前端基础同时被 2 个专栏收录

111 篇文章 2 订阅

订阅专栏

前端整理

50 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的扩展运算符（...），包括用于数组合并、解构赋值、类数组转换、函数调用替代apply、对象合并及浅拷贝等场景。通过实例展示了其在日常开发中的实用性和注意事项，特别是浅拷贝特性可能导致的引用问题。

摘要由CSDN通过智能技术生成

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 } ]