js 解构赋值

解构赋值

• 解构赋值在内部使用 toObject () 把源数据转换为对象，即在对象解构上下文中，原始值会被当做对象，所以 undefined 和 null 不会被解构

  let [a,b] = ['aaa','bbb']
  //实际上它是这样的：
  let {0:a,1:b} = {0:'aaa',1:'bbb'}
  
  // 所以我们可以这么玩儿：
  const arr = ['aaa','bbb','ccc','ddd']
  let {1:num1,[arr.length-1]:num2} = arr // num1='bbb',num2='ddd'
  //注意：这里的[arr.length-1]并不是二次解构，而是在解构赋值中使用变量的写法
  

• 结构赋值被赋值的是后者，前者是匹配模式

  // foo 用于和对象中属性名匹配，baz则用于存放解构赋值拿到的属性值或者方法
  let { foo: baz } = { foo: 'aaa', bar: 'bb' };
  

• 结构赋值的对象结构可以取到继承的属性（即对象原型链上的属性），比如对Array进行解构，可以拿到Object原型上的方法apply

• 解构赋值可以指定默认值

  let {a='aaa',b} = {b:'bbb'} // a='aaa',b='bbb'
  // 这里判断是否使用默认值其实是判断a===undefined是否为真,比如：
  let {a='aaa',b} = {a:undefined,b:'bbb'} //a='aaa',b='bbb'
  

• 函数中也可以使用解构赋值

  // 这里fn设置了三个形参a,b,c
  function fn([a,b,c]){
      console.log(a,b,c)
  }
  // 这里不是说传递了一个数组作为函数的形参，而是相当于fn(1,2,3)
  fn([1,2,3]);
  

• 给函数设置默认值：

  function fn(a, { b = 'bbb', c = 'ccc' } = {}) {
    console.log(a, b, c)
  }
  // 第二个参数是一个对象，不传递这个参数，会默认给函数传递一个对象{b:'bbb',c:'ccc'}
  fn(1,{
    b:2,
    c:3
  }); // 1,2,3
  

• 可以在for-of中获得Map的键名

  const map = new Map()
  map.set('name',"张三")
  map.set('age',19)
  for (const [key,value] of map) {
    console.log(key,value);
  }
  

• 骚操作：交换变量的值

  let x = 1
  let y = 2
  ;[x, y] = [y, x] // 前面的分号，懒狗最后的倔强了
  console.log(x,y) //2,1
  // 顺手再来一个
  x ^= y
  y ^= x
  x ^= y
  console.log(x,y) // 1,2