TypeScript Academy · Pelajaran

Destrukturisasi Array dan Tuple

Destrukturisasi array dan tuple dengan jenis elemen yang benar.

Destrukturisasi Array dan Tuple adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Destrukturisasi Berdasarkan Posisi

Destrukturisasi larik mengikat variabel berdasarkan posisi, bukan nama. Dengan tupel, setiap posisi memiliki tipe tertentu, sehingga Anda dapat mengekstraknya secara tepat dan berurutan.

Destrukturisasi Larik Dasar

Kurung siku di sebelah kiri mengambil elemen berdasarkan urutan indeks. Untuk larik biasa, setiap pengikatan menggunakan tipe elemen larik yang sama.

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

Memberi Anotasi pada Pola Tupel

Berikan anotasi dengan menetapkan tipe tupel pada pengikatan setelah pola. Setiap posisi memiliki tipenya sendiri — di sini berupa angka lalu string.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

Tipe Mengikuti Posisi

Dalam tupel, tipe pada setiap indeks bersifat tetap. Pengikatan pertama berupa angka, sedangkan yang kedua berupa string — menukar nilainya akan menghasilkan galat tipe.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

Melewati Elemen dengan Koma

Biarkan celah dengan slot koma kosong untuk melewati posisi yang tidak Anda perlukan. Tipe elemen yang dilewati cukup diabaikan.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

Destrukturisasi dengan Sisa

Elemen sisa mengumpulkan item yang tersisa ke dalam larik. Untuk tupel, tipenya mencerminkan posisi-posisi yang tersisa.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

Tipe Sisa dari Tupel

Ketika Anda mendestrukturisasi tupel dengan sisa, TypeScript menyimpulkan variabel sisa sebagai tupel dari elemen-elemen yang tersisa dan mempertahankan tipe masing-masing.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

Menukar Variabel

Destrukturisasi larik memungkinkan trik praktis: menukar dua nilai tanpa variabel sementara. Tipe kedua nilai harus kompatibel agar pertukaran lolos pemeriksaan tipe.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

Destrukturisasi pada Nilai Kembalian Fungsi

Fungsi yang mengembalikan tupel sangat cocok dipadukan dengan destrukturisasi — pola React useState tepat seperti ini.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

Nilai Bawaan dalam Pola Larik

Berikan nilai bawaan untuk posisi yang mungkin bernilai undefined. Nilai bawaan hanya diterapkan ketika elemen tidak ada atau bernilai undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

Destrukturisasi Larik Bersarang

Anda dapat mendestrukturisasi larik di dalam larik dalam satu pernyataan. Tipe akan bersarang dengan cara yang sama, tetapi tetap perhatikan keterbacaan untuk struktur yang dalam.

const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4

Pemeriksaan Cepat

Uji pemahaman Anda tentang destrukturisasi larik dan tupel.

Ringkasan

Destrukturisasi larik mengikat berdasarkan posisi; berikan anotasi dengan tipe tupel setelah pola agar setiap indeks memiliki tipenya sendiri. Lewati elemen dengan slot koma kosong, kumpulkan sisanya dengan elemen sisa (yang tetap menjadi tupel dari posisi-posisi yang tersisa), dan berikan nilai bawaan untuk posisi yang mungkin tidak ada. Nilai kembalian tupel yang dipadukan dengan destrukturisasi mendukung pola seperti useState.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Destrukturisasi Array dan Tuple” gratis?

Ya — teks lengkap “Destrukturisasi Array dan Tuple” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Destrukturisasi Array dan Tuple”?

Destrukturisasi array dan tuple dengan jenis elemen yang benar. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Destrukturisasi Array dan Tuple” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy