JavaScript创建对象之字面量

​

使用对象字面量定义对象

例子：

var obj = {
    name: "Tom",
    age: 20,
    getName: function() {
        console.log(this.name)
    }
}

重点解析

在使用对象字面量语法时，属性名也可以使用字符串。

例子：

var obj = {
    "name": "Tom",
    "age": 20,
    1: "one",
    "getNum": function() {
        console.log(this["1"])
    }
}

*数值属性名会自动转换为字符串。

当需要向函数传入大量可选参数时，对象字面量是首选方式。

例子：

var obj = {
    "name": "Tom",
    "age": 20,
    "getNum": function(s1, s2) {
        console.log("My name is " + s1 + " ,age is " + s2 + " .")
    }
}
objInfo(obj)

function objInfo(obj) {
    var str1, str2;
    if (typeof(obj.name) == "string") {
        str1 = obj.name;
    }
    if (typeof(obj.age) == "number") {
        str2 = obj.age;
    }
    if (typeof(obj.getNum) == "function") {
        obj.getNum(str1, str2)
    }
}
//输出：My name is Tom ,age is 20 .

在JavaScript中可以使用点表示法或者方括号表示法来访问对象的属性，在使用方括号语法时，应该将要访问的属性以字符串的形式放在方括号中。从功能上看，这两种访问对象属性的方法没有任何区别。但是当属性名是变量或者属性名中包含会导致语法错误的字符，或者属性名使用的是关键字或保留字，必须使用方括号表示法。

例子：

var obj = {
    "my-name": "Tom",
    "my-age": 20,
    1: true
}
var a = "my-name";

console.log(obj[a])
console.log(obj["my-age"])
console.log(obj["1"])
//输出：Tom，20，true

在最后一个属性后面添加逗号，会在IE7及更早版本和Opera中导致错误。

ES6中对象字面量的扩展

对象方法的简写

ES5中如果为对象添加方法，必须通过指定名称并完整定义函数来实现。

例子：

var obj = {
    name: "Tom",
    getName: function() {
        return this.name;
    }
}
console.log(obj.getName());
//输出：Tom

而在ES6中，消除了冒号和function关键字。

例子：

const obj = {
    name: "Tom",
    getName() {
        return this.name;
    }
}
console.log(obj.getName());
//输出：Tom

我们可以在对象字面量中为属性创建取值函数（getter）和存值函数（setter），前提必须是对象方法的简写形式。

例子：

let obj = {
    _name: "Tom",
    get name() {
        return this._name;
    },
    set name(value) {
        this._name = value;
    }
}
console.log(obj.name); //输出：Tom
obj.name = "Amy";
console.log(obj.name); //输出：Amy

属性值的简写

如果在函数中使用对象字面量创建一个对象，对象的属性名与函数的命名参数同名时，可以只写属性名即可，省略参数变量名。

例子：

ES5 的写法

var obj = (function(name, age) {
    return {
        name: name,
        age: age
    }
})("Tom", 19);
console.log(obj.name);
//输出：Tom

ES6的写法

const obj = (function(name, age) {
    return {
        name,
        age
    }
})("Tom", 19);
console.log(obj.name);
//输出：Tom

在对象字面量中使用可计算属性名称

ES5中，如果属性名提前已知，我们在访问这个属性的时候，可以使用方括号通过计算访问到属性的值。

例子：

var getName = (function(name_1, name_2, name_3) {
    var obj = {
        name_1: name_1,
        name_2: name_2,
        name_3: name_3
    }
    return function(n) {
        //通过计算取得属性值
        console.log(obj["name_" + n]);
    }
})("Tom", "Amy", "Lili");

getName(1); //输出：Tom
getName(2); //输出：Amy
getName(3); //输出：Lili

ES6中进一步扩展，我们也可以在定义对象字面量的时候，使用可计算的属性名称。其语法与访问可计算属性名称相同，也是使用方括号。

例子：

const getName = ((name) => {
    const obj = {
        //定义属性
        [name + "_1"]: "Tom",
        [name + "_2"]: "Amy",
        [name + "_3"]: "Lili"
    }
    return n => {
        console.log(obj["name_" + n]);
    }
})("name");

getName(1); //输出：Tom
getName(2); //输出：Amy
getName(3); //输出：Lili

对象解构

ES5中，为了从对象中获取特定数据并赋值给变量，我们经常会进行如下的操作：

例子：

var obj = {
    name: "Tom",
    age: 19
}
var $name = obj.name,
    $age = obj.age;
console.log($name);
//输出：Tom

ES6为对象添加了解构功能，以简化获取对象中数据的过程。对象解构采用对象字面量的语法形式，即在等号左边放置一个对象字面量，去匹配等号右边的对象字面量。变量的属性没有次序，因此只要属性名相同，就能取得右侧的值，并赋值给左侧的变量。

例子：

let {
    age: $age,
    name: $name

} = {
    name: "Tom",
    age: 19
};
console.log($name);
//输出：Tom

上例中要注意：等号左侧中，真正被赋值的是变量$name和$age，而不是变量前面的属性名name和age。这里的name和age只是一种匹配模式，去匹配等号右侧的同名属性。
如果等号左侧中，变量名与属性名相同，也可以省略变量名。

例子：

let {
    name,
    age
} = {
    name: "Tom",
    age: 19
};
console.log(name);
//输出：Tom

上面的例子中，我们一直用let声明变量并马上进行解构赋值。如果我们先声明了变量，之后再解构赋值，这时候需要一对小括号包裹解构赋值的语句，将块语句转换成表达式。

例子：

let name = "Tom",
    age = 22;
let obj = {
    name: "Amy",
    age: 19
};
({
    name,
    age
} = obj);
console.log(name);
//输出：Amy

使用对象解构进行赋值时，如果左侧的变量名对应的属性名称在右侧的对象中不存在，这个变量会被赋值为undefined。

例子：

let {
    name,
    age,
    job
} = {
    name: "Tom",
    age: 19
};
console.log(job);
//输出：undefined

为了防止指定的属性不存在，我们可以为变量设置默认值。只有当该属性在右侧对象中不存在时或右侧属性值为undefined时，默认值才会生效。

例子1：

const {
    name,
    age,
    job = "worker"
} = {
    name: "Tom",
    age: 19
};
console.log(job);
//输出：worker

例子2：

const {
    name,
    age,
    job: $job = "worker"
} = {
    name: "Tom",
    age: 19,
    job: undefined
};
console.log($job);
//输出：worker

嵌套解构赋值

例子：

let obj = {
    name: "Tom",
    age: 19,
    job: {
        worker: ["php", "java", "asp"]
    }
};
let {
    name,
    age,
    job: {
        worker
    }
} = obj;
console.log(worker[0]);
//输出：php

上例中，job是匹配模式，代表着在对象中检索的位置。如果job也要作为变量进行赋值，可以写成下面这样：

例子：

let obj = {
    name: "Tom",
    age: 19,
    job: {
        worker: ["php", "java", "asp"]
    }
};
let {
    name,
    age,
    job,
    job: {
        worker
    }
} = obj;
console.log(worker[0]); //输出：php
console.log(job); //输出：worker:["php", "java", "asp"]

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。