Bu eğitimde, örnekler yardımıyla JavaScript tahrip etme ataması hakkında bilgi edineceksiniz.
JavaScript Destructuring
ES6'da sunulan yıkıcı atama, dizi değerlerini ve nesne özelliklerini farklı değişkenlere atamayı kolaylaştırır. Örneğin,
ES6'dan önce:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
ES6'dan:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Not : Nesne yok etmede adın sırası önemli değildir.
Örneğin, yukarıdaki programı şu şekilde yazabilirsiniz:
let ( age, gender, name ) = person; console.log(name); // Sara
Not : Nesneleri yok ederken, değişken için karşılık gelen nesne anahtarıyla aynı adı kullanmalısınız.
Örneğin,
let (name1, age, gender) = person; console.log(name1); // undefined
Nesne anahtarı için farklı değişken isimleri atamak istiyorsanız, şunları kullanabilirsiniz:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Dizi Yıkımı
Aynı şekilde dizi yıkımı da gerçekleştirebilirsiniz. Örneğin,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Varsayılan Değerleri Atayın
Yıkmayı kullanırken değişkenler için varsayılan değerleri atayabilirsiniz. Örneğin,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
Yukarıdaki programda, arrValue'nun yalnızca bir öğesi vardır. Bu nedenle
- x değişkeni 10 olacaktır
- y değişkeni varsayılan değeri alır 7
Nesne yok etmede, varsayılan değerleri benzer şekilde iletebilirsiniz. Örneğin,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Değişkenleri Değiştirme
Bu örnekte, yıkıcı atama sözdizimi kullanılarak iki değişken değiştirilir.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Öğeleri Atla
Bir dizideki istenmeyen öğeleri yerel değişkenlere atamadan atlayabilirsiniz. Örneğin,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
Yukarıdaki programda, virgül ayırıcı kullanılarak ikinci eleman atlanmıştır ,.
Kalan Öğeleri Tek Bir Değişkene Atayın
Yayılma sözdizimini kullanarak bir dizinin kalan öğelerini bir değişkene atayabilirsiniz … . Örneğin,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Burada onex değişkenine atanmaktadır. Ve dizi elemanlarının geri kalanı y değişkenine atanır.
Ayrıca, nesne özelliklerinin geri kalanını tek bir değişkene atayabilirsiniz. Örneğin,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Not : Forma söz dizimine sahip değişkenin sonunda virgül olamaz ,. Bu rest elemanını (yayılma sözdizimine sahip değişken) son değişken olarak kullanmalısınız.
Örneğin,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Yuvalanmış Yıkım Ataması
Dizi öğeleri için iç içe geçmiş yıkım gerçekleştirebilirsiniz. Örneğin,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Burada, y ve z değişkenlerine iç içe elemanlar atanır twove three.
İç içe geçmiş yıkım atamasını yürütmek için, değişkenleri bir dizi yapısının içine almanız gerekir (içine alarak ()).
Nesne özellikleri için iç içe geçmiş yıkım da gerçekleştirebilirsiniz. Örneğin,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Nesneler için iç içe geçmiş yıkım atamasını yürütmek için, değişkenleri bir nesne yapısının içine almanız gerekir (içine alarak ()).
Not : Yıkıcı atama özelliği ES6'da tanıtıldı . Bazı tarayıcılar, yok etme atamasının kullanımını desteklemeyebilir. Daha fazla bilgi edinmek için Javascript Destructuring desteğini ziyaret edin.
