Arrays Rest and Spread

Array Spread Operator

Der Array Spread Operator ... “breitet” eine kommagetrennte Liste aus. Das ist ein bisschen so wie Butter aufs Brot streichen:

const array = [1, 2, 3, 4, 5];

// normale Ausgabe:
console.log(array);
> Array(5) [1, 2, 3, 4, 5]

// Ausgabe mit dem Spread Operator:
console.log(...array);
> 1 2 3 4 5

Arrays kann man überall hin ‘spreaden’, z.B. beim Aufrufen einer Funktion oder in andere Arrays:

// 1. Funktionsaufruf:
const names = ['Pedro', 'Axi', 'Bibs'];
function logNames(name1, name2, name3) {
  console.log(name1);
  console.log(name2);
  console.log(name3);
}
logNames(...names);

// 2. in einen anderen Array:
const array2 = [1, 2, 3, ...names];
console.log(...array2);  // 1, 2, 3, Pedro, Axi, Bibs

Spreading instead of Array.concat()

Einen Array in einen anderen Array spreaden ersetzt auch wunderbar die Methode concat():

const existingArray = [2, 3];

// einfügen davor:
const itemToAddBefore = 1;
// mit concat():
const combinedArray = [itemToAddBefore].concat(existingArray);
// mit Spread:
const combinedArray = [itemToAddBefore, ...existingArray];

// einfügen danach:
const itemsToAddAfter = [4, 5];
// mit concat():
const combinedArray = existingArray.concat(4, 5);
// mit Spread:
const combindedArray = [...existingArray, 4, 5];
// so geht's auch:
const combinedArray = [...existingArray, ...itemsToAddAfter];

Wir können auch mehrere Arrays zusammen spreaden und sogar einen Spread in der Mitte einfügen:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
const combinedArray = [0, ...array1, 3.5, ...array2];

Spreading instead of Array.from

Der Spread-Operator funktioniert auch bei Array-ähnlichen Objekten wie NodeLists oder HTMLCollections. Beide Methoden machen dasselbe und sie haben beide denselben Browser Support:

// substitute for Array.from
const items = document.querySelectorAll('.item');

const arrayFromItems = Array.from(items);
const arrayFromSpread = [...items];

Array Rest Operator

Der Array Rest Operator packt durch Beistriche getrennte Argumente in einen Array. Er macht also genau das Gegenteil vom Spread Operator.
Angenommen, wir haben eine Funktion, die 10 Argumente entgegennimmt. Die Parameter in der Funktion können mit dem Array Rest Operator ... platzsparend gepackt werden:

function logNames(...names) {
  names.forEach(name => console.log(name));
}
logNames('Bib', 'Axi', 'Pedro', 'George', 'Pye', 'Zack', 'Cloud');

Array Rest and Destructuring

Wenn wir einen Array destrukturieren, können wir “den Rest des Arrays” mit dem Rest Operator in eine Variable packen:

// Array Rest and Destructuring
const scores = [100, 99, 98];
const [first, ...restOfScores] = scores;
console.log(scores);        // 100, 99, 98
console.log(first);         // 100
console.log(restOfScores);  // 99, 98