【ES6 教程】第一章 新的ES6语法07—ES6 提供了一种定义对象字面量的新方法

ES6教程2年前 (2023)发布 admin
1,740 0

在本教程中,我们将一起来了解学习 ES6 中Object(对象)字面量的语法扩展内容,这些扩展使我们的代码更简洁、更灵活。

由于其简单性,Object字面量是在 JavaScript 中创建对象的最流行的模式之一。ES6 通过在某些方面扩展语法使Object字面量更加简洁和强大。

Object 属性初始化简写

在 ES6 之前,Object字面量是name-value的集合。例如:

function createMachine(name, status) {
return {
name: name,
status: status
};
}

createMachine() 函数接受两个参数名称和状态,并返回一个具有两个属性的新对象字面量:name和status。

name 和 status 属性采用 name 和 status 参数的值。这种语法看起来是多余的,因为 name 和 status 在属性的 name 和 value 中都提到了两次。

当对象的属性与局部变量名称相同时,ES6 允许我们通过包含不带冒号和值的名称来消除重复。

例如,我们可以重写 ES6 中的 createMachine() 函数,如下所示:

function createMachine(name, status) {
return {
name,
status
};
};

在内部,当Object字面量的属性只有名称时,JavaScript 引擎会在周围范围内搜索具有相同名称的变量。如果 JavaScript 引擎可以找到一个,它会为属性分配变量的值。

在此示例中,JavaScript 引擎分配和参数的name和status属性值。namestatus

同样,您可以从局部变量构造Object字面量,如下例所示:

let name = ‘Computer’,
status = ‘On’;

let machine = {
name,
status
};

计算属性名称

在 ES6 之前,我们可以使用方括号 ([]) 来启用对象属性的计算属性名称。

方括号允许我们使用字符串文字和变量作为属性名称。

请参见以下示例:

let name = ‘machine name’;
let machine = {
[name]: ‘server’,
‘machine hours’: 10000
};

console.log(machine[name]); // server
console.log(machine[‘machine hours’]); // 10000

name 变量被初始化为“machine name”的值。由于machine对象的两个属性都包含一个空格,因此,我们只能使用方括号 ([]) 来引用它们。

在 ES6 中,计算属性名称是对象字面量语法的一部分,它使用方括号表示法。

当属性名称放在方括号内时,JavaScript 引擎会将其计算为字符串。这意味着我们可以使用表达式作为属性名称。例如:

let prefix = ‘machine’;
let machine = {
[prefix + ‘ name’]: ‘server’,
[prefix + ‘ hours’]: 10000
};

console.log(machine[‘machine name’]); // server
console.log(machine[‘machine hours’]); // 10000

machine对象的属性评估为’machine name’和’machine hours’,因此,我们可以将它们作为机器对象的属性引用。

简洁的语法表示法

在 ES6 之前,在为对象字面量定义方法时,需要指定名称和完整的函数定义,如下例所示:

let server = {
name: “Server”,
restart: function () {
console.log(“The” + this.name + ” is restarting…”);
}
};

ES6 通过删除冒号 (:) 和 function 关键字,使对象字面量方法的语法更加简洁。

下面的示例使用 ES6 语法重写了上面的”server”对象。

let server = {
name: ‘Server’,
restart() {
console.log(“The” + this.name + ” is restarting…”);
}
};:

这种速记语法也称为简洁语法。在属性名称中包含空格是有效的。例如:

let server = {
name: ‘Server’,
restart() {
console.log(“The ” + this.name + ” is restarting…”);
},
‘starting up'() {
console.log(“The ” + this.name + ” is starting up!”);
}
};

server[‘starting up’]();

在此示例中,方法“starting up”的名称中有空格。要调用该方法,请使用以下语法:

object_name[‘property name’]();

在今天的教程中,我们学习了如何在 ES6 中使用一些新的Object字面量语法扩展,包括属性初始化器简写、计算属性和简洁的方法语法。

 

英文 | https://www.javascripttutorial.net
翻译 | 杨小爱

© 版权声明

相关文章

暂无评论

暂无评论...