ES6的对象扩展对算符

yngcy2023-08-252023-08-27

1、基本介绍

扩展运算符：...

它是 ES6 的语法，用于将取出参数对象，然后拷贝到当前对象中。

let o = {
    name: 'youngcy',
    age: 21
};

console.log(o);     	// { name: 'youngcy', age: 21 }
console.log({...o});	// { name: 'youngcy', age: 21 }

2、使用技巧

2.1、对象合并

语法：mergeObject = {...o1, ...o2, ...o3, ...o4}

let o1 = {
    name: 'youngcy',
    age: 21
};
let o2 = {
    gender: '男'
}
let o3 = {
    gender: '女',
    age: 35
}

console.log({...o1, ...o2});		    // { name: 'youngcy', age: 21, gender: '男' }
console.log({...o1, ...o2, ...o3});     // { name: 'youngcy', age: 35, gender: '女' }
console.log({...o2, ...o3});		    // { gender: '女', age: 35 }

从上面也可以看出，如果合并的对象有相同的键名，那么后面对象的键值会覆盖之前对象的键值。

2.2、对象拷贝

语法：newObject = {...Object}

let o1 = {
    name: 'youngcy',
    age: 21
}；

let o2 = o1;
let o3 = {...o1};

console.log(o2, o1 === o2);     // { name: 'youngcy', age: 21 } true
console.log(o3, o1 === o3);     // { name: 'youngcy', age: 21 } false

需要注意的是，扩展运算符不执行深拷贝。

let o1 = {
    name: 'youngcy',
    age: 21,
    hobby: [
    	'羽毛球',
    	'打音游'
    ]
};

let o2 = {...o1};
o2.age = 35;
o2.hobby.push('敲代码');
console.log(o1);	// { name: 'youngcy', age: 21, hobby: [ '羽毛球', '打音游', '敲代码' ] }
console.log(o2);	// { name: 'youngcy', age: 35, hobby: [ '羽毛球', '打音游', '敲代码' ] }

2.3、解构变量

语法：{ arg1, ...others } = oldObject

let o1 = {
    name: 'youngcy',
    age: 21,
    gender: '男'
}

let { name, ...others } = o1;
console.log(name);      // youngcy
console.log(others);    // { age: 21, gender: '男' }

2.4、传递参数

上面的解构同样可以用来解构数组，因此可以用来传递参数。

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10];
const min = Math.min(...arrayNumbers);
const max = Math.max(...arrayNumbers);
console.log(min);	// 1
console.log(max);	// 10