Tepki ES6 Yıkımı
Şeklini bozma
Yıkımı göstermek için bir sandviç yapacağız. Sandviçinizi yapmak için buzdolabından her şeyi çıkarır mısınız? Hayır, sadece sandviçinizde kullanmak istediğiniz malzemeleri çıkarıyorsunuz.
Yıkım tamamen aynıdır. Üzerinde çalıştığımız bir dizi veya nesne olabilir, ancak bunlarda bulunan öğelerin yalnızca bazılarına ihtiyacımız var.
Yıkım, yalnızca gerekli olanı çıkarmayı kolaylaştırır.
Dizileri Yok Etme
Bir değişkene dizi öğeleri atamanın eski yolu:
Önceki:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Bir değişkene dizi öğeleri atamanın yeni yolu:
yıkım ile:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Dizileri yok ederken, değişkenlerin bildirilme sırası önemlidir.
Yalnızca arabayı ve SUV'yi istiyorsak, kamyonu dışarıda bırakıp virgül koymayı bırakabiliriz:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Bir işlev bir dizi döndürdüğünde, yok etme kullanışlı olur:
Örnek
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);
Sertikalı olmak!
95 $ KAYIT
Nesneleri İmha Etme
Bir işlevin içinde bir nesneyi kullanmanın eski yolu:
Önceki:
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 + '.';
}Bir nesneyi bir fonksiyon içinde kullanmanın yeni yolu:
yıkım ile:
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 + '.';
}
Nesne özelliklerinin belirli bir sırada bildirilmesi gerekmediğine dikkat edin.
İç içe geçmiş nesneye atıfta bulunarak ve ardından iç içe nesneden ihtiyaç duyulan öğeleri yeniden yok etmek için iki nokta üst üste ve küme parantezleri kullanarak derinlemesine iç içe geçmiş nesneleri bile bozabiliriz:
Örnek
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 + '.';
}