【金秋打卡】第23天对象的新增方法

一、课程名称：前端工程师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老师讲的很清晰易懂，期待后面的课程。