JS解构和 ... 运算符

1. 数组解构 使用方括号[]

• 1.1 交换变量

  let a = 1;
  let b = 2;
  let c = 3;
  [a, b, c] = [c, b, a];
  console.log(a);  // 3
  console.log(b);  // 2
  console.log(c);  // 1
  

• 1.2 访问数组中的元素

  const arr = [,3];
  const [a = '1'] = arr;
  const [, b = '2'] = arr;
  console.log(a);  // 1
  console.log(b);  // 3
  

2. 对象解构 使用花括号{}

• 将对象内部属性提取到外部变量

  const obj = {a: 1, b: 2};
  const {a, b} = obj;
  console.log(a); // 1
  console.log(b); // 2
  

  function add({a, b}) {
  	return a+b;
  }
  let res = add({a: 1, b:2});
  console.log(res); // 3
  

  注意：
  如果花括号在等式的右边，那么你正在声明一个对象
  const obj = { a: 1, b: 2 }

  如果花括号在等式左边，那么你正在解构一个对象
  const { res } = obj;

  如果属性名称与对象中的变量名称相同，可以使用属性简写：

  // 这里写两遍 name
  const name = 'Michael'
  const person1 = { name: name }
  
  // 对象属性简写
  const person2 = { name }
  

3. 数组解构和对象解构的区别

• 数组使用[] ; 对象使用{}
• 对象具有属性名称，解构时需使用这些属性名称
• 数组按顺序排列解构

4. ... 运算符

• 展开（扩展）运算符（Spread）
  展开运算符用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中；

  如果用于数组，数组里面的所有对象都是基础数据类型，将所有基础数据类型重新拷贝到新的数组中。

  const arr1 = [1,2,3,4]
  console.log([...arr1, 4,5,6])   // [1, 2, 3, 4, 4, 5, 6]
  console.log([ 4,...arr1,5,6])   // [4, 1, 2, 3, 4, 5, 6]
  

  如果用于对象，则同名属性会被覆盖

  const obj1 = {d:4, a:1, b:2 }
  console.log({...obj1, c:3, d:4})   // {d: 4, a: 1, b: 2, c: 3}
  console.log({ c:3,...obj1, d:4})   // {c: 3, d: 4, a: 1, b: 2}
  

  展开运算符对对象实例的拷贝是一种浅拷贝，基础数据会复制一份，但是引用数据拷贝的是它的引用

  const obj1 = {a:1, b:2, c:{age: 3}}
  const obj2 = {...obj1}
  obj2.a = 2
  obj2.c.age = 100
  console.log(obj1) // {a: 1, b: 2, c: {age: 100}}
  console.log(obj2) // {a: 2, b: 2, c: {age: 100}}
  

  展开运算符可以和解构赋值结合起来

  const [a, ...b] = [1,2,3,4,5]
  console.log(a)   // 1
  console.log(b)   // [2, 3, 4, 5]
  

  展开运算符可以把字符串拆成数组

  console.log([..."hello"]) //  ["h", "e", "l", "l", "o"]
  

• 剩余运算符（Rest）

  const arr1 = [1,2,3]
  const [a, ...b] = arr1
  console.log(a)   // 1
  console.log(b)   // [2, 3]
  

  const obj1 = {a:1, b:2, c:3}
  const {a, ...obj2} = obj1
  console.log(obj2)   // {b: 2, c: 3}
  console.log(a)      // 1
  

  剩余运算符只能放在最后：

  const arr1 = [1,2,3,4,5]
  const [...b,a] = arr1 // 报错： Rest element must be last element
  const [a,...b,c] = arr1  // 报错： Rest element must be last element
  

注意：
... 可以叫展开运算符（Spread）,也可以叫剩余运算符（Rest）
具体这个操作符是什么意思，要看怎么使用它。
剩余运算符一般用在函数的参数里，这样可以让函数的参数不受限制。

function fun(item, ...arr) {
	console.log(item) // 1
	console.log(arr)  // [2, 3, 4]
}
fun(1,2,3,4)

持续更新。。。想到啥补点啥