Destrukcja w JavaScript

Gramatyka destrukcji przypisania

Gramatyka destrukcji przypisuje atrybuty obiektu do zmiennych:

let {firstName, lastName} = person;

Może również rozpakować tablice i inne obiekty iterowalne:

let [firstName, lastName] = person;

Destrukcja obiektu

Przykład

// Utworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Desctructuring
let {firstName, lastName} = person;

Spróbuj sam

Kolejność atrybutów jest nieistotna:

Przykład

// Utworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Desctructuring
let {lastName, firstName} = person;

Spróbuj sam

Wartości domyślne obiektu

Dla właściwości mogących brakować, możemy ustawić wartości domyślne:

Przykład

// Utworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Desctructuring
let {firstName, lastName, country = "US"} = person;

Spróbuj sam

Alias atrybutów obiektu

Przykład

// Utworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Desctructuring
let {lastName: name} = person;

Spróbuj sam

Destrukcja ciągu znaków

Jednym z zastosowań destrukcji jest rozpakowanie znaków ciągu znaków.

Przykład

// Utworzenie ciągu znaków
let name = "W3Schools";
// Desctructuring
let [a1, a2, a3, a4, a5] = name;

Spróbuj sam

Destrukcja tablicy

Możemy wyodrębnić zmienne tablicy do swoich zmiennych:

Przykład

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

Spróbuj sam

Pomijanie wartości tablicy

Możemy używać dwóch lub więcej przecinków, aby pominąć wartości tablicy:

Przykład

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

Spróbuj sam

Pozycje tablicy

Możemy wyodrębnić wartości z określonych pozycji w tablicy:

Przykład

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

Spróbuj sam

Reszta atrybutów

Można używać reszty atrybutów na końcu destrukcji.

Ta składnia przechowa wszystkie pozostałe wartości w nowej tablicy:

Przykład

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

Spróbuj sam

Desctructuring Map

Przykład

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

Spróbuj sam

Zamiana zmiennych JavaScript

Można użyć destrukturyzacji przypisania do zamiany wartości dwóch zmiennych:

Przykład

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

Spróbuj sam