数组中的“...”（三个点）符号代表什么意思？

Question

我不明白...符号具体是什么意思。

我尝试使用Babel做了一个简单的示例来理解它(查看示例)，但似乎：

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

BUT：这段代码是做什么用的？因为输出结果(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 表示省略了中间的部分，只显示前面和后面的 18 个字符。

- Aral Roca

---

这意味着没有任何作用，因为“扩展运算符”不能与数字一起使用。也许你想要的是...'18'，它是'1', '8'。 - user4227915

@WashingtonGuedes 或者 ...[18]！ - Alex Booker

你对这段代码有什么期望？（为什么呢...） - Amit

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

我期望一个数组从1到18，但我在示例中看到使用相同的示例来将数组初始化 ...1000000。 - Aral Roca

然后你看到了一个错误的例子。这根本不是运算符的作用。 - Amit

Answer 1

...(展开运算符)的工作方式是返回从索引0到索引length-1的每个值：

例如：

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

这将与以下内容相同：

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

---

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

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

或者使用map：

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

希望有所帮助。

- user4227915

---

在我看来，这相当不相关。OP想要理解“...”，而不是创建一个从1到18的数组。 - Amit

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

嗯！不错。现在清楚了。非常感谢！ - Aral Roca

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

“...展开运算符的工作方式是返回从索引0到索引length-1的每个值。”这并不完全正确。展开“运算符”（它不是运算符）适用于任何可迭代的值。可迭代的值是具有[Symbol.iterator]属性的值。 - Felix Kling

Answer 2

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

你不能在 数值 中使用 ...。只有在类似于 数组、字符串 或 对象 的可迭代对象中才能使用 ...。

值得注意的是，Tracur - 另一个转译器 - 在处理相同代码时会抛出错误：

TypeError: 无法展开不可迭代的对象。

我不熟悉规范，但我认为这可能是Babel的“错误”。

- Alex Booker

---

可枚举对象使用 .length 属性，比如字符串和数组。那么在这些情况下 ... 究竟是做什么的呢？谢谢 :) - Aral Roca