web-dev-qa-db-ja.com

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

電子を勉強したとき、BrowserWindowオブジェクトを取得する2つの方法を見つけました。

const {BrowserWindow} = require('electron')

そして

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

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

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

javascriptnode.jselectron
72
Kevin00000000

2つのコードは同等ですが、最初のコードは 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);
116
VLAZ
const {BrowserWindow} = require('electron')

上記の構文はES6を使用しています。次のように定義されたオブジェクトがある場合：

const obj = {
    email: "[email protected]",
    title: "Hello world"
}

電子メールとobjのtitleフィールドを割り当てたり使用したりする場合、次のような構文全体を記述する必要はありません。

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

これは現在、古い学校です。

ES6 Destructuring assignmentを使用できます。つまり、オブジェクトにobjオブジェクトに20個のフィールドが含まれている場合は、次のように使用するフィールドの名前を記述するだけです。

const { email,title } = obj;

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

20
Gaurav Sachdeva

これは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

14
Vasil Dininski