- Katılım
- 23 Nisan 2020
- Mesajlar
- 103
- Puanı
- 13
- Yaş
- 48
- Web
- www.kulvar.net
- Eğitim
- Lise
- İlgi Alanı
- Java
- Cinsiyet
- Erkek
- Takım
- Medeni
- Evli
ES6'da tanıtılan Destructuring assignment (Atamayı yapılandırma), dizi değerlerini ve nesne özelliklerini farklı değişkenlere atamayı kolaylaştırır. Diğer bir ifade ile Destructuring assignment, nesnelerden dizilerden veya özelliklerden değerleri paketten çıkarmanıza ve bunları değişkenlere kaydetmenize olanak tanıyan javaScript söz dizimidir.
Bu çok kullanışlı bir özellik çünkü verileri doğrudan dizilerden ve nesnelerden çıkararak değişkenlere kaydetmek için tek bir kod satırında yapabiliyoruz. Güçlüdür çünkü aynı ifadede birden çok dizi öğesini veya nesne özelliğini çıkarmamıza olanak tanır.
ES6'da, bir diziyi değerlerini paketten çıkarmak için, verinin atanacağı değişkeni içeren bir dizi oluştururuz ve onu, paketten çıkarılan veri dizisine eşit olarak ayarlayabiliriz. Dizideki değerler paketten çıkarılır ve sol taraftaki dizide soldan sağa, dizi değeri başına bir değişken olmak üzere değişkenlere atanır. Aşağıdaki kodda temel dizi destructuring atama bir örneği gösterilmektedir
Dizi destructuring atama
Bir dizimiz olduğunu ve içeriğini ayrı değişkenlere atamak istediğimizi varsayalım. destructuring Atama kullanmadan, normal atamada böyle bir şey yapmanız gerekir
JavaScript:
let Arr = [1, 2, 3];
let a = Arr[0];
let b = Arr[1];
let c = Arr[2];
JavaScript:
let Arr = [1, 2, 3];
let [a, b, c] = Arr;
Kod:
a=1, b=2, c=3
Yukarıdaki örnekte, yeni değişkenler tanımladık ve bunlara atadık, ancak mevcut olanları kullanabilirsiniz
Elbette kaynak dizideki tüm öğeleri kullanmanız gerekmez,
JavaScript:
let Arr = [1, 2, 3];
let [a, b] = Arr; // a=1, b=2
Varsayılan değerler
Öte yandan, dizide yeterli öğe yoksa, yalnızca bazı değişkenler atanır. Geri kalanı, bir değişkeni tanımlayıp atamayacakmışsınız gibi tanımsız kalır.
Kod:
let [a,b=3] = [2];
console.log(a); // 2
console.log(b); // 3
Kod:
let Arr = [1];
let [a, b, c] = Arr; // a=1, b=undefined, c=undefined
Kod:
let myArray = [1];
let [a=2, b=4, c=6] = myArray; // a=1, b=4, c=6
destructuring (atama) kullanırken değişkenler için varsayılan değerleri atayabilirsiniz. Örneğin
Kod:
let arrValue = [10];
// varsayılan değer 5 ve 7 atama
let [x = 5, y = 7] = arrValue;
console.log(x); // 10
console.log(y); // 7
- x değişken 10 olacak
- y değişken varsayılan değeri alır 7
Öğeleri Atlama
Bir dizideki istenmeyen öğeleri yerel değişkenlere atamadan atlayabilirsiniz. Örneğin
Kod:
const arrValue = ['one', 'two', 'three'];
const [x, , z] = arrValue;
console.log(x); // one
console.log(z); // three
Kod:
let myArray = [1, 2, 3];
let [a, , b] = myArray; // a=1, b=3
Öğeleri Atla
Bir dizideki istenmeyen öğeleri yerel değişkenlere atamadan atlayabilirsiniz. Örneğin
Kod:
const arrValue = ['one', 'two', 'three'];
const [x, , z] = arrValue;
console.log(x); // one
console.log(z); // three
Kod:
let myArray = [1, 2, 3];
let [a, , b] = myArray; // a=1, b=3
Değişkenleri Değiştirme
Bu örnekte, Destructuring assignment atama sözdizimi kullanılarak iki değişken değiştirilir
Kod:
let x = 4;
let y = 7;
// değişkenleri değiştirmek
[x, y] = [y, x];
console.log(x); // 7
console.log(y); // 4
Kalan Öğelerin Atanması
Kaynak diziden yalnızca ilk birkaç öğeyi atayabilir ve atanmamış tüm öğeleri yeni bir diziye yerleştirebilirsiniz
PHP:
let [a, b, ...c] = [1, 2, 3, 4, 5];
console.log(a, b, c); // 1 2 [3,4,5]
Kod:
let [, ...x] = [1, 2, 3, 4, 5];
console.log(x); // [2,3,4,5]
Kod:
let [...y] = [1, 2, 3, 4];
console.log(y); // [1,2,3,4]
Kod:
let [a,b] = [2];
console.log(a); // 2
console.log(b); // undefined
Yuvalanmış destructuring(atama)
Dizi öğeleri için iç içe geçmiş destructuring (atama) yapabilirsiniz. Örneğin
Kod:
let [a, [b], c] = [3, [4], 6];
console.log(a, b, c); // 3 4 6
Kod:
const arrValue = ['one', ['two', 'three']];
// dizilerde iç içe geçmiş destructuring ataması
const [x, [y, z]] = arrValue;
console.log(x); // one
console.log(y); // two
console.log(z); // three
Kod:
let myArray = [1, 2, [3, 4], 5];
let [first, second, [third, fourth], fifth] = myArray;
// first = 1, second = 2, third = 3, fourth = 4, fifth = 5
Yinelemeleri Yok Etme
JavaScript:
const person = "javascript dersi";
let [first, second] = person;
console.log(first);
console.log(second);
// first = "j", second = "a"
Nesne destructuring(atama)
Atamanın sırayla belirlendiği dizilerden farklı olarak, burada bu, nesnenin özellik adıyla eşleşen değişken adıyla yapılır
JavaScript:
let {b: x} = {a:1, b:2, c:3 };
console.log( x ); // 2
Kod:
// x, d anahtarının değeri olsun.
//Mevcut değilse, varsayılan olarak 9'a olsun.
let {d: x = 9} = {a:1, b:2, c:3 };
console.log( x ); // 9
Değişken İsimleri Olarak Anahtar İsimleri
PHP:
let { c, ...restProperties } = { a: 1, b: 2, c: 3 };
console.log(c); // 3
console.log(restProperties); // { a: 1, b: 2 }
İç içe diziyi ve nesne Destructuring Atama
JavaScript:
let {c, b:[x,y]} = {a:1, b:[2,4], c:3 };
console.log(c); // 3
console.log(x); // 2
console.log(y); // 4