ECMAScript6: 对象字面量语法扩展

来自CloudWiki
跳转至: 导航搜索

在ES6中,对象字面量变得更加强大。

属性初始值的简写

/*function createCar(color, doors){
	return {
		color : color,
		doors : doors
	}
}*/

/*let name = "zhangsan";
let age = 18;

var person = {name: name, age : age};
console.log(person);*/

在ES6中,可以简化这种属性名称与本地变量之间的重复书写:

function createCar(color, doors){
	return {
	  // 有同名的参数,只写属性名即可
		color,
		doors
	}
}
let car = createCar("red", 4);
console.log(car);

let name = "zhangsan";
let age = 18;
// 有同名的本地变量,只写属性名即可
var person = {name, age};
console.log(person);


对象方法的简写语法

/* var car = { color: "red", doors: 4, showColor: function(){ console.log(this.color); } } */

在ES6中定义对象方法时可以省略冒号和function关键字。


var car = {
	color: "red",
	doors: 4,
	showColor(){
		console.log(this.color);
	}
}
car.showColor();
console.log(car.showColor.name);

可计算的属性名

在ES6中,可以在对象字面量中使用可计算的属性名称:

/*let suffix = "name";
let person = {};
person["first name"] = "san";      // 属性名中有空格
person["last " + suffix] = "zhang";  // 属性名由表达式计算得到
person.age = 20;                   // 常规的属性可以直接通过点号访问
console.log(person);               // { 'first name': 'san', 'last name': 'zhang', age: 20 }
*/

let suffix = "name";
let person = {
	["first " + suffix] : "san",
	["last " + suffix]: "zhang",
	age: 20
}
console.log(person); // { 'first name': 'san', 'last name': 'zhang', age: 20 }