javascript中const和const {}之间的区别是什么？

Question

当我研究电子时,我找到了2种获取BrowserWindow对象的方法.

const {BrowserWindow} = require('electron')

和

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

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

我无法理解为什么const {}可以工作.我是否想念JS的重要内容？

Answer 1

这两段代码是等价的,但第一段是使用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);

Answer 2

const {BrowserWindow} = require('electron')

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

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

现在,如果我们想要分配或使用obj的电子邮件和标题字段,那么我们就不必编写完整的语法了

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

这是现在的老学校.

我们可以使用ES6 Destructuring赋值,即,如果我们的对象在obj对象中包含20个字段,那么我们只需要编写我们想要使用的那些字段的名称,如下所示:

const { email,title } = obj;

这是ES6语法更简单的一个 它会自动分配电子邮件和标题obj,只需要为必填字段正确说明名称.

Answer 3

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

其他答案已经足够好了。我会建议解构赋值的一些有用的功能。

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

解构赋值语法是一个 JavaScript 表达式，它使得unpack values from arrays, or properties from objects, into distinct variables.

特征：

1. 解构数组，数组中每个项目的索引充当属性（由于数组是 JavaScript 中的对象）

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

2. 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}
   

3. 默认值

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

4. 分配给新变量名称

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