ES6 计算属性名快速上手

1. ES6 计算属性名

ES6 中引入了计算属性名，英文是 computed property names，它可以在对象字面量中动态计算属性名称。

我们知道添加或修改对象的属性有两种常用的方法，一种是使用 . 语法，另外还可以使用 [] 传入一个结果为字符串的表达式。

使用 . 添加或修改属性

const person = {}
person.name = '钢铁侠'
person.name = '美国队长'

使用 [] 添加或修改属性

const person = {}
person['name'] = '钢铁侠'
str = 'name'
person[str] = '美国队长'

但是在对象字面量语法中，不管属性名加不加引号，它都会被当成一个字符串，没有办法动态生成属性名。

下面的例子中，我们尝试用 name 变量设置 person 对象字面量的属性名称，结果最终的属性名称还是 'name'，而不是 '名字'。

let name = '名字'
const person = {name: '钢铁侠'
}
console.log(person)
// Object { name: "钢铁侠" }

借助 ES6 的计算属性名，就可以在对象字面量中动态生成属性名称，它的语法是在方括号内放一个表达式 [表达式]。

let name = '名字'
const person = {[name]: '钢铁侠'
}
console.log(person)
// Object { "名字": "钢铁侠" }

2. 参考资料

Computed property names
属性名表达式

3. 欢迎关注

ES6 计算属性名快速上手相关推荐

es6 作为属性名的 Symbol
作为属性名的 Symbol 由于每一个 Symbol 值都是不相等的,这意味着 Symbol 值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性.这对于一个对象由多个模块构成的情况非常有用 ...
Vue02基础语法-插值+过滤器+计算属性+计算属性
14天阅读挑战赛努力是为了不平庸~ 目录 1.模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令:指令指的是带有"v-&qu ...
Vue — 第三天（计算属性和json-server）
计算属性使用场景如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 例如:要对给定的字符串做翻转处理之后再来显示. <div id ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...
vue 计算属性和方法
计算属性:(1)与函数的区别:多次访问依赖性不变的计算属性会立即返回之前的计算结果,而调用方法将总会再次执行函数.能监听对象内部属性的变化(2)计算属性中的方法不能作为事件的回调函数(3)script ...
04-Vue:计算属性、侦听器、脚手架
1.计算属性一个变量的值,依赖另外一些数据计算而来的结果注意:计算属性也是vue数据变量,所以不能和data里变量重名,用法和data相同的语法: computed:{ "计算属性名& ...
Swift面向对象基础（中）——Swift中的存储属性和计算属性
1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型的存储属性可以不指定初始值 1 i ...
《从零开始学Swift》学习笔记（Day 32）——计算属性
原创文章,欢迎转载.转载请注明:关东升的博客计算属性本身不存储数据,而是从其他存储属性中计算得到数据. 计算属性概念: 计算属性提供了一个getter(取值访问器)来获取值,以及一个可选的sette ...
计算属性（react）
React 中默认是没有专门的计算属性,但是我们可以借助 class 自身的 get 语法,来模拟实现类似于计算属性的功能. 一.基础语法 1.设置计算属性 get 计算属性名() {return 计 ...

ES6 计算属性名快速上手

1. ES6 计算属性名

2. 参考资料

3. 欢迎关注

ES6 计算属性名快速上手相关推荐

最新文章

热门文章