javascript中const和const {}有什么区别


99

在学习电子时,我发现了两种获取BrowserWindow对象的方法。

const {BrowserWindow} = require('electron')

const electron = require('electron')
const BrowserWindow = electron.BrowserWindow

constconst {}JavaScript 和有什么不一样?

我不明白为什么const {}可以使用。我是否想念有关JS的重要信息?

Answers:


158

这两段代码是等效的,但是第一段代码使用的是ES6的解构分配要短一些。

这是一个如何工作的简单示例:

const obj = {
  name: "Fred",
  age: 42,
  id: 1
}

//simple destructuring
const { name } = obj;
console.log("name", name);

//assigning multiple variables at one time
const { age, id } = obj;
console.log("age", age);
console.log("id", id);

//using different names for the properties
const { name: personName } = obj;
console.log("personName", personName);


您的回答很有帮助。我发现Mozilla开发人员网站很难理解。谢谢。
DavidHyogo

27
const {BrowserWindow} = require('electron')

上面的语法使用ES6。如果您将对象定义为:

const obj = {
    email: "hello@gmail.com",
    title: "Hello world"
}

现在,如果我们要分配或使用obj的电子邮件和标题字段,则无需编写整个语法,例如

const email = obj.email;
const title = obj.title;

这是老学校。

我们可以使用ES6解构分配,即,如果我们的对象在obj对象中包含20个字段,那么我们只需要这样写这些字段的名称即可:

const { email,title } = obj;

这是ES6语法更简单的一种 ,它将自动从中分配电子邮件和标题obj,只是必须在必填字段中正确说明名称。


18

这是ES6中的新功能之一。花括号符号是所谓的的一部分destructuring assignment。这意味着,您不再需要获取对象本身并在单独的行上为所需的每个属性分配变量。您可以执行以下操作:

const obj = {
  prop1: 1,
  prop2: 2
}

// previously you would need to do something like this:
const firstProp = obj.prop1;
const secondProp = obj.prop2;
console.log(firstProp, secondProp);
// etc.

// however now you can do this on the same line:
const {prop1, prop2} = obj;
console.log(prop1, prop2);

正如您最终所看到的,功能是相同的-只是从对象获取属性。

解构分配还有更多内容-您可以检查MDN中的整个语法:https//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.