Что означает "foo(...arg)" (три точки в вызове функции)?

Question

Может кто-нибудь сказать, что такое "..." в приведенном ниже коде в примере "Intro to Angular"?

getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });

Answer 1

Это не имеет ничего общего с jQuery или Angular. Эта функция была представлена ​​в ES2015.

Это конкретное использование ... на самом деле не имеет официального названия. Имя, которое соответствует другим применениям, будет "распространяемым аргументом" (общим термином будет "распространенный синтаксис"). Он "взрывает" (распространяет) итерируемое и передает каждое значение в качестве аргумента функции. Ваш пример эквивалентен:

this.heroes.push.apply(this.heroes, Array.from(heroes));

Помимо того, чтобы быть более кратким, еще одно преимущество ... вот что может быть проще использовать с другими конкретными аргументами:

func(first, second, ...theRest);

// as opposed to the following or something similar:
 func.apply(null, [first, second].concat(Array.from(heroes)));

Answer 2

Это функция JavaScript, которая называется Rest Parameters. Используя его, ваша функция может принимать любое количество аргументов. Вы ставите три точки непосредственно перед аргументом (без символа пробела), и механизм распространяет его для вас, как если бы это был список из нескольких аргументов. В Eloquent Javascript у вас есть хороший пример этого.

let numbers = [5, 1, 7];
console.log(max(...numbers));
// -> 7

Answer 3

Это копия исходного массива

let args = [7, 3, 8];
var [h] = args.reverse(); // args is now 8, 3, 7

в то время как

var [h] = [...args].reverse(); // args is still 7, 3, 8

Его также можно использовать для указания оставшихся значений массива.

var [first, ...rest] = args; // first = 7, rest = [3, 8]

Answer 4

Согласно заголовку вопроса, использование ... в объявлении функции (в скобках) - это использование оператора rest или параметра rest. Чтобы помочь нам создавать более гибкие функции, ES6 вводит параметр rest для параметров функции..

С помощью параметра rest вы можете создавать функции, которые принимают переменное количество аргументов. Эти аргументы хранятся в массиве, к которому позже можно будет получить доступ изнутри функции.

Пример: 1

function foo(...args) {
  return "You have passed " + args.length + " arguments.";
}

console.log(foo(0, 1, 2,4)); // You have passed 4 arguments.
console.log(foo("hello", null, [1, 2], { })); // You have passed 4 arguments.

Пример 2:

function foo(...args){
     args.forEach(function(arg){
        console.log(arg);
     })
   }

   foo(2,3,4,5,6);

Параметр rest устраняет необходимость проверки массива args и позволяет нам применять map(), filter(), reduce() и другие функции более высокого порядка массива к массиву параметров.

ДРУГИЕ СЛУЧАИ ИСПОЛЬЗОВАНИЯ... оператора:

1. Используется как оператор распространения, который является обратным оператору rest.

   const arr = [6, 89, 3, 45]; const maximum= Math.max(...arr); console.log(maximum);

2. ... используется для простого копирования массива или объекта и весьма полезен в фреймворках и библиотеках javascript, таких как angular и react соответственно.

   const arr1 = [1,2,3,4];
   const arr2 = [...arr1];
   console.log(arr2);//  [1,2,3,4];
   
   const obj1 = {
     name:'john',
     age:25
   }
   
   const obj2 = {...obj1};
   console.log(obj2); // Now obj2 is new object and is copy of obj1 (non-mutated 
   way)