[javascript] 자바 스크립트에서 const와 const {}의 차이점은 무엇입니까

Program / 글쓴이

전자를 공부할 때 BrowserWindow 객체를 얻는 두 가지 방법을 찾았습니다.

const {BrowserWindow} = require('electron')

과

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

const와 const {}JavaScript 의 차이점은 무엇입니까 ?

왜 const {}캔이 작동 하는지 이해할 수 없습니다 . JS에 대해 중요한 점이 있습니까?

답변

두 코드는 동일하지만 첫 번째 코드는 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);

스 니펫 확장

답변

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하며 필수 필드에 이름 만 올바르게 지정해야합니다.

답변

이것은 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);

스 니펫 확장

결국 보셨 듯이 기능은 동일합니다. 단순히 객체에서 속성을 가져 오는 것입니다.

또한 Destructuring 할당에 더 많은 것이 있습니다-MDN에서 전체 구문을 확인할 수 있습니다 : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

답변