js 扩展运算符你研究了吗？

今天看Es6的新特性，看到这个扩展运算，突然想试一试将数组展开后，放到对象中，因为数组展开后他只有单个值，但是在对象中都是键值对存在，就在想数组展开放在对象中是啥样的，果然值的研究，虽然我觉得没啥用，可能是我没有应用场景，事物存在定有道理。

扩展运算符

【 … 】扩展运算符能将 数组 转换为逗号分割的 参数序列

运算完之后它不能直接暴露在外边，必须使用数组，对象进行包裹，

或者直接console.log() 输出它

const arr2 = [1,2,3]
console.log(...arr)  // 输出结果为，1,2,3

将两个数组进行合并：

const arr1 = [1,2,3]
const arr2 = [4,5,6]
// 1\arr1 展开后是 1,2,3
// 2\arr2 展开后是 4,5,6
// 3\...arr1,...arr2  就是1,2,3,4,5,6
// 4\使用一个中括号将他们两个包裹起来就是一个新的数组，也就是所说的数组合并了, 如下代码
let newarr = [...arr1,...arr2]
console.log(newarr)// 输出结果为：[1,2,3,4,5,6]

直接使用console输出和使用 [] 包裹起来也说了，那么使用对象的形式将展开的元素包裹起来会是什么样的呢？

使用对象将其包裹或许没什么用处，但是得知道他的原理

演示：

// 首先声明一个数组
let arr = [1,2,3]
// 在声明一个字面量对象,将数组使用展开运算符放入对象中
let obj = {
    ...arr
}
// 此时输出obj 对象
console.log(obj)
// 输出结果为:
// { '0': 1, '1': 2, '2': 3 }

结论：

当使用对象将使用展开运算符的数组包裹以后，数组的索引值会变成对象中的键名，和数组中的每个元素形成键值对的形式，存放在所在对象中（仅能在字面量对象使用）

论证一下上个结论：

这次我们声明两个数组将他们两个都放到一个对象当中，使用展开运算符将他们两个展开

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let obj = {
    ...arr1,
    ...arr2
}
console.log(obj)
// 输出结果为 { '0': 4, '1': 5, '2': 6 }

因为数组展开之后，数组索引就成了他的键，第一个数组，和第二个数组索引都是从0开始的，第一个的数组展开后变成了{ ‘0’: 1, ‘1’: 2, ‘2’: 3}，第二个数组展开后是：{ ‘0’: 4, ‘1’: 5, ‘2’: 6 }，第二个数组放进对象后他们的键名（索引）跟第一个数组重复了，所以第二个数组就会覆盖掉第一个数组，所以结果为 { ‘0’: 4, ‘1’: 5, ‘2’: 6 }

进一步论证：

let arr1 = [1,2,3,7]
let arr2 = [4,5,6]
let obj = {
    ...arr1,
    ...arr2
}
console.log(obj)
// 输出结果为 { '0': 4, '1': 5, '2': 6 , '3': 7}

在第一个数组中多加一个值，这次7这个数索引为3，他在对象的键名为‘3’，而第二个数组中没有索引为3的值，所以没有被覆盖掉。

这样就验证了，数组展开放到对象中后，每个元素索引会变成他的键名