【金秋打卡】第14天对象的展开运算符

一、课程名称：前端工程师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

五、课程心得

今天学习了对象的展开运算符，对于如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象这一知识点要加以记忆，在不同的环境下展开的结果是不同的