javascript Destructuring assignment (Atamayı yapılandırma)

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:


let Arr = [1, 2, 3]; 
let a = Arr[0];
let b = Arr[1];
let c = Arr[2];

Dizi Destructuring assignment atamasıyla çok daha kolay:


let Arr = [1, 2, 3];

let [a, b, c] = Arr; 

ÇIKYI:

a=1, b=2, c=3

Çok kolay değil mi? Dizideki ilk öğe ilk değişkene, dizideki ikinci öğe ikinci değişkene atanır ve bu böyle devam eder.

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:


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.

ÖRNEK:


let [a,b=3] = [2];

console.log(a); // 2
console.log(b); // 3

ÖRNEK 2:


let Arr = [1];

let [a, b, c] = Arr; // a=1, b=undefined, c=undefined

Yeterli öğe olmaması durumunda değişkenlere varsayılan değerler sağlayabilirsiniz.

ÖRNEK 3:


let myArray = [1];
let [a=2, b=4, c=6] = myArray; // a=1, b=4, c=6

İmha etme veya yıkma olarakda adlandırıldığı için, öğelerin aslında kaynak diziden kaldırıldığını düşünebilirsiniz. Ancak durum böyle değildir, kaynak dizisi değişmeden kalır. Aynısı nesneleri yıkmak için de geçerlidir.

destructuring (atama) kullanırken değişkenler için varsayılan değerleri atayabilirsiniz. Örneğin:


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

Yukarıdaki programda, arrValue sadece bir elemente sahiptir. Bu nedenle,

Öğeleri Atla


Bir dizideki istenmeyen öğeleri yerel değişkenlere atamadan atlayabilirsiniz. Örneğin:


const arrValue = ['one', 'two', 'three'];

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.

ÖRNEK 2:


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.


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:


let [a, b, ...c] = [1, 2, 3, 4, 5];

console.log(a, b, c); // 1 2 [3,4,5]

ÖRNEK 2:


let [, ...x] = [1, 2, 3, 4, 5];

console.log(x); // [2,3,4,5]

ÖRNEK 3:


let [...y] = [1, 2, 3, 4];

console.log(y); // [1,2,3,4]

Dizi Elemanlarından, daha fazla değişken varsa, herhangi bir ekstra değişkenin değeri undefined olur.


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:

ÖRNEK:


let [a, [b], c] = [3, [4], 6];

console.log(a, b, c); // 3 4 6

ÖRNEK 2:


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

ÖRNEK 3:


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



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.


let {b: x} = {a:1, b:2, c:3 };

console.log( x ); // 2

Varsayılan değer ile:


// 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



// Anahtar adlarını değişken adları olarak kullanmak
let {a,b,c} = {a:1, b:2, c:3 };

console.log( a, b, c ); // 1 2 3

ÖRNEK 2:


let {b} = {a:1, b:2, c:3 };

console.log( b ); // 2

Spread Operator kullanarak Destructuring Atama



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:



let {c, b:[x,y]} = {a:1, b:[2,4], c:3 };

console.log(c); // 3
console.log(x); // 2
console.log(y); // 4

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

975

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
  • CSS YATAY MENÜ YAPIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.