Bu eğitimde, örnekler yardımıyla JavaScript yayılma operatörü hakkında bilgi edineceksiniz.
Yayılma operatörü, JavaScript ES6 sürümünde bulunan özelliklere yeni bir ektir .
Yayılma Operatörü
Yayılma operatörü … , bir yinelenebilir veya bir diziyi genişletmek veya yaymak için kullanılır. Örneğin,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
Bu durumda kod:
console.log(… arrValue)
eşdeğerdir:
console.log('My', 'name', 'is', 'Jack');
Yayma Operatörünü Kullanarak Dizi Kopyalama
Öğeleri tek bir diziye kopyalamak için yayılma sözdizimini de kullanabilirsiniz … . Örneğin,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Yayılma Operatörünü Kullanarak Dizi Klonlama
JavaScript'te nesneler, değerlere göre değil referansa göre atanır. Örneğin,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
Burada, hem arr1 hem de arr2 değişkeni aynı diziyi ifade etmektedir. Dolayısıyla, bir değişkendeki değişiklik, her iki değişkende de değişikliğe neden olur.
Bununla birlikte, dizileri aynı diziye başvurmamaları için kopyalamak istiyorsanız, yayılma işlecini kullanabilirsiniz. Bu şekilde, bir dizideki değişiklik diğerine yansıtılmaz. Örneğin,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Nesne ile Yayılma Operatörü
Yayma işlecini nesne değişmezleriyle de kullanabilirsiniz. Örneğin,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Burada, hem obj1ve obj2özellikler eklenen obj3yayılmış operatörü kullanılarak.
Dinlenme Parametresi
Yayılma operatörü bir parametre olarak kullanıldığında, rest parametresi olarak bilinir.
Rest parametresini kullanarak bir işlev çağrısında birden çok argümanı da kabul edebilirsiniz. Örneğin,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Buraya,
- İşleve tek bir argüman iletildiğinde
func(), rest parametresi yalnızca bir parametre alır. - Üç bağımsız değişken iletildiğinde, rest parametresi üç parametrenin tümünü alır.
Not : rest parametresini kullanmak, argümanları dizi öğeleri olarak iletir.
Ayrıca yayılma operatörünü kullanarak bir işleve birden çok argüman iletebilirsiniz. Örneğin,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Yayılma operatörünü kullanarak birden çok argüman iletirseniz, işlev gerekli argümanları alır ve geri kalanını yok sayar.
Not : Yayılma operatörü ES6'da tanıtıldı . Bazı tarayıcılar yayılma sözdiziminin kullanımını desteklemeyebilir. Daha fazla bilgi için JavaScript Yayılma Operatörü desteğini ziyaret edin.
