ES6之对象的新特性及新增方法

一、对象中扩展运算符的使用

  • 复制对象

      let obj = { name: "azi", age: 27 };
      let newObj = { ...obj };
      newObj.name = "long";
      console.log(newObj, obj); //{name: 'long', age: 27},{name: 'azi', age: 27}
    
  • 设置对象默认值

      let obj2 = { ...obj, name: "along" };
      console.log(obj2); //{name: 'along', age: 27}
    
  • 合并对象

      let initObj = { height: 175 };
      let obj3 = { ...obj, ...initObj };
      console.log(obj3); //{name: 'azi', age: 27, height: 175}
    
  • 坑点

    简单类型的时候,使用扩展运算符是没问题的,但是如果扩展运算符展开对象以后,还是一个对象的话,我们复制的只是指针 !

      let objErr = {
        name: "longlong",
        like: {
          one: "basketball",
          two: "swimming",
        },
      };
      let objSucc = { ...objErr };
      objSucc.like.one = "run";
      console.log(objSucc, objErr);
    

二、属性初始化的简写

  {
    let name = "小明";
    let age = 18;
    //es5属性初始化写法
    let es5_Obj = {
      name: name,
      age: age,
      sayHello: function () {
        console.log("this is es5Obj");
      },
    };
    //es6属性初始化写法
    let es6_Obj = {
      name,
      age,
      sayHello() {
        console.log("this is es6Obj");
      },
    };
  }

三、可计算的属性名

  {
    //可计算的属性名
    let key = "name";
    let es5Obj = {};
    es5Obj[key] = "小明";
    let es6Obj = {
      [key]: "小红",
    };
    console.log(es5Obj, es6Obj); //{name: '小明'} {name: '小红'}
  }

四、新增方法

  • Object.is() 和 ===

    Object.is() 方法判断两个值是否为同一个值。

      let result = Object.is(NaN, NaN);
      console.log(result, NaN === NaN); // true, false
      console.log(Object.is([], [])); // false
    
  • Object.assign()

    Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

      const my = {
        name: "azi",
        age: 27,
        info: {
          height: 175,
          weight: 70,
        },
      };
      //复制一个对象
      let my_copy = Object.assign({}, my);
      my_copy.age = 18;
      console.log(my_copy);
    
  • Object.keys()

    遍历对象,返回对象中每一项key的数组

      const json = {
        name: "azi",
        age: 27,
        birthday: 1995,
      };
      console.log(Object.keys(json)); //['name', 'age', 'birthday']
    
  • Object.values()

    返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值

    console.log(Object.values(json)); //['azi', 27, 1995]

  • Object.entries()

    返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组

    console.log(Object.entries(json)); //[["name","azi"],["age",27],["birthday",1995]]

posted @ 2022-05-08 22:38  小阿紫  阅读(90)  评论(0)    收藏  举报