ECMAScript 6（15）对象的扩展（1）——简写、属性名拼接、name

不念不忘少年蓝@ 2022-06-15 03:26 153阅读 0赞

## 对象的扩展 ##

## 写在前面的话 ##

感觉博客写的有点太细了，导致我学习进度过于缓慢。

因此，建议学习者以[阮一峰博客][Link 1]为主，以本博客为补充。

我这里主要写一些示例和补充，帮助理解的更为全面

### 0、一句话总结 ###

1.  属性名，以及是属性的函数的简洁写法，写起来简单易阅读
2.  属性名可以用变量字符串拼接起来（话说以前也有吧？）
3.  函数都有name属性，但set和get也要加前缀

### 1、简洁写法（缩写） ###

#### 1.1、属性名缩写，与函数的缩写 ####

属性名的缩写

var foo = "abc";
    var test = [];
    var bar = {
        foo, test
    }
    //相当于
    var bar = {
        foo: foo,
        test: test
    }

函数缩写

var foo = {
        fun(a, b){
    
        }
    }
    //相当于
    var foo = {
        fun: function (a, b) { 
    
        }
    }

因为缩写的属性名会总理解为字符串，所以，据说不会因为关键词而报错？（但我的chrome实测用关键词class作为key也不会报错啊）

**但**，一个合格的程序员，不要去用关键词去做key，这可以避免很多本来不应该发生的bug。

#### 1.2、错误的缩写 ####

var p(){
        console.log("p")
    }

以上这种缩写就不行，函数只有在作为属性的key时才能这么写。

#### 1.3、setter和getter的简洁写法 ####

讲真的！setter和getter用简洁写法写起来超级舒服啊！用正常写法超级麻烦，见代码：

简洁写法：

//简洁写法
    var cart = {
        _wheels: 4,
    
        get wheels() {
            return this._wheels;
        },
    
        set wheels(value) {
            if (value < this._wheels) {
                throw new Error('数值太小了！');
            }
            this._wheels = value;
        }
    }

正常写法：

**友情提示：**

想把简洁写法用非正常写法来实现的，都是不可能的，我自己测试来看，以下写法都不行

//以下都不行
    var cart = {
        _wheels: 4,
        wheels: {
            get() {
                return this._wheels;
            }
        }
    }
    
    var cart = {
        _wheels: 4,
        wheels: function get() { 
            return this._wheels;
        }
    }

### 2、属性名表达式 ###

#### 2.1、可以的写法 ####

字符串变量可以作为key，并且作为key时也可以通过表达式来拼接。

let foo = {
        //字符串作为key
        ["test"] () {
            console.log("test");
        },
        //一般用于key名拼接
        ["b" + "ar"](){
            console.log("bar");
        }
    }

比较特殊的是，因为属性名是字符串，因此只要符合字符串格式的都可以作为key，但是获取该属性的值时，也只能通过字符串的形式来获取。

比较典型的就是属性名中间有空格这种情况。

#### 2.2、不可以的写法 ####

不能既用简洁写法，又用字符串变量作为key。

原因是简洁写法是将**变量名**作为变量在对象中的**属性名**；

而用字符串变量作为key的简洁写法，和简洁写法的原意相反，是用 **变量的值** 作为 **属性名**，显然是不可以的。

而且也只有属性名，没有值。

let foo = "test";
    let bar = {
        [foo]
    };
    //bar的可能
    let bar = {
        ["test"]: ?   //只有key没有值
    }

#### 2.3、不要用对象作为属性的key ####

原因是会被toString隐式转换为字符串，如示例：

···  
var foo = \{  
toString()\{  
return “test foo”  
\}  
\};  
var bar = \{  
\[foo\]: “bar”  
\}  
bar\[“test foo”\] === “bar”; //true  
···

默认情况下，隐式转换后的结果为：字符串 `"[object Object]"`