javascript'te const ve const {} arasındaki fark nedir


105

Elektron üzerinde çalışırken, BrowserWindow nesnesini almanın 2 yolunu buldum.

const {BrowserWindow} = require('electron')

ve

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

JavaScript arasındaki constve const {}içindeki fark nedir ?

Neden const {}çalıştığını anlayamıyorum . JS ile ilgili önemli bir şeyi özlüyor muyum?

Yanıtlar:


168

İki kod parçası eşdeğerdir ancak birincisi, daha kısa olması için ES6 imha atamasını kullanıyor .

İşte nasıl çalıştığına dair hızlı bir örnek:

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);


Cevabınız faydalıdır. Mozilla geliştirici web sitesini anlamakta çok zorlandım. Teşekkürler.
DavidHyogo

32
const {BrowserWindow} = require('electron')

Yukarıdaki sözdizimi ES6 kullanır. Şu şekilde tanımlanan bir nesneniz varsa:

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

Şimdi e-postayı ve obj'in başlık alanını atamak veya kullanmak istiyorsak, tüm sözdizimini şöyle yazmak zorunda değiliz:

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

Bu artık eski okul.

ES6 Destructuring atamasını kullanabiliriz , yani nesnemiz obj nesnesinde 20 alan içeriyorsa, o zaman kullanmak istediğimiz alanların adlarını şu şekilde yazmamız gerekir:

const { email,title } = obj;

Bu ES6 sözdiziminden daha basittir. Otomatik olarak e-posta ve başlık atar obj, sadece adın gerekli alan için doğru şekilde belirtilmesi gerekir.


18

Bu, ES6'daki yeni özelliklerden biridir. Küme parantezi gösterimi, sözde bir parçasıdır destructuring assignment. Bunun anlamı, artık nesnenin kendisini almanız ve istediğiniz her özellik için ayrı satırlarda değişkenler atamanız gerekmediğidir. Şunun gibi bir şey yapabilirsiniz:

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);

Sonuçta gördüğünüz gibi, işlevsellik aynıdır - basitçe bir nesneden bir özellik almak.

Atamayı yok etmek için daha fazlası da var - tüm sözdizimini MDN'de kontrol edebilirsiniz: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.