Spread Syntax (Spread Element) and Rest parameters

A Spread syntax allows in-place expansion of an expression for the following cases:

  • Array
  • Function call
  • Multiple variable destructuring
    Rest parameters works in the opposite direction of the spread syntax, it collects an indefinite number of comma separated expressions into an array.

Spread Syntax

Spread example:

  1. const add = (a, b) => a + b;
  2. let args = [3, 5];
  3. add(...args); // same as `add(args[0], args[1])`, or `add.apply(null, args)`

Functions aren't the only place in JavaScript that makes use of comma separatedlists - arrays can now be concatenated with ease:

  1. let cde = ['c', 'd', 'e'];
  2. let scale = ['a', 'b', ...cde, 'f', 'g'];  // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

Similarly, object literals can do the same thing:

  1. let mapABC  = { a: 5, b: 6, c: 3};
  2. let mapABCD = { ...mapABC, d: 7};  // { a: 5, b: 6, c: 3, d: 7 }

Rest parameter

Rest parameters share the ellipsis like syntax of spread syntax but are usedfor a different purpose. Rest parameters are used to access indefinite numberof arguments passed to a function. For example:

  1. function addSimple(a, b) {
  2.   return a + b;
  3. }
  5. function add(...numbers) {
  6.   return numbers[0] + numbers[1];
  7. }
  9. addSimple(3, 2);  // 5
  10. add(3, 2);        // 5
  12. // or in es6 style:
  13. const addEs6 = (...numbers) => numbers.reduce((p, c) => p + c, 0);
  15. addEs6(1, 2, 3);  // 6

Technically JavaScript already had an arguments variable set on each function(except for arrow functions), however arguments has a lot of issues, one ofwhich is the fact that it is not technically an array.

Rest parameters are in fact arrays which provides access to methods like map, filter, reduce and more. The other important difference is that rest parameters only include arguments not specifically named in a function like so:

  1. function print(a, b, c, ...more) {
  2.   console.log(more[0]);
  3.   console.log(arguments[0]);
  4. }
  6. print(1, 2, 3, 4, 5);
  7. // 4
  8. // 1

Note: Commonly spread syntax and rest parameters are referenced as Spread and Rest operators but they aren't operators according to ECMAScript specifications. Few references MDN-Spread Syntax, MDN-Rest Parameters, ECMAScript Spec - Spread Syntax, ECMAScript Spec - Rest Parameters

原文: https://angular-2-training-book.rangle.io/handout/features/spread_and_rest.html