对象的简写改进

简写改进

• 属性简写

　　　　ES6让对象字面量中属性初始值实现简写，在一定程度降低了代码量

　首先写一下 ES5的写法

function f(name,age){
    return{
        name:name,
        age:age
    }
}    
console.log(f("li",18));

 　　显然return里面的左右两边（属性和参数值）是完全一样的，这个时候ES6就可以实现它的一个简写

　　　　　　  

　　输出的值都是正确的：　　  

 

•  方法简写

　　　　ES6提供了对象字面量中方法的简写模式，也是降低了一定代码量

let obj={
    //ES5
    f:function(){
    　　return "es5";
    }     
}

　简写版：

// ES6
f(){
    return "es6";
}

 

• 属性名称的拼接

　　　　ES6允许对象字面量中，使用表达式进行属性名称的拼接操作。

let obj={
    ["user"+"Name"]:"li",
}

　且在输出时有两种方式： 属性:    console.log(obj["userName"]);  

　　　　　　　　　　　　 数组:    console.log(obj.userName);   

 不过属性方式只有在属性名为单个词时才能使用，如果有空格隔断，该方法时不可用的：

　　　　　（只能用数组方式，且空格要相对应）

 

属性名也可用字符串类型：

let obj={
    "user Gender":"男"
}
console.log(obj["user Gender"]); //男

 

• 可计算（动态）属性名称

　　　　ES6提供在对象字面量中使用动态属性名称

　　通过变量，动态更改obj属性名

let name0="name";
    let obj={
        name:"li"
}
console.log(obj[name0]);  //li    

 　　　　变量名=对象的属性名，使用：　obj[变量名]    ，获取到变量值相对应的obj属性的值。

　　　　 缺点：变量值和obj属性是对应的，一旦变量值改变，就获取不到了，obj[变量名]就会失效。

 

　　

        使用  [变量名]  ，可计算属性名，实现真正的动态计算

let name="name";　　//"name123"
let obj={
    [name]:"li"
}
console.log(obj);

　　　　将变量值赋给属性名，通过更改变量值就可以随之更改属性名，实现动态计算。

　　　===>     

 

• 对象字面量的方法，也可使用拼接名称

let obj={
    ['f'+"1"](){
        return "f1";
    }
}
console.log(obj.f1());    //f1