Question

有人可以在“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中引入的一项功能。

... doesn't actually have an official name的特殊用法。与其他用途一致的名称将是“spread argument”（通用术语将是"spread syntax"）。它“爆炸”（传播） iterable 并将每个值作为参数传递给函数。您的示例等同于：

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（）和其他数组高阶函数。

其他使用情况...运算符：

用作传播算子，与剩余算子相反。

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

... 运算符用于非常容易地复制数组或对象，并且在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)

“foo（... arg）”（函数调用中的三个点）是什么意思？

4 个答案: