...(Javascript'te üç nokta) Spread Sözdizimi veya Spread Operatörü olarak adlandırılır. Bu, dizi ifadesi veya dize gibi bir yinelenebilir öğenin genişletilmesine veya bir nesne ifadesinin yerleştirildiği her yerde genişletilmesine olanak tanır . Bu, React'e özgü değildir. Bir Javascript işleci.
Buradaki tüm cevaplar faydalıdır, ancak Spread Sözdiziminin (Spread Operator) en çok kullanılan pratik Kullanım Durumlarını listelemek istiyorum .
1. Dizileri Birleştir (Dizileri Birleştir)
Orada bir olan diziler birleştirmek için çeşitli şekillerde , ama yayılması operatörü Bir dizide bir herhangi bir yerde bu yerleştirmek için izin verir. İki diziyi birleştirmek ve öğeleri dizinin herhangi bir yerine yerleştirmek isterseniz, aşağıdaki işlemleri yapabilirsiniz:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. Dizileri Kopyalama
Bir dizinin bir kopyasını istediğimizde, Array.prototypr.slice () yöntemini kullanırdık. Ancak, aynı işlemi forma operatörü ile de yapabilirsiniz.
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3. Arama Fonksiyonları Uygulanmadan
ES5'te, doStuff()işleve iki sayıdan oluşan bir dizi iletmek için genellikle Function.prototype.apply () yöntemini aşağıdaki gibi kullanırsınız:
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
Ancak, yayma işlecini kullanarak, bir diziyi işleve geçirebilirsiniz.
doStuff(...args);
4. Yıkım Dizileri
Bilgileri istediğiniz gibi değişkenlere çıkarmak için yıkım ve dinlenme operatörünü birlikte kullanabilirsiniz:
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
5. Dinlenme Parametreleri Olarak İşlev Bağımsız Değişkenleri
ES6 ayrıca, bir işlevin kalan tüm bağımsız değişkenlerini bir diziye toplayan bir dinlenme parametresi olan üç noktaya (...) sahiptir.
function f(a, b, ...args) {
console.log(args);
}
f(1,2,3,4,5);
// [ 3, 4, 5 ]
6. Matematik İşlevlerini Kullanma
Spread'in argüman olarak kullanıldığı herhangi bir fonksiyon, herhangi bir sayıda argümanı kabul edebilen fonksiyonlar tarafından kullanılabilir.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. İki Nesnenin Birleştirilmesi
İki nesneyi birleştirmek için forma operatörünü kullanabilirsiniz. Bu, bunu yapmanın kolay ve temiz bir yoludur.
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. Bir Dizeyi Ayrı Karakterlere Ayırma
Bir dizeyi ayrı karakterlere yaymak için forma operatörünü kullanabilirsiniz.
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
Forma Operatörünü kullanmanın daha fazla yolunu düşünebilirsiniz. Burada listelediğim, popüler kullanım durumları.