JavaScript - Penyangkut Array: Membuka.Magic Array

Hai teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan mengemban perjalanan menarik ke dunia Penyangkut Array. Jangan khawatir jika ini terdengar seperti hal yang sulit - di akhir pelajaran ini, Anda akan menjadi ahli dalam menyangkut array! Jadi, ambil keyboard Anda (tongkat takhta takhta) dan mari kita masuk ke dalam!

JavaScript - Array Destructuring

Apa Itu Penyangkut Array?

Bayangkan Anda memiliki kotak hadiah yang indah (itu adalah array kita) yang penuh dengan berbagai macam hadiah kecil (elemen array kita). Penyangkut array adalah seperti membuka kotak itu secara magis dan mengatur semua hadiah kecil itu di atas meja, masing-masing di tempat khususnya. Ini adalah cara untuk menguraikan nilai dari array ke variabel yang berbeda. Keren, kan?

mari kita mulai dengan contoh sederhana:

const buah = ['apple', 'banana', 'cherry'];
const [buahPertama, buahKedua, buahKetiga] = buah;

console.log(buahPertama);  // Output: 'apple'
console.log(buahKedua); // Output: 'banana'
console.log(buahKetiga);  // Output: 'cherry'

Dalam contoh ini, kita mengambil array buah kita dan menguraikan nilainya ke tiga variabel terpisah. Seperti mengatakan, "Hai JavaScript, ambil buah-buah ini dan berikan saya buah pertama, kedua, dan ketiga secara terpisah!"

Melompati Elemen Array Saat Menyangkut Array

Sekarang, apa jika Anda sedang diet dan ingin melompati banana? Tidak masalah! Penyangkut array memungkinkan Anda melompati elemen yang Anda tidak inginkan. Mari lihat bagaimana:

const [buahPertama, , buahKetiga] = ['apple', 'banana', 'cherry'];

console.log(buahPertama);  // Output: 'apple'
console.log(buahKetiga);  // Output: 'cherry'

Lihat koma ekstra antara buahPertama dan buahKetiga? Itu adalah kita memberitahu JavaScript, "Lompati item kedua, silakan!" Seperti memilih buah-buah yang Anda inginkan dari mangkuk buah.

Penyangkut Array dan Operator Rest

Tunggu, masih ada lagi! Apa jika Anda hanya ingin buah pertama, tapi kemudian ingin memasukkan yang lain ke dalam wadah terpisah? Itu di mana operator rest (...) berguna:

const buah = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const [buahPertama, ...sisaBuah] = buah;

console.log(buahPertama);    // Output: 'apple'
console.log(sisaBuah);  // Output: ['banana', 'cherry', 'date', 'elderberry']

Di sini, buahPertama mendapat 'apple', dan sisaBuah mendapat yang lain. Seperti mengatakan, "Berikan saya buah pertama, kemudian geser yang lain ke dalam wadah ini!"

Penyangkut Array dan Nilai Default

kadang-kadang, kotak buah kita mungkin tidak memiliki semua buah yang kita harapkan. Dalam kasus itu, kita dapat menetapkan nilai default:

const [apple = 'apple merah', banana = 'banana kuning'] = ['apple hijau'];

console.log(apple);   // Output: 'apple hijau'
console.log(banana);  // Output: 'banana kuning'

Dalam contoh ini, kita mengatakan, "Jika tidak ada apple, gunakan 'apple merah', dan jika tidak ada banana, gunakan 'banana kuning'." Tetapi karena kita memiliki 'apple hijau', itu adalah apa yang kita dapatkan untuk apple, sedangkan banana menggunakan nilai default.

Tukar Variabel Menggunakan Penyangkut Array

Ini adalah trik menarik: kita dapat menggunakan penyangkut array untuk menukar variabel tanpa memerlukan variabel sementara. Itu seperti trick magi!

let a = 'pertama';
let b = 'kedua';

[a, b] = [b, a];

console.log(a);  // Output: 'kedua'
console.log(b);  // Output: 'pertama'

Tada! Kita telah menukar nilai a dan b dalam satu baris. Seperti kita membuat mereka berubah tempat secara instan!

Menyangkut Array Yang Dikembalikan Dari Fungsi

Terakhir namun tidak kurang penting, kita dapat menggunakan penyangkut pada array yang dikembalikan dari fungsi. Misalnya kita memiliki fungsi yang mengembalikan array data cuaca:

function dapatCuaca() {
return ['cerah', 25, '10%'];
}

const [langit, suhu, kelembaban] = dapatCuaca();

console.log(langit);         // Output: 'cerah'
console.log(suhu); // Output: 25
console.log(kelembaban);    // Output: '10%'

Di sini, kita menangkap array yang dikembalikan dan segera menguraikannya ke variabel terpisah. Seperti fungsi melempar paket kepad kita dan kita menguraikannya di udara!

Ringkasan Metode Penyangkut Array

Ini adalah tabel praktis yang menyummarisakan metode yang kita pelajari:

Metode Deskripsi Contoh
Penyangkut Dasar Menguraikan elemen array ke variabel const [a, b, c] = [1, 2, 3]
Melompati Elemen Melompati elemen yang tidak diinginkan saat penyangkut const [a, , c] = [1, 2, 3]
Operator Rest Mengumpulkan elemen yang tersisa ke dalam array const [a, ...rest] = [1, 2, 3, 4]
Nilai Default Menetapkan nilai default untuk elemen yang hilang const [a = 1, b = 2] = [3]
Tukar Variabel Menukar nilai variabel [a, b] = [b, a]
Penyangkut Return Fungsi Menyangkut array yang dikembalikan dari fungsi const [a, b] = getArray()

Dan begitulah, teman-teman! Anda telah belajar seni penyangkut array di JavaScript. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk bermain dengan konsep ini. Sebelum Anda tahu, Anda akan menyangkut array dalam tidur Anda! Siapa sangka bahwa menguraikan array bisa begitu menyenangkan? Sekarang pergi dan tampilkan keberanian Anda dalam menyangkut! Selamat coding, dan semoga array Anda selalu terurai dengan rapi!

Credits: Image by storyset