在 JavaScript 中 const 和 const {}的区别是什么

当我研究电子的时候，我发现了2种获得 BrowserWindow 对象的方法。

const {BrowserWindow} = require('electron')

还有

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

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

我不明白为什么 const {}可以工作。我错过了什么重要的关于 JS？

80566 次浏览
小开
最佳答案

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

小开

这是 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中的整个语法

小开 
const {BrowserWindow} = require('electron')

以上语法使用 ES6。如果对象定义为:

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

现在，如果我们想分配或使用 obj 的 email 和 title 字段，那么我们不必编写整个语法

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

现在这里已经过时了。

我们可以使用 ES6解构赋值，也就是说，如果我们的对象在 obj 对象中包含20个字段，那么我们只需要写下这些字段的名称，我们想这样使用:

const { email,title } = obj;

这是 ES6语法，比较简单 它会自动分配电子邮件和标题从 obj，只是名称必须正确地说明所需的领域。

小开

其他的答案已经足够了，我建议使用 解构分配的一些有用的特性

首先，让我们看看下面的定义:

解构赋值语法是一个 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
  1. 与 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}
  1. 默认值
const {a = 10, b = 20} = {a: 1};


console.log(a); // 1
console.log(b); // 20
  1. 为新变量名赋值
const {p: a, q: b} = {p: 10, q: 20};


console.log(a); // 10
console.log(b); // 20

提交答案