JS - Polyfill vol. 12

Polyfille piszemy nie po to, aby wynaleźć koło od nowa, ale po to, by lepiej zrozumieć zarówno język jak i to, jak często używane funkcje działają. Nie ma lepszego sposobu, aby zapamiętać ich działanie, niż je samemu napisać!

Zobaczmy, jak działa unshift:

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// Expected output: 5

console.log(array1);
// Expected output: Array [4, 5, 1, 2, 3]

Na początku napiszemy coś, co unshiftem nie jest:

Array.prototype.toUnshifted = function(newEl){
    return [newEl, ...this];
}

let arr123 = [1,2,3];

let newarr = arr123.toUnshifted(0);
console.log(newarr);
//[ 0, 1, 2, 3 ]

Funkcja toUnshifted zwraca nową tablicę z elementem z przodu i resztą elementów dalej. Okej, zróbmy obsługę wielu argumentów:

Array.prototype.toUnshifted = function(...args){
    return [...args, ...this];
}

let arr123 = [1,2,3];

let newarr2 = arr123.toUnshifted(-2, -1, 0);
console.log(newarr2);
//[ -2, -1, 0, 1, 2, 3 ]

Bardzo proste.

Okej, ale unshift jest in-place, on oryginalną tablicę modyfikuje. Oto kod:

Array.prototype.myUnshift = function () {
  if (arguments.length > 0) {
    // move elements of the array ahead
    for (let i = this.length - 1; i >= 0; i--) {
      this[i + arguments.length] = this[i];
    }

    // add the args elements at the start
    for (let i = 0; i < arguments.length; i++) {
      this[i] = arguments[i];
    }
  }

  return this.length;
};

Znalezione w internecie, ale jeden rzut oka powinien już nam wyjaśniać co i jak działa. Arguments to taka zmienna zawierająca wszystkie argumenty przekazane funkcji, czasy przed operatorami rest/spread.

Logika przesuwania też nie jest przesadnie trudna. Zwracamy długość.

JS – Polyfill vol. 12