数组中的“...”（三点）符号是啥意思？ [复制]

Posted 2023-02-22

【中文标题】数组中的“...”（三点）符号是啥意思？ [复制]

【英文标题】：What does the "..." (triple dot) notation in arrays mean? [duplicate]数组中的“...”（三点）符号是什么意思？ [复制]

【发布时间】：2016-07-05 20:55:21

【问题描述】：

我不明白 ... 表示法到底是做什么的。

我用 Babel 尝试了一个简单的例子来理解它（view the example），但似乎：

ES6 语法

let myArray = [1, 2, 3, ...18];

console.log(myArray); // [1, 2, 3]
console.log(myArray[4]);// undefined
console.log(myArray.length); // 3

与此 ES5 语法相同：

"use strict";

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); 
      


var myArray = [1, 2, 3].concat(_toConsumableArray(18));

console.log(myArray); // [1, 2, 3]
console.log(myArray[4]); // undefined
console.log(myArray.length); // 3

但是：这段代码有什么作用？因为输出（console.log）和这段代码（ES5）中的一样：

var myArray = [1,2,3];

console.log(myArray); // [1, 2, 3]
console.log(myArray[4]);// undefined
console.log(myArray.length); // 3

...18 表示法是什么意思？

【问题讨论】：

没有任何意义，因为 spread operator 不适用于数字。也许你想要...'18'，也就是'1', '8'

@WashingtonGuedes 或 ...[18]!

您对这段代码有什么期望？ （以及为什么...）

或者，...Array(18).keys()？

然后你看到了一个坏的例子。这根本不是操作员所做的。

【参考方案1】：

...(spread operator) 的工作原理是将索引0 中的每个值返回到索引length-1：

例如：

[...'18'] // returns ['1', '8']

与以下内容相同：

['18'[0], '18'[1]]

---

现在，要获取从1 到18 的数组，您可以这样做：

[...Array(19).keys()].slice(1)

或者这个用地图：

[...Array(18)].map(_=>i++,i=1)

希望对你有帮助。

【讨论】：

这无关紧要（在我看来）。 OP 想了解...，而不是创建数组 1 到 18

@AralRoca。如果没有...（扩展运算符），它将是['1','2','3','18'[0],'18'[1]]

呜呜！好的。现在很清楚了。非常感谢！

很高兴看到你的理解......我会用这些笔记更新我的答案

“...（扩展运算符）的工作原理是将索引 0 中的每个值返回到索引 length-1” 这不太正确。展开“运算符”（它不是运算符）适用于任何 iterable 值。可迭代值是具有[Symbol.iterator] 属性的值。

【参考方案2】：

表达式[1, 2, 3, ...18] 无效。

您不能将... 与Number 一起使用。您只能将... 与Array、String 或Object 等可迭代对象一起使用。

有趣的是，Tracur - 另一个转译器 - 在输入相同的代码时会引发错误：

TypeError：无法传播不可迭代的对象。

我与specification 并不亲密，但我认为这可能是一个 Babel“错误”。

【讨论】：

enumerable 是.length 对吗？字符串，数组。在这种情况下，... 究竟做了什么？谢谢:)