ES6 之 对象扩展

/ 2 min read

简洁表示

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

待续。