ES6-属性名表达式

短命女 2021-10-12 19:46 375阅读 0赞

1.直接用标识符作为属性名：

obj.fo = true

2.用表达式作为属性名：

obj['a'+'bc'] = 123
    
    //相当于
    
    obj['abc'] = 123

3.ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

let key = 'fo';
    let obj = {
        [key]: true,
        ['a'+'bc']: 123
    };

var lastT = 'last t';
    
    var a = {
      'first': 'hello',
      [lastT]: 'world'
    };
    
    a['first'] // "hello"
    a[lastT] // "world"
    a['last t'] // "world"

4.表达式用来定义方法名

let obj = {
        ['say' + 'S']() {
            return 'hello word';
        }
    };
    
    obj.sayS(); // hello word

5.注意，属性名表达式与简洁表示法，不能同时使用，会报错

// 会报错
    var fo = 'ba';
    var ba = 'abc';
    var baz = {[fo]};
    
    //正确写法：
    var fo = 'ba';
    var baz = {[fo]: 'abc'};

6.注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串**`[object Object]`**，这一点要特别小心。

const key1 = {a: 1};
    const key2 = {b: 2};
    
    const myObject = {
        [key1]: 'value1',
        [key2]: 'value2'
    };
    
    myObject // Object {[object Object]: "value2"}

面代码中，**`[key1]`**和**`[key2]`**得到的都是**`[object Object]`**，所以**`[key2]`**会把**`[key1]`**覆盖掉，而**`myObject`**最后只有一个**`[object Object]`**属性。

发表评论取消回复

表情：

评论列表（有 0 条评论，375人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6 声明与表达式

一、新的声明方式 let 用let声明变量与var的区别 1、 let声明的变量拥有块级作用域块级作用域由 \{ \} 包裹，if语句和for语句里面的\

- 日理万妓/ 2023年10月11日 12:17/ 0 赞/ 48 阅读

相关 ES6的计算属性名语法

为什么要用\[ \]去包裹变量计算属性名在JavaScript中，我们定义属性时，有两种方式：中括号\[\]或.的方式： // 方法一 obj

约定不等于承诺〃/ 2023年06月16日 12:58/ 0 赞/ 17 阅读

相关 ES6 计算属性名

语法应用 JavaScript语言定义对象的属性，有两种方法。 // 方法一 obj.foo = true; // 方法二 o

Dear 丶/ 2023年06月07日 10:45/ 0 赞/ 17 阅读

相关 ES6--Symbol属性

Symbol:ES6中添加了一种原始数据类型symbol(已有的原始数据类型： String,Number,Boolean,undefined,null,对象) Sym

系统管理员/ 2022年12月06日 05:23/ 0 赞/ 236 阅读

相关 ES6-属性名表达式

1.直接用标识符作为属性名： obj.fo = true 2.用表达式作为属性名： obj['a'+'bc'] = 123 //相当于

短命女/ 2021年10月12日 19:46/ 0 赞/ 376 阅读

相关 ES6学习－－正则表达式

//构造函数 \{ let regex=new RegExp(/xyz/i);　　//ES5第一种写法，１个参数．i表示忽略大小写 let regex2= new

骑猪看日落/ 2021年10月09日 04:02/ 0 赞/ 349 阅读

相关 JavaScript（ES6）动态变量方法名（函数名）或动态变量属性名支持表达式运算！

//ES6中的函数名也支持表达式运算！ let aa = "method"; let bb = "Test"; let P

古城微笑少年丶/ 2021年09月17日 13:20/ 0 赞/ 742 阅读

相关 ES6的解构表达式

一代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

桃扇骨/ 2021年07月25日 01:00/ 0 赞/ 375 阅读

相关 es6 Symbol属性

ES6 Symbol数据类型 1、Symbol属性对应的值是唯一的,解决命名冲突问题 2、不能参与其他数据运算，包括字符串拼接

古城微笑少年丶/ 2021年07月24日 16:42/ 0 赞/ 502 阅读

相关 ES6 属性的遍历

ES6一共有5种方法可以遍历对象的属性。、 for…in for…in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。 Object.keys(obj

我不是女神ヾ/ 2021年06月24日 16:12/ 0 赞/ 558 阅读