Pemecahan Struktur JavaScript

Sintaks dekonstruksi asosiasi

Sintaks dekonstruksi asosiasi akan melepas properti objek ke variabel:

let {firstName, lastName} = person;

Ini juga dapat melepas array dan setiap objek yang dapat diiterasi lainnya:

let [firstName, lastName] = person;

Dekonstruksi objek

实例

// Membuat objek
const person = {
  firstName: "Bill",
  lastName: "Gates",
  umur: 50
;
// 解构
let {firstName, lastName} = person;

亲自试一试

Urutan properti tak penting:

实例

// Membuat objek
const person = {
  firstName: "Bill",
  lastName: "Gates",
  umur: 50
;
// 解构
let {lastName, firstName} = person;

亲自试一试

Nilai default objek

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

实例

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

亲自试一试

Alias properti objek

实例

// Membuat objek
const person = {
  firstName: "Bill",
  lastName: "Gates",
  umur: 50
;
// 解构
let {lastName: nama} = person;

亲自试一试

Dekonstruksi string

Penggunaan dekonstruksi adalah untuk melepas karakter string.

实例

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

亲自试一试

Dekonstruksi array

Kami dapat mengekstrak variabel array ke variabel yang sendiri:

实例

// 创建一个数组
const buah = ["Bananas", "Oranges", "Apples", "Mangos"];
// 解构
let [buah1, buah2] = buah;

亲自试一试

Melompati nilai array

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

实例

// 创建一个数组
const buah = ["Bananas", "Oranges", "Apples", "Mangos"];
// 解构
let [buah1,,,buah2] = buah;

亲自试一试

Nilai posisi array

Kami dapat mengambil nilai dari posisi indeks tertentu dalam array:

实例

// 创建一个数组
const buah = ["Bananas", "Oranges", "Apples", "Mangos"];
// 解构
let {[0]: buah1, [1]: buah2} = buah;

亲自试一试

Properti kelebihan

Boleh menggunakan properti kelebihan di akhir sintaks dekonstruksi.

此语法会将所有剩余值存储到一个新数组中：

实例

// 创建一个数组
const numbers = [10, 20, 30, 40, 50, 60, 70];
// 解构
const [a, b, ...rest] = numbers;

亲自试一试

解构 Map

实例

// 创建一个 Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
});
// 解构
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}

亲自试一试

交换 JavaScript 变量

可以使用解构赋值交换两个变量的值：

实例

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

亲自试一试