对象属性的简洁表示法 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +ES6+对象属性的简洁表示法 へ行く。
• +ES6+对象属性的简洁表示法 の差分を削除

#author("2022-05-05T12:45:45+08:00","default:Admin","Admin")
#author("2022-05-05T12:48:20+08:00","default:Admin","Admin")
[[ES6]]

#contents

ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

#codeprettify{{
var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}
//  等同于
var baz = {foo: foo};
}}

上面代码表明， ES6 允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量。下面是另一个例子。

* &color(red){属性简写}; [#s59140d7]

#codeprettify{{
function f(x, y) {
	return {x, y};
}
//  等同于
function f(x, y) {
	return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}
}}

** 属性的赋值器（ setter ）和取值器（ getter ） [#nd5ffaf5]

#codeprettify{{
var cart = {
	_wheels: 4,
	get wheels () {
		return this._wheels;
	},
	set wheels (value) {
		if (value < this._wheels) {
			throw new Error(' 数值太小了！ ');
		}
		this._wheels = value;
	}
}
}}

** 属性名表达式 [#a8463cab]

ES6之前，若属性名不合法，则需要将属性名用引号包裹，且获取该属性时，不能用‘.’，而是用Obj[‘属性名’]。

#codeprettify{{
const obj = {
	a: 1,
	$abc: 2,
	'FDASFHGFgfdsgsd$#$%^&*%$#': 3
};

obj[FDASFHGFgfdsgsd$#$%^&*%$#];
}}

ES6:可以将声明的变量用中括号[]包裹，作为属性名。也可以是表达式或模版字符串。

#codeprettify{{
const key = 'age';
const xiaoming = {
    [key]:14;          // age:14
    [`${key}123']:15;  //age123:14
};
//注：针对同一属性，属性名表达式与简洁表示法，不能同时使用，会报错

}}

* 方法简写 [#b38aca7c]
#codeprettify{{
var o = {
	method() {
		return "Hello!";
	}
};
//  等同于
var o = {
	method: function() {
		return "Hello!";
	}
};
}}

CommonJS 模块输出变量，就非常合适使用简洁写法。

#codeprettify{{
var ms = {};
function getItem (key) {
	return key in ms ? ms[key] : null;
}
function setItem (key, value) {
	ms[key] = value;
}
function clear () {
	ms = {};
}
module.exports = { getItem, setItem, clear };
//  等同于
module.exports = {
	getItem: getItem,
	setItem: setItem,
	clear: clear
};
}}

如果某个方法的值是一个 Generator 函数，前面需要加上星号。
#codeprettify{{
var obj = {
	* m(){
		yield 'hello world';
	}
};
}}

#hr();
コメント：
#comment_kcaptcha