js中（...）用法

1，深拷贝一个对象

image.png
如上图所示，obj和tmp是完全两个独立的对象，互不影响
2，数组复制
image.png
3，函数形参中的使用
image.png
这里的…args，是对test函数中多余的参数进行收集，并转换成数组的形式进入函数体中

4，一种特殊情况，当数组里面套对象的时候，我们用[…]依然是无法深拷贝一份数据的，这个时候我们就要自己写递归函数了

案例：

image.png

解决办法：自己写一个函数

function copySelf(obj) {
  var newobj = obj.constructor === Array ? [] : {};
  if (typeof obj !=="object") {
    return;
  }
  for (var iin obj) {
    newobj[i] =typeof obj[i] ==="object" ? copySelf(obj[i]) : obj[i];
  }
  return newobj;

image.png

5.合并

//数组的合并
var arr1 = ['hello']
var arr2 =['world']
var mergeArr = [...arr1,...arr2]
mergeArr  // ['hello','world']
// 对象分合并
var obj1 = {name:'Steven'}
var obj2 = {height:181}
var mergeObj = {...obj1,...obj2}
mergeObj // {name: "Steven", height: 181}

6.字符转数组用

var arr1 = [...'hello']
console.log(arr1)// ["h", "e", "l", "l", "o"]

7.函数传参

function f(a,b,c,d,e){ }
var args = [2,3]
f(1,...args,4,...[5]) //...args是将2，3添加进去，...[5]是将5添加进去

当我们想把数组中的元素迭代为函数参数时

function f(x,y,z){}
var args = [1,2,3]
f(...args)