合理使用ES6 ... 让代码优雅一点吧

前言

在写代码时常常会使用...xx这种用法,有时叫它展开运算符,有时又叫剩余参数运算符，感觉有点乱，究其原因是自己理解不够清晰，下面简单记录一下🐳

一、 ...的两种含义

1. 剩余参数运算符

• 在定义函数的时候使用运算符(...)，会将传过来的多余参数合到一起

• 剩余参数永远是个数组，即使没有值，也是空数组

• 剩余参数只能作为最后一个参数

const fn = (num1, num2, ...nums) => {
  console.log(num1, num2, nums);
};
fn(1, 2); // 1 2 []
fn1(1, 2, 3, 4, 5, 6); // 1 2 [3,4,5,6]

2. 展开运算符

const arr = ["css", "js", "ts", "vue"];
console.log(...arr); // css js ts vue 

3. 展开运算符和剩余参数运算符的区别

• 剩余参数运算符：1,3,5 --> [1,3,5]
• 展开运算符：[1,3,5] --> 1,3,5

const diff = (...args) => {
  console.log(args); // 剩余参数运算符：[1,3,5]
  console.log(...args); // 展开运算符：1,3,5
};
diff(1, 3, 5);

二、 ...的用法举例

1. 数组

（1）数组复制

const citys = ["南京", "北京", "上海", "成都", "杭州"];
const citysCopy = [...citys];
console.log(citysCopy); // ["南京", "北京", "上海", "成都", "杭州"]

（2）数组去重

const colors = ["red", "orange", "yellow", "green", "orange"];
const onlyColors = [...new Set(colors)];
console.log(onlyColors); // ["red", "orange", "yellow", "green"]

（3）数组合并

const animals = ["cat", "dog"];
const seasons = ["spring", "summer"];
const animalsAndSeasons = [...animals, ...seasons];
console.log(animalsAndSeasons); // ["cat", "dog", "spring", "summer"]

（4）数组切片

const digitals = ["pc", "watch", "camera", "keyboard", "mouse"];
const [pc, ...otherDigitals] = digitals;
console.log(otherDigitals); // ["watch", "camera", "keyboard", "mouse"]

（5）数组作为参数进行传递

• 数组个数等于形参个数：一一对应
• 数组个数小于形参个数：缺少值为 undefined
• 数组个数大于形参个数：多的参数值被忽略
• 在调用函数的时候使用运算符(...)，会把原本聚拢在一起的数据拆分传递给各个参数

const phone1 = ["apple", "vivo", "oppo"];
const phone2 = ["apple", "vivo"];
const phone3 = ["apple", "vivo", "oppo", "华为"];
const mixer = (brand1, brand2, brand3) => {
  console.log(brand1, brand2, brand3);
};
mixer(...phone1); // 等于：一一对应，apple vivo oppo
mixer(...phone2); // 小于：缺少值为undefined，apple vivo undefined
mixer(...phone3); // 多于：多的参数值被忽略，apple vivo oppo

（6）将类数组转换为数组

const argsTransformArr = (...args) => console.log(args);
argsTransformArr("pineapple"); // ["pineapple"]
argsTransformArr(66, 88, 99); // [66, 88, 99]

2. 对象

（1）复制对象

const student = {
  name: "Jack",
  school: {
    class: "Software Engineering Class 2"
  }
};
const studentCopy = { ...student };
console.log(studentCopy); // {name: "Jack",school:{class: "Software Engineering Class 3"}}

（2）合并对象——属性各不相同

• 新对象包含了合并的对象的所有属性

const personName = { name: "nina" };
const personSex = { sex: "female" };
const personAge = { age: 18 };
const person = { ...personName, ...personSex, ...personAge };
console.log(person); // {name: "nina", sex: "female", age: 18}

（3）合并对象——包含相同属性

• 合并的对象中包含有同名的属性，则后面对象中的属性值覆盖前面的同名的属性值

const fruit1 = {
  name: "apple",
  color: "red"
};

const fruit2 = {
  name: "strawberry",
  weight: "20g"
};

const fruit = { ...fruit1, ...fruit2 };
console.log(fruit); // {name: "strawberry", color: "red", weight: "20g"}

（4）内部属性为对象进行展开——内部对象不会展开

const fruit3 = {
  detail: {
    name: "apple",
    size: "big",
    weight: "300g"
  }
};
console.log({ ...fruit3 });

（5）非对象展开

• 展开的是空对象，则仍然是空对象
• 展开的不是对象，则会自动将其转为对象，但是新创建的对象由于并不包含任何属性，故为空对象

console.log({ ...{} }); // {}

console.log({ ...1 }); // {}
console.log({ ...undefined }); // {}
console.log({ ...null }); // {}
console.log({ ...true }); // {}

3. 数组与对象合并使用

const tableData1 = {
  list: [
    { name: "张三", address: "南京" },
    { name: "李四", address: "北京" }
  ],
  pageSize: 10,
  pageNum: 1
};

const tableData2 = {
  list: [
    { name: "王五", address: "深圳" },
    { name: "赵六", address: "上海" }
  ],
  pageSize: 20,
  pageNum: 2
};

const allTableDate = {
  ...tableData1,
  list: [...tableData1.list, ...tableData2.list]
};
console.log(allTableDate);

4. 字符串

const name = "Song";
console.log(...name); // 直接展开，S o n g 
console.log([...name]); // 数组形式展开，["S", "o", "n", "g"]
console.log({ ...name }); // 对象形式展开，{0: "S", 1: "o", 2: "n", 3: "g"}

三、 注意点

1. 数组复制

• 通过运算符(...)拷贝数组，值类型的属性被深度拷贝了（用的不同对象），而引用类型的属性只是做了浅拷贝(复制的为引用地址，引用对象并未复制，即用的是同一个对象)

// 值类型
const citys = ["南京", "北京", "上海", "成都", "杭州"];
const citysCopy = [...citys];
citys[0] = "深圳";
console.log(citysCopy); // ["南京", "北京", "上海", "成都", "杭州"]

// 引用类型
let users = [
  {
    name: "小红",
    sex: "female"
  },
  {
    name: "小明",
    sex: "male"
  }
];
let usersCopy = [...users];
users[0].name = "小花";
console.info(usersCopy);

2. 对象复制

• 通过运算符(...)拷贝对象，值类型的属性被深度拷贝了（用的不同对象），而引用类型的属性只是做了浅拷贝(复制的为引用地址，引用对象并未复制，即用的是同一个对象)

let user = {
  name: "张三",
  sex: "男",
  address: {
    city: "北京"
  }
};
let clonedUser = { ...user };
user.name = "李四";
user.address.city = "四川";
console.log(user);
console.log(clonedUser);

如有错误或遗漏，欢迎批评指正🌝