ES6扩展运算符-数组扩展运算符

Question

当我运行以上代码后，为什么输出结果是{0:"a",1:"b",2:"c"}而不是{"a","b","c"}呢？
按道理，数组的扩展运算符不是把数组扩展成一系列以逗号分隔的元素吗？那为什么在o对象里扩展arr数组没有把arr扩展成以逗号分割的"a","b",c而是扩展成了{0:"a",1:"b",2:"c"}呢？
查了半天文档没找到答案，求大佬解答

下面有人回答说{"a","b","c"}什么格式都不是，然后我就改了下，下面修改后的贴图：

按道理，扩展后的结果不应该是{a,b,c}进而转化成{a:"zhangsan",b:"lisi",c:"wangwu"}吗？
为什么结果还是类数组对象{0: "zhangsan", 1: "lisi", 2: "wangwu"}？
很困惑啊~~

Answer 1

看过问题和其他人的答案后...其实你问题本身就是有问题的，所以一开始就从一个偏离的方向挖掘答案，自然无论怎样都无法自圆其说，给你自己一个令人信服的答案。

这里的...并不是数组扩展运算符，而是ES6的提案、ES7标准中的对象扩展运算符（spread）。js解释器从左至右解析，当看到{后边跟的是...时，它会把这个...解释为spread中的对象扩展运算符([后边跟的...才是数组扩展运算符)，那么此时将arr当做一个标准对象（类数组对象）来遍历展开，这样才出现了你看到的结果{a:"zhangsan",b:"lisi",c:"wangwu"}。

为了你能够更好的理解我所说的答案，送你一段我整理过的关于rest与spread运算符的比较笔记：

spread与rest运算符：

1. 等号表达式是典型的赋值形式，函数传参和for循环的变量都是特殊形式的赋值。解构的原理是赋值的两边具有相同的结构，就可以正确取出数组或对象里面的元素或属性值，省略了使用下标逐个赋值的麻烦。
2. 对于三个点号，三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。

3. 经验：

      • 在等号赋值或for循环中，如果需要从数组或对象中取值，尽量使用解构。
      • 在自己定义函数的时候，如果调用者传来的是数组或对象，形参尽量使用解构方式，优先使用对象解构，其次是数组解构。代码可读性会很好。
      • 在调用第三方函数的时候，如果该函数接受多个参数，并且你要传入的实参为数组，则使用扩展运算符。可以避免使用下标形式传入参数。也可以避免很多人习惯的使用apply方法传入数组。
      • rest运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免arguments对象的使用。
   

4. ES7中对象的spread与rest

Answer 2

看上图就应该能够明白了。扩展运算符只是展开，但是其最后的数据结构还是需要看外层包裹的是数组还是对象，如果是对象形式则是以数字为key的方式。

补充：
lz下面的提问，是因为扩展运算符进行计算时，获取到的arr对象就已经是["zhangsan","lisi","wangwu"]这样的。
扩展运算符其本身原理是对原有的数据结构进行迭代，并且将返回值以数组方式展开，那么将一个数组的结构用对象呈现出来的结果是什么呢。
这里还有一个需要理解的就是js中的数组其实也就是对象，只不过是一种具有自己独立属性和方法的特殊对象，其特点比如说：1.有自己的数组方法；2.其key值为从0开始的顺序数字；3.有length属性。

如果能够理解上一条，那么返回去看输出结果就明白了，其实上下的数据是一致的，只不过是在不同的对象类型下的不同呈现方式。

然后这里的输出内容并不符合类数组对象的定义，因为其缺少length属性，也就不能进行迭代，需要满足：其key值为从0开始的顺序数字，有length属性两个条件。

Answer 3

这个{"a","b","c"}是什么格式，既不是json对象，也不是数组，当然不对
你要是let o = [...arr]还是会输出["a","b","c"]

Answer 4

没毛病啊。
你的o接了个对象：{...arr}
你接个数组：[...arr]

Answer 5

数组也是对象，你可以把下标看成key，{...arr}这个是展开arr成object格式，object格式必须有key、value组成，此时arr的下标就充当了key。
请问楼主你见过{"a","b","c"}这样的数据类型吗。。。

Answer 6

把{...arr}换成[...arr]