ES6 之 对象扩展
简洁表示
ES6允许直接写入变量和函数。
let name = 'meme'
let cat = {
name, // 等同于 name: name
hello() {
console.log('meow~');
}
}
当用于返回值时简洁的作用尤其明显
function foo() {
let x = 1,
y = 2;
return {x, y}; // ES5写法则非常多余: {x: x, y: y}
}
CommonJS 模块输出一组变量
function foo() { /* ... */ }
function bar() { /* ... */ }
module.exports = {foo, bar}
属性名表达式
ES5支持用.
和[]
访问属性,但是用字面量方式定义对象时后者不可用。ES6增加了这个支持。
let cat = {
['name']: 'meme',
['he' + 'llo']() {
console.log('meow~');
}
}
但是,属性名表达式与简洁表示法,不能同时使用。
let name = 'meme'
let cat = {
['name'] // 错误,应为 ['name']: name
}
注意,属性名表达式会先被转换成字符串。因此,如果是一个对象,转为字符串会变成[object Object]
。
取值(getter)和存值(setter)
在ES6之前,取值和存值方法是存在的,但是必须通过Object.defineProperty
使用。
下面这段代码实现了一个类似document.cookie
的取值和存值方法,取值时取出全部并且是字符串形式,存值时只修改或增加,而不是覆盖/替换。
// ES5实现
document = {
cookies: {}
};
Object.defineProperty(document, "cookie", {
set: function(str) {
str = str.split(';')[0].split('=');
var key = str[0];
var value = str[1];
document.cookies[key] = value || '';
},
get: function() {
var str = [];
for (var key in document.cookies) {
str.push(key + '=' + document.cookies[key]);
}
str = str.join('; ');
return str;
}
})
上述代码在ES6可更加简洁可读:
const document = {
set cookie(str) {
str = str.split(';')[0].split('=');
let key = str[0];
let value = str[1];
this.cookies = this.cookies || {};
this.cookies[key] = value || '';
},
get cookie() {
let str = [];
for (var key in this.cookies) {
str.push(key + '=' + this.cookies[key]);
}
str = str.join('; ');
return str;
}
}
使用和浏览器环境下类似
document.cookie = "k1=v1";
document.cookie = "k2=v2";
console.log(document.cookie);
Object.is()
严格判断两个object是否相同,可以认为是完善版的===
,区别如下:
+0 === -0 // true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
Object.assign()
待续。