一、课程名称：前端工程师2022版
二、课程章节：剩余参数与展开运算符
三、课程讲师：Alex
四、课程内容
对象的展开运算符
（1）对象的展开运算符基本用法
const apple = {color: "红色",shape: "球形",taste: "甜",};
const pen = { color: "红色",shape: "圆柱形",use: "写字",};
console.log({ ...pen });
// 情形1：新对象拥有全部属性，相同属性，后者覆盖前者
console.log({ ...apple, ...pen }); //后面的pen的属性会覆盖前面apple的属性
console.log({ ...pen, ...apple }); //后面的apple的属性会覆盖前面pen的属性
// 相当于
console.log({ use: "写字",color: "红色", shape: "球形",taste: "甜",
});
// 情形2：简洁表示法
console.log({ pen, apple }); //{pen: {…}, apple: {…}}
console.log({ ...pen, apple }); //{color: '红色', shape: '圆柱形', use: '写字', apple: {…}}
（2）对象的展开运算符注意事项
1）空对象的展开：如果要展开一个空对象，则没有任何效果
console.log({ ...{} }); //{}
console.log({ ...{}, a: 1 }); //{a: 1}
2）非对象的展开：如果展开的不是对象，则会自动将其转为对象，再将其罗列出来；如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象
console.log({ ...1 }); //{}
// 相当于 console.log(new Object(1)); //Number {1}，没有任何的属性
console.log({ ...undefined }); //{}
console.log({ ...null }); //{}
console.log({ ...true }); //{}
// 字符串可以展开如下形式
// 如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象
console.log({ ..."alex" }); //在对象中展开：{0: 'a', 1: 'l', 2: 'e', 3: 'x'}
console.log([..."alex"]); //在数组中展开：(4) ['a', 'l', 'e', 'x']
console.log(..."alex"); //在括号中直接展开：a l e x
// 在对象中展开数组
console.log({ ...[1, 2, 3] }); //{0: 1, 1: 2, 2: 3}
3）对象中对象属性的展开：不会展开对象中的对象属性
const apple = {feature: {taste: "甜",},};
const pen = {feature: {color: "黑色",shape: "圆柱形",},use: "写字",};
console.log({ ...apple }); //{feature: {…}}
console.log({ ...apple, ...pen }); //{feature: {…}, use: '写字'}，后面会覆盖前面
// 相当于
console.log({feature: {color: "黑色",shape: "圆柱形",},use: "写字",});
（3）对象的展开运算符应用（重点）
1）复制对象
const a = { x: 1, y: 2 };
// 不能复制的情况const b = a;
const c = { ...a };
console.log(c, c === a); //{x: 1, y: 2} false
2）用户参数和默认参数
用户参数：指用户调用方法时，实际传递的参数
默认参数：当用户传入的参数少于需要实际传的参数或没有传入参数，默认参数就会起作用，这可以让用户尽可能少的传递参数
// 方法1：使用解构赋值的方法
const logUser = ({username = "ZhangSan",age = 0,sex = "male",} = {}) => {console.log(username, age, sex); };
// 方法2：使用展开运算符
const logUser = userParam => {
const defaultParam = {username: "ZhangSan",age: 0, sex: "male",};
// 把默认的参数放在前面，这样子如果两个参数有重复属性，会以后面的参数为准
const param = { ...defaultParam, ...userParam };
//const param = {...defaultParam, ...undefined}
// console.log(param.username);
// 解构
const { username, age, sex } = { ...defaultParam, ...userParam };
console.log(username, age, sex);};
logUser(); //ZhangSan
五、课程心得
今天学习了对象的展开运算符，对于如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象这一知识点要加以记忆，在不同的环境下展开的结果是不同的