JavaScript---- ... 的使用，展开语法(Spre

语法：

函数调用：

myFunction(...iterableObj)

字面量数组构造或字符串：

[...iterableObj, '4', ...'hello', 6]

构造字面量对象时，进行克隆或者属性拷贝：

let objClone = { ...obj };

示例

1. 在函数调用时使用展开语法，等价于apply方法

console.log('函数调用时使用展开算法，等价于apply算法')
const numbers = [1, 2, 3]
console.log(this.sum(...numbers)) // 6
console.log(this.sum.apply(null, numbers)) // 6
let obj = [...numbers, 10000, ...numbers]
console.log(obj) // [1, 2, 3, 10000, 1, 2, 3]
console.log(this.concat(100, 200, 300, ...numbers)) // 100 -> 200 -> 300 -> 1 -> 2 -> 3


methods: {
    sum(x, y, z) {
      return x + y + z
    },
    concat(u, v, w, x, y, z) {
      let res = [u, v, w, x, y, z]
      return res.join(' -> ')
    }
  }

2. 在new关键词调用构造函数时

console.log('使用 new 关键字来调用构造函数时')
let dateFields = [1996, 1, 10]
let d = new Date(...dateFields) // Sat Feb 10 1996 00:00:00 GMT+0800 (中国标准时间)

3. 连接多个数组
   Array.concat 函数常用于将一个数组连接到另一个数组的后面。展开语法也可实现。

console.log('将 arr2 中所有元素附加到 arr1 后面并返回')
let arr1 = [0, 1, 2]
let arr2 = [3, 4, 5]
let arr3 = arr1.concat(arr2)
let arr4 = [...arr1, ...arr2]
console.log(arr3) // [0, 1, 2, 3, 4, 5]
console.log(arr4) // [0, 1, 2, 3, 4, 5]
console.log('将 arr2 中所有元素附加到 arr1 后面并返回')
arr1 = [0, 1, 2]
arr2 = [3, 4, 5]
Array.prototype.unshift.apply(arr1, arr2)
console.log('arr1 = ', arr1) // arr1 =  [3, 4, 5, 0, 1, 2]
var arr5 = [0, 1, 2]
var arr6 = [3, 4, 5]
arr5 = [...arr6, ...arr5]
console.log('arr5 = ', arr5) // arr5 =  [3, 4, 5, 0, 1, 2]

4. 构造字面量对象时使用展开语法

var obj3 = { foo: 'bar', x: 42 }
var obj4 = { foo: 'baz', y: 13 }
var clonedObj = { ...obj3 }
var mergedObj = { ...obj3, ...obj4 }
console.log('cloneObj : ', clonedObj) // cloneObj :  {foo: "bar", x: 42}
console.log('mergedObj : ', mergedObj) // mergedObj :  {foo: "baz", x: 42, y: 13}

可见，

key值冲突情况下，后者覆盖前者。

示例的完整代码

<template>
  <a></a>
</template>

<script>
export default {
  name: 'TestStudy',
  data() {
    return {}
  },
  created() {
    console.log('函数调用时使用展开算法，等价于apply算法')
    const numbers = [1, 2, 3]
    console.log(this.sum(...numbers))
    console.log(this.sum.apply(null, numbers))
    let obj = [...numbers, 10000, ...numbers]
    console.log(obj)
    console.log(this.concat(100, 200, 300, ...numbers))
    let dateFields = [1996, 1, 10]
    console.log('使用 new 关键字来调用构造函数时')
    let d = new Date(...dateFields)
    console.log(d)
    console.log('将 arr2 中所有元素附加到 arr1 后面并返回')
    let arr1 = [0, 1, 2]
    let arr2 = [3, 4, 5]
    let arr3 = arr1.concat(arr2)
    let arr4 = [...arr1, ...arr2]
    console.log(arr3)
    console.log(arr4)
    console.log('将 arr2 中所有元素附加到 arr1 后面并返回')
    arr1 = [0, 1, 2]
    arr2 = [3, 4, 5]
    Array.prototype.unshift.apply(arr1, arr2)
    console.log('arr1 = ', arr1)
    var arr5 = [0, 1, 2]
    var arr6 = [3, 4, 5]
    arr5 = [...arr6, ...arr5]
    console.log('arr5 = ', arr5)

    var obj3 = { foo: 'bar', x: 42 }
    var obj4 = { foo: 'baz', y: 13 }

    var clonedObj = { ...obj3 }
    var mergedObj = { ...obj3, ...obj4 }
    console.log('cloneObj : ', clonedObj)
    console.log('mergedObj : ', mergedObj)
  },
  methods: {
    sum(x, y, z) {
      return x + y + z
    },
    concat(u, v, w, x, y, z) {
      let res = [u, v, w, x, y, z]
      return res.join(' -> ')
    }
  }
}
</script>