一、课程名称：前端工程师2022版
二、课程章节：ES6语法扩展-ES6的新增方法
三、课程讲师：Alex
四、课程内容
1、Object.assign()
（1）作用：用于合并对象，从右往左合并，合并完一个再向左合并，直至合并到目标对象
（2）与展开运算符的区别：虽然使用Object.assign()的结果和使用展开运算符的结果表面上是一样的，但是具体原理不同，展开运算符是将后面的数组覆盖前面的数组，而Object.assign()是将后面的参数合并到第一个参数中，返回的就是合并后的对象，最终输出的结果是会和括号中前面一个参数相等的
（3）基本用法：可以合并多个对象
console.log(Object.assign(apple, pen));
//{color: '黑色', shape: '圆柱形', taste: '甜', use: '写字'}
console.log(apple);
//{color: '黑色', shape: '圆柱形', taste: '甜', use: '写字'}
console.log(Object.assign(apple, pen)===apple); //true
// console.log({ ...apple, ...pen });
// //{color: '黑色', shape: '圆柱形', taste: '甜', use: '写字'}
// console.log({ ...apple, ...pen }===apple);//false
如果不想对第一个参数做改变，就可以在最前面放一个空的对象，因为Object.assign()没有限制参数的数量
console.log(Object.assign({},apple, pen));
// {color: '黑色', shape: '圆柱形', taste: '甜', use: '写字'}
console.log(apple);
// {color: '红色', shape: '圆形', taste: '甜'}
（4）注意事项
Object.assign(目标对象，源对象1，源对象2....)
1）基础数据类型作为源对象（即基本数据类型不作为第一个参数），与对象的展开类似，先转换成对象，再合并，所以一般情况下，基本数据类型作为源对象展开后是没有属性的，最后会输出空数组， 唯一比较特别的是字符串，它会被转成对象，属性值就是索引值
console.log(Object.assign({}, undefined)); //{}
console.log(Object.assign({}, null)); //{}
console.log(Object.assign({}, 1)); //{}
console.log(Object.assign({}, true)); //{}
// 唯一比较特别的是字符串，它会被转成对象，属性值就是索引值
console.log(Object.assign({}, "str")); //{0: 's', 1: 't', 2: 'r'}
2）同名属性的替换：后面的属性直接覆盖前面的
const apple = {
color: ["红色", "黄色", "绿色"],
shape: "圆形",
taste: "甜",
};
const pen = {
color: ["黑色", "银色"],
shape: "圆柱形",
use: "写字",
};
console.log(Object.assign({},apple, pen));
// {color: Array(2), shape: '圆柱形', taste: '甜', use: '写字'}
（5）应用
合并默认参数与用户参数
const logUser = (userOptions) => {
const DEFAULTS = {
username: "ZhangSan",
age: 0,
sex: "male",
};
const options = Object.assign({}, DEFAULTS, userOptions);
console.log(options);
};
//什么都不传，相当于传了一个undefined，根据注意事项第一点，最后结果不会报错，而是直接输出默认参数，所以不再需要在设置函数时让userOptions={}，也就相当于const options = Object.assign({}, DEFAULTS, undefined);//DEFAULTS
logUser(); //{username: 'ZhangSan', age: 0, sex: 'male'}
logUser({}); //{username: 'ZhangSan', age: 0, sex: 'male'}
logUser({ username: "LiSi" }); //{username: 'LiSi', age: 0, sex: 'male'}
2、Object.keys()、Object.values()、Object.entries()
（1）作用：Object.keys()用于获取对象的键、Object.values()用于获取对象的值、Object.entries()用于获取对象的键和值
（2）基本用法：
const person = {
name: "Alex",
age: 18,
};
console.log(Object.keys(person)); //(2) ['name', 'age']
console.log(Object.values(person)); //(2) ['Alex', 18]
console.log(Object.entries(person)); //(2) [Array(2), Array(2)]
（3）与数组类似方法的区别
1）调用方式不同：对象时构造函数的方法，需要通过构造函数来调用，然后把对象作为参数传进去，而数组是实例的方法，实例对象就可以直接调用，而对象就没有这个方法，使用对象调用会输出undefined
2）返回值不同：对象返回的结果都是数组，数组返回的结果统一都是遍历对象Iterator
3）数组的keys()、values()、entries()等方法和Object.keys()都是ES6新增的，而Object.values()、Object.entries()是ES6之后新增的，所以它们的格式会有所不同
（4）使用for...of循环遍历对象
需要注意的是这三个方法并不能保证顺序一定是你看到的样子，这一点和for in 是一样的，如果对顺序有严格要求，那么就不要使用for...in或for...of，而是自己设置遍历顺序
for (const key of Object.keys(person)) {
console.log(key);
}
for (const value of Object.values(person)) {
console.log(value);
}
for (const entries of Object.entries(person)) {
console.log(entries);
}
for (const [key,value] of Object.entries(person)) {
console.log(key,value);
}
五、课程心得
今天学习了对象的新增方法，Object.assign()用于合并对象，Object.keys()、Object.values()、Object.entries()用于获取对象的键、值、键和值，Alex老师讲的很清晰易懂，期待后面的课程。