扩展运算符-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52656116/article/details/130272599

扩展运算符在数组和对象中的应用包括遍历、深拷贝、作为参数、解构赋值、转换伪数组、合并等。在数组中，它可以用于创建新数组而不改变原数组，而在对象中则用于合并对象或遍历属性。需要注意的是，扩展运算符无法复制继承自原型链的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

扩展运算符（...）
一、数组
对象

扩展运算符（…）

一、数组

1、遍历数组

var arr = [1, 2, 3, 4]
console.log(...arr); // 1,2,3,4

2、可以当做数组的参数

var numArr = ['a', ...arr, 'b']
console.log(numArr); // ['a',1,2,3,4,'b']

3、深拷贝传值 (不改变原数组)

var arrA = [...arr]
console.log(arrA); // [1,2,3,4]
arrA.unshift(0)
console.log(arrA); // [0,1,2,3,4]
console.log(arr); // [1,2,3,4]

4、可以作为函数中的参数

function fn(x, ...y) {
    console.log(x); // 1
    console.log(...y); // 2,3,4
}
fn(...arr)

5、可以和解构赋值连用

let [a, ...b] = [1, 2, 3, 4]
console.log(a); // 1
console.log(b); // [2,3,4]

6、可以将伪数组，转换成真正的数组

var str = '我们真好'
console.log(Array.of(1, 2, 3)); // [1,2,3]
console.log(Array.from(str)); // ['我','们','真','好']
console.log([...str]); // ['我','们','真','好']

7、合并数组

onst arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]

对象

1、对象的遍历

var obj = {
    name: 'name',
    age: 18,
    sex: '男'
}
console.log(obj.name = 'zs'); // zs
console.log({ ...obj, name: 'zs', age: 20 }); // {name: 'zs', age: 20, sex: '男'}

2、对象的合并

var obj_1 = {
    a: 1,
    b: 2
}
var obj_2 = {
    b: 3,
    ...obj_1,
}
console.log(obj_2); // { a: 1, b: 2 }

3、扩展运算符后面是空对象、null、undefined，没有任何效果也不会报错

//空对象
let a = {...{}, a: 1, b: 2};
console.log(a);  // {a: 1, b: 2}
// null 、 undefined
let b = {...null, ...undefined, a: 1, b: 2};
console.log(b);  // {a: 1, b: 2}

4、扩展运算符的解构赋值，不能复制继承自原型对象的属性

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
console.log(o2.a, o2.b); // 1,2
console.log(o1.a, o1.b); // 1 undefined
console.log(o3.a, o3.b); // undefined 2