Bereaksi Penghancuran ES6
Penghancuran
Untuk mengilustrasikan destrukturisasi, kita akan membuat sandwich. Apakah Anda mengeluarkan semuanya dari lemari es untuk membuat sandwich Anda? Tidak, Anda hanya mengeluarkan barang-barang yang ingin Anda gunakan di sandwich Anda.
Menghancurkan adalah persis sama. Kita mungkin memiliki larik atau objek yang sedang kita kerjakan, tetapi kita hanya membutuhkan beberapa item yang ada di dalamnya.
Destructuring memudahkan untuk mengekstrak hanya apa yang dibutuhkan.
Menghancurkan Array
Berikut adalah cara lama untuk menetapkan item array ke variabel:
Sebelum:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Berikut adalah cara baru untuk menetapkan item array ke variabel:
Dengan merusak:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Saat mendestruktur array, urutan variabel yang dideklarasikan adalah penting.
Jika kita hanya menginginkan mobil dan suv, kita cukup meninggalkan truk tetapi tetap menggunakan koma:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Penghancuran sangat berguna ketika suatu fungsi mengembalikan array:
Contoh
function calculate(a, b) {
const add = a + b;
const subtract = a - b;
const multiply = a * b;
const divide = a / b;
return [add, subtract, multiply, divide];
}
const [add, subtract, multiply, divide] = calculate(4, 7);
Dapatkan Sertifikasi!
$95 DAFTAR
Menghancurkan Objek
Berikut adalah cara lama menggunakan objek di dalam suatu fungsi:
Sebelum:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
// old way
function myVehicle(vehicle) {
const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}Berikut adalah cara baru menggunakan objek di dalam suatu fungsi:
Dengan merusak:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
function myVehicle({type, color, brand, model}) {
const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}
Perhatikan bahwa properti objek tidak harus dideklarasikan dalam urutan tertentu.
Kita bahkan dapat merusak struktur objek bersarang dalam dengan mereferensikan objek bersarang kemudian menggunakan tanda titik dua dan kurung kurawal untuk kembali merusak item yang diperlukan dari objek bersarang:
Contoh
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red',
registration: {
city: 'Houston',
state: 'Texas',
country: 'USA'
}
}
myVehicle(vehicleOne)
function myVehicle({ model, registration: { state } }) {
const message = 'My ' + model + ' is registered in ' + state + '.';
}