9 mar 2018

Użycie operator spread syntax czyli [...]

W ES6 pojawiła się nowa funkcjonalność nazywana "Spread syntax" operacje na tablicach czy obiektach. Poniżej kilka przykładów użycia. W ES5 jest to concat.

W ES6

const boys = ["Jaś", "Grześ", "Adaś"];
const girls = ["Małgosia", "Ania", "Czesia"];

let people = [...boys, ...girls];

console.log(people); // ["Jaś", "Grześ", "Adaś", "Małgosia", "Ania", "Czesia"]

W ES5

const boys = ["Jaś", "Grześ", "Adaś"];
const girls = ["Małgosia", "Ania", "Czesia"];

let people = boys.concat(girls);

console.log(people); // ["Jaś", "Grześ", "Adaś", "Małgosia", "Ania", "Czesia"]

Inny przykład:

const divs = document.querySelector('div');

// użycie call 
[].foreach.call(divs, function(div) {
   console.log(div);
});

// użycie spread
[...divs].foreach(div => {
    console.log(div)
}