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()

待续。