TypeScript Academy · Pelajaran

Nyahstruktur Tatasusunan dan Tuple

Nyahstruktur tatasusunan dan tuple dengan jenis elemen yang betul.

Pelajaran 2 daripada 413 langkah

Nyahstruktur Tatasusunan dan Tuple ialah pelajaran TypeScript Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran TypeScript Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.

Nyahstruktur Mengikut Kedudukan

Nyahstruktur tatasusunan mengikat pemboleh ubah mengikut kedudukan, bukannya nama. Dengan tupel, setiap kedudukan membawa jenis tertentu, lalu membolehkan pengekstrakan yang tepat dan tersusun.

Nyahstruktur Tatasusunan Asas

Kurungan siku di sebelah kiri mengeluarkan elemen mengikut susunan indeks. Bagi tatasusunan biasa, setiap pengikatan berkongsi jenis elemen tatasusunan.

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

Menganotasi Corak Tupel

Buat anotasi dengan memberikan pengikatan jenis tupel selepas corak. Setiap kedudukan mendapat jenis tersendiri — di sini, nombor kemudian rentetan.

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

Jenis Mengikut Kedudukan

Dalam tupel, jenis pada setiap indeks adalah tetap. Pengikatan pertama ialah nombor dan yang kedua ialah rentetan — menukar nilai tersebut akan menghasilkan ralat jenis.

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

Melangkau Elemen Dengan Koma

Biarkan ruang dengan slot koma kosong untuk melangkau kedudukan yang tidak diperlukan. Jenis elemen yang dilangkau hanya diabaikan.

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

Nyahstruktur Dengan Baki

Elemen baki mengumpulkan item yang tinggal ke dalam tatasusunan. Bagi tupel, jenisnya mencerminkan kedudukan yang berbaki.

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

Jenis Baki daripada Tupel

Apabila anda menyahstruktur tupel dengan elemen baki, TypeScript membuat inferens bahawa pemboleh ubah baki ialah tupel bagi elemen yang tinggal, sambil mengekalkan jenisnya.

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

Menukar Pemboleh Ubah

Ini ialah helah menarik yang dibolehkan oleh nyahstruktur tatasusunan: menukar dua nilai tanpa pemboleh ubah sementara. Jenis mestilah serasi supaya pertukaran itu lulus semakan jenis.

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

Nyahstruktur dalam Nilai Pulangan Fungsi

Fungsi yang memulangkan tupel sangat sesuai digabungkan dengan nyahstruktur — corak React useState memang begini.

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

Nilai Lalai dalam Corak Tatasusunan

Berikan nilai lalai untuk kedudukan yang mungkin undefined. Nilai lalai hanya digunakan apabila elemen tiada atau undefined.

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

Nyahstruktur Tatasusunan Bersarang

Anda boleh menyahstruktur tatasusunan di dalam tatasusunan dalam satu pernyataan. Jenisnya turut bersarang, tetapi pertimbangkan kebolehbacaan bagi struktur yang mendalam.

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

Semakan Pantas

Uji pemahaman anda tentang nyahstruktur tatasusunan dan tupel.

Jawab dalam pelajaran interaktif

Imbas Kembali

Nyahstruktur tatasusunan mengikat mengikut kedudukan; buat anotasi dengan jenis tupel selepas corak supaya setiap indeks mendapat jenis tersendiri. Langkau elemen dengan slot koma kosong, kumpulkan baki dengan elemen baki yang kekal sebagai tupel bagi kedudukan yang tinggal, dan berikan nilai lalai untuk kedudukan yang mungkin tiada. Pulangan tupel bersama nyahstruktur memperkasakan corak seperti useState.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 101
Pelajaran: 352

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Nyahstruktur Tatasusunan dan Tuple” percuma?

Ya — teks penuh “Nyahstruktur Tatasusunan dan Tuple” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus TypeScript Academy, tingkat taraf kepada CoddyKit PRO. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Nyahstruktur Tatasusunan dan Tuple”?

Nyahstruktur tatasusunan dan tuple dengan jenis elemen yang betul. Anda berlatih TypeScript Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan TypeScript Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran TypeScript Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Nyahstruktur Tatasusunan dan Tuple” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy