programing

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

linuxpc 2023. 7. 30. 17:26
반응형

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

전자를 공부할 때 브라우저 윈도 객체를 얻는 두 가지 방법을 발견했습니다.

const {BrowserWindow} = require('electron')

그리고.

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

사이의 차이점은 무엇입니까?const그리고.const {}자바스크립트로?

나는 이해할 수 없습니다 왜.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 할당을 사용할 수 있습니다. 즉, 객체에 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);

마지막으로 살펴본 것처럼 기능은 동일합니다. 즉, 객체에서 속성을 가져오는 것뿐입니다.

할당을 파괴하는 방법도 있습니다. MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 에서 전체 구문을 확인할 수 있습니다.

다른 답변들도 충분히 좋습니다.파괴 중 »의 몇 가지 유용한 기능을 제안합니다.

먼저 다음 정의를 살펴보겠습니다.

파괴 할당 구문은 다음을 가능하게 하는 자바스크립트 표현식입니다.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. 연산자와 결합
> {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

언급URL : https://stackoverflow.com/questions/41058569/what-is-the-difference-between-const-and-const-in-javascript

반응형