JavaScriptのconstとconst {}の違いは何ですか

99

electronを調べたところ、BrowserWindowオブジェクトを取得する方法が2つありました。

const {BrowserWindow} = require('electron')

そして

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

違いは何であるconstとconst {}JavaScriptでは？

const {}が機能する理由を理解できません。JSについて何か重要なことを見逃していますか？

javascript node.js electron

— ケビン00000000
ソース

158

2つのコードは同等ですが、最初のコードは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);

スニペットを展開

— VLAZ
ソース

あなたの答えは役に立ちます。Mozilla開発者のWebサイトを理解するのは非常に難しいと思いました。ありがとう。

— DavidHyogo

27

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 Destructuring割り当てを使用できます。つまり、オブジェクトにobjオブジェクトの20個のフィールドが含まれている場合、使用するフィールドの名前を次のように記述するだけです。

const { email,title } = obj;

これはES6構文の簡単なもの です。からメールとタイトルが自動的に割り当てobjられます。必須フィールドに名前を正しく指定する必要があります。

— ガウラフ・サクデーバ
ソース

18

これはES6の新機能の1つです。中括弧表記は、いわゆるの一部です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

— ヴァシル・ディニンスキー
ソース