ES6系列文章 对象字面量

ECMAScript6使得声明对象字面量更加简单，提供了属性简写和方法简写功能，属性名计算的新特性。

function getInfo(name, age, weight) {
    return {
        // 若是属性名和属性值同名能够利用、es6的属性简写
        name,  // 等同于 make: make
        age, // 等同于 model: model
        weight, // 等同于 value: value

        // ES6的属性名是可计算的
        ['over' + weight]: true,

        // 对象方法名简写能够省略 function 关键字
        descripte() {
            console.log(name, age, weight);
        }
    };
}

let person = getInfo('Kia', 27, 400);
console.log(person);// {name: "Kia", age: 27, weight: 400, over400: true, descripte: ƒ}

若是能够理解上述三个新特性，能够没必要往下阅读。下面的文字仅提供给还有疑问的朋友。

属性简写

在 ES5及之前的版本中，对象字面量只支持键值对集合。实际业务中，对象字面量的初始化会有必定的代码重复。

//ES5
function createPeople(name, age) {
    return {
        name: name,
        age: age
    };
}

createPeople函数用来建立一个People的对象，能够看到上面的代码的 name和age分别书写了两次，有些麻烦。在ES6中经过使用属性简写特性能够消除这种属性名称和局部变量之间的重复书写,当对象的属性和变量同名时，能够没必要再写冒号和值。

function createPeople(name, age) {
    return {
        name,
        age
    };
}

方法名简写

ES5中若为对象添加方法必须指定方法名称，并完整地定义函数来实现。

var people = {
    name: 'xixi',
    sayName: function () {
        console.log(this.name);
    }
};

ES6的语法更简洁，消除了冒号和方法名。

let people = {
    name: 'xixi',
    sayName() {
        console.log(this.name);
    }
};
people.sayName();// xixi

属性可计算

let lastName = 'last name';
let person = {
    [lastName]: 'yuan'
};
console.log(person[lastName]);// yuan

总结

对象字面量扩展的3个新特性介绍完毕，你们能够回到文章开头检查一下本身是否掌握了本小结内容。

refs

深刻理解ES6
learning-es6-enhanced-object-literals