Vue中点点点(...)用法

Vue中点点点(…)用法

官方文档说明:
这个是扩展运算符。
扩展语法。对数组和对象而言，就是将运算符后面的变量里东西每一项拆下来。
这个东西可以在函数定义的地方使用，比如使用func(…args)将函数传入的参数都放到args数组里。

除此之外：
普通用法：
1.连接数组

    let a = [{ name1: "1" }, { name2: "2" }, { name3: "4" }, { name4: "5" }];
    let b = [{ name7: "7" }, { name5: "5" }, { name8: "4" }, { name9: "9" }];
    let c = [...a, ...b];
    console.log(c); 

打印结果：

2.连接对象

    let a = { name1: "1", name2: "2", name3: "4", name4: "5" };
    let b = { name7: "7", name2: "5", name8: "4", name9: "9" };
    let c = {...a, ...b};
    console.log(c);

打印结果：
连接后的对象经过了去重
去重结果为：由后面的对象属性替换前面的对象属性

！特殊用法可以作为对象或数组的深拷贝使用

1.浅拷贝情况：

    let a = {
      name1: "1",
      name2: "2",
      name3: "4",
      name4: "5",
    };
    let b = a;
    console.log(b); //{ name1: "1",name2: "2",name3: "4",name4: "5"};
    b.name1 = "1111";
    console.log(b); //{ name1: "111",name2: "2",name3: "4",name4: "5"};
    console.log(a); //{ name1: "111",name2: "2",name3: "4",name4: "5"};

2.使用“点点点”深拷贝:

    let a = {
      name1: "1",
      name2: "2",
      name3: "4",
      name4: "5",
    };
    let b = {...a};
    console.log(b); //{ name1: "1",name2: "2",name3: "4",name4: "5"};
    b.name1 = "1111";
    console.log(b); //{ name1: "111",name2: "2",name3: "4",name4: "5"};
    console.log(a); //{ name1: "1",name2: "2",name3: "4",name4: "5"};