JavaScriptin rakentaminen

Rakentamisen asetuslause

Rakentamisen asetuslause purkaa objektin ominaisuudet muuttujiin:

let {firstName, lastName} = person;

Se voi myös purkaa taulukot ja muut iteroidut objektit:

let [firstName, lastName] = person;

Objektin rakentaminen

Esimerkki

// Luo objekti
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destructuring
let {firstName, lastName} = person;

Kokeile itse

Ominaisuuksien järjestys ei ole merkityksellinen:

Esimerkki

// Luo objekti
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destructuring
let {lastName, firstName} = person;

Kokeile itse

Huomioitavaa:

Rakentaminen ei ole tuhoava.

Rakentaminen ei muuta alkuperäistä objektia.

Objektin oletusarvo

Mahdollisesti puuttuville ominaisuuksille voimme asettaa oletusarvon:

Esimerkki

// Luo objekti
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destructuring
let {firstName, lastName, country = "US"} = person;

Kokeile itse

Objektin ominaisuuden nimi

Esimerkki

// Luo objekti
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destructuring
let {lastName: name} = person;

Kokeile itse

Merkkijonon rakentaminen

Rakentaminen voidaan käyttää merkkijonon merkkien purkamiseen.

Esimerkki

// Luo merkkijono
let name = "W3Schools";
// Destructuring
let [a1, a2, a3, a4, a5] = name;

Kokeile itse

Huomioitavaa:

Rakentaminen voidaan käyttää mihin tahansa iteroitavaan objektiin.

Taulukon erottaminen

Voimme erottaa taulukon muuttujat omiin muuttujiinsa:

Esimerkki

// Create an array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destructuring
let [fruit1, fruit2] = fruits;

Kokeile itse

Ohittaa taulukon arvo

Voimme käyttää kahdella tai useammalla pilkulla ohittaa taulukon arvon:

Esimerkki

// Create an array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destructuring
let [fruit1,,,fruit2] = fruits;

Kokeile itse

Taulukon indeksin arvo

Voimme poimia arvoja tietystä taulukon indeksistä:

Esimerkki

// Create an array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destructuring
let {[0]: fruit1, [1]: fruit2} = fruits;

Kokeile itse

Jäljellä olevat ominaisuudet

Voimme käyttää jäljellä olevia ominaisuuksia rakennuskielen lopussa.

Tämä syntaksi tallentaa kaikki jäljelle jäävät arvot uuteen taulukkoon:

Esimerkki

// Create an array
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Destructuring
const [a, b, ...rest] = numbers;

Kokeile itse

Destructure Map

Esimerkki

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
});
// Destructuring
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}

Kokeile itse

Vaihda JavaScript-muuttujia

Voit käyttää destructuring-annetta vaihtaa kahden muuttujan arvoja:

Esimerkki

let firstName = "Bill";
let lastName = "Gates";
// Destructuring
[firstName, lastName] = [lastName, firstName];

Kokeile itse