Pemecahan Struktur JavaScript

Sintaks destrukturisasi asosiasi

Sintaks destrukturisasi asosiasi akan melepaskan properti objek ke variabel:

let {firstName, lastName} = person;

Ini juga dapat melepaskan array dan obyek yang dapat diiterasi lainnya:

let [firstName, lastName] = person;

Destrukturisasi objek

Contoh

// Membuat objek
const person = {
  firstName: "Bill",
  lastName: "Gates",
  usia: 50
;
// Dekstrukturisasi
let {firstName, lastName} = person;

Coba Sendiri

Urutan properti tak penting:

Contoh

// Membuat objek
const person = {
  firstName: "Bill",
  lastName: "Gates",
  usia: 50
;
// Dekstrukturisasi
let {lastName, firstName} = person;

Coba Sendiri

Nilai default objek

Untuk properti yang mungkin hilang, kami dapat menetapkan nilai default:

Contoh

// Membuat objek
const person = {
  firstName: "Bill",
  lastName: "Gates",
  usia: 50
;
// Dekstrukturisasi
let {firstName, lastName, country = "US"} = person;

Coba Sendiri

Penamaan alias properti objek

Contoh

// Membuat objek
const person = {
  firstName: "Bill",
  lastName: "Gates",
  usia: 50
;
// Dekstrukturisasi
let {lastName: nama} = person;

Coba Sendiri

Destrukturisasi string

Penggunaan salah satu destrukturisasi adalah untuk melepas karakter string.

Contoh

// Membuat string
let nama = "W3Schools";
// Dekstrukturisasi
let [a1, a2, a3, a4, a5] = nama;

Coba Sendiri

Destrukturisasi array

Kami dapat mengekstrak variabel array ke variabel yang bersendiri:

Contoh

// Membuat Array
const buah-buahan = ["Bananas", "Oranges", "Apples", "Mangos"];
// Dekstrukturisasi
let [buah1, buah2] = buah-buahan;

Coba Sendiri

Melewati nilai array

Kami dapat menggunakan dua atau lebih tanda koma untuk melewati nilai array:

Contoh

// Membuat Array
const buah-buahan = ["Bananas", "Oranges", "Apples", "Mangos"];
// Dekstrukturisasi
let [buah1,,,,buah2] = buah-buahan;

Coba Sendiri

Nilai posisi array

Kami dapat mengambil nilai dari posisi indeks khusus dalam array:

Contoh

// Membuat Array
const buah-buahan = ["Bananas", "Oranges", "Apples", "Mangos"];
// Dekstrukturisasi
let {[0]: buah1, [1]: buah2} = buah-buahan;

Coba Sendiri

Properti sisa

Dapat digunakan properti sisa di akhir sintaks destrukturisasi.

Teks ini akan menyimpan semua nilai sisanya ke dalam array baru: }}

Contoh

// Membuat Array
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Dekstrukturisasi
const [a, b, ...rest] = numbers;

Coba Sendiri

Dekstrukturisasi Map

Contoh

// Membuat Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  
]
// Dekstrukturisasi
let text = "";
for (const [key, value] of fruits) {
  text += key + " adalah " + value;
}

Coba Sendiri

Ganti Variabel JavaScript

Dapat digunakan untuk mengganti nilai dua variabel menggunakan dekstrukturisasi asosiasi:

Contoh

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

Coba Sendiri