手记

【金秋打卡】第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老师讲的很清晰易懂,期待后面的课程。

0人推荐
随时随地看视频
慕课网APP