谷粒商城25 - 前端基础 ES6 对象优化

对象优化

  const person = {
            name: "jack",
            age : 21 ,
            language: ['java','js','css']
  }

 //获取所有的属性
 console.log(Object.keys(person));

 //获取所有的属性对应的值 
 console.log(Object.values(person));

 //获取所有的键值对  
 console.log(Object.entries(person));

结果打印如下

对象的复制

复制对象

 const target = {a :1 };
const source1 = {b:2 };
 const source2  = {c:3 };

 Object.assign(target,source1,source2);
 console.log(target);

声明对象简写

如果对象的属性名与变量名一致, 那么直接声明属性, 即可获取值

   // 对象声明简写 
   const age = 23 ;
   const name = "张三";
   //传统的写法 
  const person1 = {age :age ,name :name};

   //简写 :  如果对象的属性名与变量名一致, 那么直接声明属性, 即可获取值 
   const person2 = {age ,name } ;
   
   console.log(person2); 

箭头函数,this不能使用

  //对象的函数属性简写
    let person = {
        name : "jack",

        //以前的对象函数写法
        eat: function(food){
          console.log(this.name + "在吃"+food);
        },
        //箭头函数,this不能使用
        eat2: food => console.log(this.name + "在吃"+food)
    }

    person.eat("葡萄"); //jack在吃葡萄
    
    person.eat2("葡萄"); //jack在吃葡萄

此时打印如下, this.name 没有获取到值

 //对象的函数属性简写
    let person = {
        name : "jack",

        //以前的对象函数写法
        eat: function(food){
          console.log(this.name + "在吃"+food);
        },

        //箭头函数,this不能使用
       // eat2: food => console.log(this.name + "在吃"+food)

        //箭头函数,this不能使用. 必须使用 对象.属性
        eat3: food => console.log(person.name + "在吃"+food)
    }

    person.eat3("葡萄"); //jack在吃葡萄

扫描二维码关注公众号，回复： 11561802 查看本文章

另一种写法

 //对象的函数属性简写
    let person = {
        name : "jack",

        //以前的对象函数写法
        eat: function(food){
          console.log(this.name + "在吃"+food);
        },

        eat3(food){
            console.log(this.name + "在吃" +food );
        }
    }
    person.eat3("葡萄"); 

对象扩展运算符(…)

对象扩展运算符(…) 用于取出参数对象所有可遍历属性然后拷贝到当前对象

let p1 = {name: "Amy", age : 15}

 // 把 p1对象的所有 属性和值列出来 
 let someone = {...p1}
 console.log(someone) ;

合并对象
上面的一小节, 是传递一个对象, 合并对象, 就是传递多个对象.

   let age = {age :15 };
    let name = {name : "jack"};

    let p2 = {name : "tom"};

    p2 = {...age, ...name};

    console.log(p2);

控制台打印如下, 可以看到, 即使p2对象原本有name属性的值为tom .,但是会使用新合并对象的name属性的值jack, 即覆盖了原有的值