JavaScript 中的 const 和 const {} 有什么区别

Question

在学习electron的过程中，我发现了两种获取BrowserWindow对象的方法。

const {BrowserWindow} = require('electron')

和

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

JavaScript中的const和const {}有什么区别？

我不明白为什么 const {} 可以工作。我是否遗漏了关于 JS 的任何重要信息？

Answer 1

这两段代码是等价的，但第一段使用 ES6 destructuring assignment 更短。

这是一个简单的例子来说明它是如何工作的：

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);

Answer 2

这是 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

Answer 3

const {BrowserWindow} = require('electron')

以上语法使用ES6。如果您将 object 定义为：

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

现在，如果我们想要分配或使用 obj 的电子邮件和标题字段，那么我们不必像

那样编写整个语法

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

这是老派了。

我们可以使用 ES6 解构 分配，即如果我们的 object 在 obj object 中包含 20 个字段，那么我们只需要写下这些字段的名称我们想这样使用：

const { email,title } = obj;

这是ES6syntax-simpler一个 它会自动分配来自 obj 的电子邮件和标题，只需在必填字段中正确填写姓名即可。

Answer 4

其他答案已经足够好了。我会建议 Destructuring assignment

的一些有用的功能

首先，我们看下面的定义：

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

特点：

解构一个数组，数组中每一项的索引作为属性（由于数组是JavaScript[=42=中的一个对象])

> const {0: first, 1: second} = [10, 20] console.log(first); // 10 console.log(second); // 20

结合Spread ...运算符

> {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} console.log(a); // 10 console.log(b); // 20 console.log(rest ); // {c: 30, d: 40}

默认值

const {a = 10, b = 20} = {a: 1}; console.log(a); // 1 console.log(b); // 20

正在分配给新的变量名

const {p: a, q: b} = {p: 10, q: 20}; console.log(a); // 10 console.log(b); // 20

JavaScript 中的 const 和 const {} 有什么区别

What is the difference between const and const {} in JavaScript

javascript

destructuring

node.js

electron