关于JS数组的问题

Question

a: AA[];
b: AA;

ngOnInit() {
    this.a = [];
}

x() {
    this.a = [...this.a, this.b];  <--- 这是什么意思?
}

Answer 1

先看看babel解析后的结果

 this.a = [...this.a, this.b];
          ↓↓
 this.a = [].concat(_toConsumableArray(this.a), [this.b]);

由这段函数我们可以看到如果为数组会创建新数组克隆,否则会调用 Array.from 方法从类似数组或可迭代对象中创建新的数组实例

function _toConsumableArray(arr) {
 if (Array.isArray(arr)) { 
    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
      arr2[i] = arr[i]; } return arr2; 
    } else { 
      return Array.from(arr); 
    }
  }

我们再来试一遍

 [...'test',10];   // ['t','e','s','t',10] 结果和预期一样

 //再回顾这段代码就清晰许多了
 this.a = [...this.a, this.b];
 判断 this.a 类型 -> 为数组则克隆返回新数组 => 用 this.a 指向 [].concat() 方法拼接的 新数组 和 this.b 

Answer 2

希望能够帮助到 题主！

Answer 3

es6

Answer 4

... 展开运算符 | MDN

具体例子你可以进去看看。