Cum funcționează de fapt parametrii de repaus JavaScript

Ultimul meu articol acoperit răspândire sintaxă și Object.assign în detaliu, dar glosat parametrii de odihnăîn interesul timpului. Cu toate acestea, simt că merită o privire mai atentă.

Să începem de la cei de încredere Documente MDN:

parametru rest sintaxa ne permite să reprezentăm un număr nedefinit de argumente ca o matrice.

Această ultimă parte, „ca matrice”, este interesantă, deoarece înainte de funcțiile săgeții ES6, am folosit arguments obiect. A fost matriceca, dar nu de fapt o matrice.

Exemplu:

function returnArgs() {
  return arguments;
}

V-om vedea arguments are indici, deci este capabil de buclă:

function loopThruArgs() {
  let i = 0;

  for (i; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

Dar nu este o matrice.

Să contrastăm asta cu o funcție folosind odihnă parametri:

es6Params = (...params) => {
  console.log('Array?', Array.isArray(params));
  return params;
};

este doar o matrice, adică putem folosi oricare dintre Array metode pe ea!

Să scriem o funcție care duble și sume fiecare parametru pe care i-l dai.

double = (x) => x * 2;
sum = (x, y) => x + y;

doubleAndSum = (...numbers) => numbers.map(double).reduce(sum, 0);

Și puteți numi câți parametri doriți în funcția dvs. înainte de a utiliza odihnă.

someFunction = (a, b, c, ...others) => {
  console.log(a, b, c, others);
};

Dar trebuie să fie ultima specificată, deoarece captează odihnă din argumentele tale. ?

Cred că știm ce se întâmplă sub capotă, dar să fim atenți. Verifică babeljs.io/repl, unde puteți scrie codul ES6 + și îl puteți transfera în ES5 în timp real.

Aceasta este o funcție mică, să o extindem și să adăugăm comentarii.

someFunction = function someFunction() {
  var _len = arguments.length;

  // create an array same length
  // as the arguments object
  var args = Array(_len);
  var i = 0;

  // iterate through arguments
  for (i; i < _len; i++) {
    // assign them to
    // the new array
    args[i] = arguments[i];
  }

  // and return it
  return args;
};

Din moment ce Babel a scris o funcție de școală veche pentru noi, poate accesa arguments obiect! arguments are indici și a .length proprietate, care este tot ce avem nevoie pentru a crea o clonă perfectă a acesteia.

Acesta este motivul pentru care putem folosi metode Array cum ar fi map, filter, reduce pe odihnă parametri, deoarece creează o clonă Array de arguments.

A se distra odihnă-ing!