js扩展运算符的使用

一、对数组进行操作（es6）

1.进行数组的复制

{
    // 扩展运算的使用
    // 进行数组的复制
    const list = ['a','b','c','d'];
    let list1 = [...list];
    // 数组头部进行插入
    list.unshift('e');
    console.log(list1); // ['a', 'b', 'c', 'd']
}

2.进行数组的分割

{
  // 扩展运算的使用
  // 进行数组的复制
  const list = ["a", "b", "c", "d"];
  // 进行数组的分割,其中,为占位符
  let [, ...list1] = list;
  console.log(list1); // ['b', 'c', 'd']
}

3.传递方法的参数（对数组进行展开）

{
  // 扩展运算的使用
  let list = ["a", "b"];
  function concat(a,b){
      return a+b;
  }
  console.log(concat(...list)); // ab
}

二、对对象的操作（es8）

1.配置准备

• 需要下载插件，进行转码为es5

npm install babel-plugin-transform-object-rest-spread

• .babelrc文件进行配置

{
  // 配置用于转换当前代码的规则集
  "presets": ["es2015"],
  // 转码es8语法
  "plugins": ["transform-object-rest-spread"]
}

2.可以复制对象

{
  const obj = {
    name: "Jack",
    age: 18,
  };
  // 复制对象
  let obj1 = { ...obj };
  console.log(obj1); // {name: 'Jack', age: 18}
}

3.设置对象默认值

{
  const obj = {
    name: "Jack",
    age: 18,
  };

  // 设置对象默认值
  let obj2 = { ...obj, name: "Marry" };
  console.log(obj2); // {name: 'Marry', age: 18}
}

4.合并对象

{
  const obj = {
    name: "Jack",
    age: 18,
  };
  
  // 对象进行合并
  const addr = { addr: "zh" };
  let obj3 = { ...obj, ...addr };
  console.log(obj3); // {name: 'Jack', age: 18, addr: 'zh'}
}

注意

• 扩展运算符对对象的复制是浅拷贝（复制的是对象指针），意味着源对象一旦改变，当前拷贝的对象也会改变。
• 对简单类型的拷贝不会产生影响，源对象改变不会对当前对象产生影响。