为什么扩展语法会将我的字符串转换为数组？

Question

为什么展开语法会将我的字符串转换为数组？

var v = 'hello';
var [, ...w] = v; // ["e", "l", "l", "o"]

为什么w 不是字符串？

Answer 1

Spread syntax（实际上是RobG 指出的标点符号）允许迭代散布到更小的位。由于字符串是可迭代的（它们在内部是字符数组，更具体地说是表示字符的有序整数序列），它们可以散布成单个字符。

接下来，对数组执行destructuring assignment 以解包和分组展开值。由于您用, 省略了字符数组的第一个元素并且没有分配引用，因此它丢失了，并且可迭代对象的 rest 被保存到w 中，分散到它的个体中部分，字符数组的单个字符。

---

此操作的具体语义由 ArrayAssignmentPattern 在ECMAScript 2015 Specification 中定义：[ Elision_opt AssignmentRestElement ] 产生式：

12.14.5.2 运行时语义：DestructuringAssignmentEvaluation

带参数值

[...]

ArrayAssignmentPattern : [省略_opt AssignmentRestElement ]

1. 让 iterator 为 GetIterator(value)。
2. ReturnIfAbrupt(迭代器)。
3. 让 iteratorRecord 为 Record {[[iterator]]: iterator, [[done]]: false}。
4. 如果存在省略，则
   一种。令 status 为以 iteratorRecord 作为参数执行 Elision 的IteratorDestructuringAssignmentEvaluation 的结果。
   湾。如果 status 是 abrupt completion，那么
   一世。如果 iteratorRecord.[[done]] 为 false，则返回 IteratorClose(iterator, status)。 ii.返回Completion(状态)。
5. 令 result 为以 iteratorRecord 作为参数执行 AssignmentRestElement 的IteratorDestructuringAssignmentEvaluation 的结果。
6. 如果 iteratorRecord.[[done]] 为 false，则返回 IteratorClose(iterator, result )。
7. 返回结果。

这里，Elision是指一个或多个逗号（,）展开时的省略元素，顾名思义，相当于省略的音节，AssignmentRestElement指到将接收传播和解构值的目标，在这种情况下为w。

这样做是首先从内部@@iterator 方法中获取对象的迭代器，然后逐步执行该迭代器，跳过@ 中的省略 产生式所指示的省略宽度的许多元素987654333@。完成后，它将逐步遍历 AssignmentRestElement 产生式的迭代器，并分配一个包含所有展开值的新数组——这就是w 的含义。它接收展开的单字符数组，解包以排除第一个字符。

从中获取迭代的@@iterator 方法是well-known Symbol，为一个对象更改它可以改变它的迭代方式，如Emissary's answer。具体来说，@@iterator method for String的默认实现如下：

21.1.3.27 String.prototype [@@iterator]()

当@@iterator 方法被调用时，它会返回一个迭代器对象 (25.1.1.2)，该对象迭代一个字符串值的代码点，将每个代码点作为一个字符串值返回。

因此，迭代器允许通过单个代码点或字符串中的字符进行迭代——因此扩展字符串将产生其字符的数组。

Answer 2

在 ES2015 中，扩展语法专门针对内部 String @@iterator 属性起作用 - 任何对象都可以通过将您自己的 iterator 或 generator / function* 分配给 obj[Symbol.iterator] 属性来以这种方式迭代。

例如，您可以更改新数组的默认行为...

const a = [...'hello'];
a[Symbol.iterator] = function* (){
    for(let i=0; i<this.length; ++i)
        yield `${this[i]}!`;
};
console.log([...a]);

您也可以更改字符串迭代器，但您必须显式创建一个String 对象。

Answer 3

Spread syntax 只能应用于可迭代对象。由于 String 是可迭代的，Spread 运算符可以正常工作并将您的 char array(String) 拆分为 char's。

您可以使用以下示例进行检查，该示例证明 String 默认情况下是可迭代的。

var s = 'test';    
for (k in s) {
  console.log(k);
}

ECMAScript6 规范甚至提到了这个特定的字符串案例。

扩展运算符

将可迭代集合的元素（如数组or even a string）传播到文字元素和单个函数参数中。

http://es6-features.org/#SpreadOperator

var str = "foo";
var chars = [ ...str ]; // [ "f", "o", "o" ]

值得一提的是，这是一种特殊情况，仅当您使用带有扩展运算符的直接字符串时才会发生。当你在数组中给出单个字符串时，整个数组将被视为可迭代对象，而不是里面的字符串。

var str = [ "hello" ,2 ];
var other = [  ...str ]; // [  "hello" ,2 ]

我知道上面的例子没有多大意义，只是为了传达这样一个事实，即在这种情况下 String 将被区别对待。

Answer 4

这里发生了两件事。

首先，您使用的是数组解构。这允许您获取一个可迭代对象并将其值分配给各个变量。

其次，您正在使用休息参数。这会将可迭代的任何剩余输出转换为数组。

所以你的字符串'hello'被迭代成它的单个字符，第一个被忽略（因为你省略了目标），然后剩下的字符被转换成一个数组并分配给w。

Answer 5

因为 javascript 中的字符串在某种程度上被视为字符数组。

例如，当你对一个字符串（比如hello）执行 for each 循环时，使用 lodash：

_.forEach('hello', function(i) {
    console.log(i)
})

它输出：

h
e
l
l
o

slice() 等函数也适用于字符串和数组。