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

╰半夏微凉° 2023-03-02 10:24 26阅读 0赞

### 文章目录 ###

*   *   *  对象优化
         *  对象的复制
         *  声明对象简写
         *  对象扩展运算符(...)

### 对象优化 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

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));

结果打印如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]

### 对象的复制 ###

复制对象

const target = { a :1 };
    const source1 = { b:2 };
     const source2  = { c:3 };
    
     Object.assign(target,source1,source2);
     console.log(target);

![20200728212009617.png][]

### 声明对象简写 ###

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]

箭头函数,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 没有获取到值  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]

//对象的函数属性简写
        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在吃葡萄

![2020072821474121.png][]

另一种写法

//对象的函数属性简写
        let person = { 
            name : "jack",
    
            //以前的对象函数写法
            eat: function(food){ 
              console.log(this.name + "在吃"+food);
            },
    
            eat3(food){ 
                console.log(this.name + "在吃" +food );
            }
        }
        person.eat3("葡萄");

![20200728215138526.png][]

### 对象扩展运算符(…) ###

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

let p1 = { name: "Amy", age : 15}
    
     // 把 p1对象的所有 属性和值列出来 
     let someone = { ...p1}
     console.log(someone) ;

![20200728220146407.png][]

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

let age = { age :15 };
        let name = { name : "jack"};
    
        let p2 = { name : "tom"};
    
        p2 = { ...age, ...name};
    
        console.log(p2);

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/ff44f8d9f92440489013e502e90d2fb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/8a9db839efed41f392b3be5ae813a2b8.png
[20200728212009617.png]: /images/20230208/5cb99c4316f94dc3832cd616e4521220.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/1e333e245ea349948ebfc7ac87ea6888.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20230208/ed22277f42bc4600ac865565703e3365.png
[2020072821474121.png]: /images/20230208/29cb821e76d74f2787be25c543aed89c.png
[20200728215138526.png]: /images/20230208/7c459f41d75146ba9254feb9119a1735.png
[20200728220146407.png]: /images/20230208/7bf491ca1f1341288160d8c9ab362709.png
[20200728220849355.png]: /images/20230208/aeec2b65b877449eaea7454ba8e409c6.png