php 对象字面量,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"]

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