这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战

计算属性

ES2015的标准增加了：computed-properties即计算属性，这篇文章我们就来了解一下什么是计算属性。

ES2015 中，我们不仅可以使用字面量创建对象时，也可以使用变量来创建属性名。

如何使用

变量属性名

let tag = 'name'
let obj = {
    [tag]: '也笑'
}
console.log(obj[tag]); // 也笑

我们可以如上述方式定义一个动态的属性，试想一下我们的属性名字有空格或者很长的时候，我们如果不使用计算属性，可能会这样来定义：

let obj = {
    'name test space': '也笑'
}

那么我们要如果使用他们呢，只能通过计算属性[]来引用，如下：

console.log(obj['name test space']);

表达式属性名在计算属性中，我们不仅可以用变量来定义属性名，还可以通过表达式来定义属性名。

let obj = {
    ['na' + 'me']: '也笑'
}
console.log(obj.name); // 也笑

我们可以使用字符串拼接，还可以使用其他表达式，如三元运算:

let isCN = true;
let obj = {
    [isCN ? 'cn' : 'en']: '也笑'
}
console.log(obj.cn); // 也笑

注意事项

看着计算属性感觉没多大作用，但是我们要注意一下它的使用场景，如把字符串数组变成对象：

['name:也笑', 'age:812']

转化为

{ name: '也笑', age: '812' }

转换方法如下：

const arr = ['name:也笑', 'age:812']

const user = {}
arr.forEach(e => {
    const item = e.split(':')
    user[item[0]] = item[1]
})

console.log(user); // { name: '也笑', age: '812' }

总结

其实我们在项目中已经使用到，如遍历一个对象的时候，给它增加一个动态的属性等等。这个特性感觉没什么，只是这篇文章阐述一下什么是计算属性，仅仅是提醒一下可能在用但不知道名字的同学。

如果你想了解ES的其他特性，请移步到 ES2015+碎片化学习，每天都在向前走一步，这是所有文章的目录入口。

ES2015之计算属性

计算属性

如何使用

注意事项

总结