解构赋值

数组的解构赋值

• ES 6 中支持的数组解构赋值 var [a,b,c] = [4,5,6];、let [foo,[xxx,yyy]]=[45,[12,46]];,只须要等号两边的模式相同，变量就会被赋予对应的值。
• 如果解构不成功，变量的值就等于undefined。
• 不彻底解构的状况，也能够进行赋值let [x,y] = [1,2,6]; 或者 let [x,y,z] = [4,[4,9,3],8,9];。
• 若等号的右边，不是可遍历的结构，使用解构赋值时候将会发生报错。
• 只要某种数据具备Iterator接口均可以以数组的形式进行解构赋值。例如let [x,y,z] = new Set ([4,5,6]);，以及ES 6 中的generator函数，也能够做为解构表达式的赋值内容。

解构赋值中的默认值

• let [foo = true,ofo = false ,mobike = "fake"] = [456,undefined,null];只有当一个数组成员被赋予的值全等于undefined，默认值才会生效。(注：这里的null并不全等于undefined,因此mobike的值为null)。
• 解构赋值中的默认值赋值表达式，只有在“有必要(即所赋值为undefined)”的时候才会执行。例如let [foo = fun()] = ["Crazy-Web-2"];这里的fun()方法将不被触发。
• 使用默认值时，所赋值的内容，必须是已被声明的变量 例如let [x=y,y=1]=[];，给x赋默认值的时候，仍未被声明。

对象的解构赋值

• 变量名称的次序不要求与赋值名称的次序相同，只要键名相对应便可。
• 对于var {foo: baz } = { foo:"aaa",bar :"bbb"};,被赋值的是变量baz而不是键名foo
• 使用let关键字进行对象解构赋值的时候，一样须要注意不能重复声明。
• 和数组的相似，对象的解构赋值，也能够进行复杂的嵌套结构
• 若解构失败，变量的值被赋予undefined
• 若使用解构的方式，将一个已经声明的某个变量赋值，例如:({x} = { x : x:1});，须要十分注意，要使用圆括号括起来。
• 能够利用已知的JS内置对象的键名，去获取JS内置对象的方法，例如let { log, sin, cos } = Math;，可以，直接使用log()、sin()、cos()便可。

字符串的解构赋值

• 字符串通常能够当作一个相似数组同样的对象，可将数组中的元素内容按序赋值。
• 也能够将字符串对象的属性用于赋值，例如，类数组对象都有一个length属性，字符串对象也不列外。

其余基本对象的解构赋值

结构的规则通常是，若等号右边不是数组或者JS对象，就将其转化为对象，而后将其当作一个完整的对象，进行对象属性的对照，再进行结构赋值。

• Number对象、Boolean对象都会解构成通常的对象，拥有对象的基本属性。
• undefined和null都没法转换为JS对象，因此对他们进行结构赋值的时候，都会报错。

函数参数的解构赋值

• 函数调用进行传参的时候，也是一个解构赋值的过程
• 在给解构赋值设定默认值的时候，要与函数设定默认值的状况区分开来：
  例如

  function move({x = 0, y = 0} = {}) {
  
  return [x, y];
  
  }
  

  

  与

  function move({x, y} = { x: 0, y: 0 }) {
  
  return [x, y];
  
  }
  

  

  区别就是在于，调用时传入的值为undefined时，解构默认值会被触发，而函数参数默认值不会。

使用解构赋值的注意点

• 在声明语句中，不可以使用圆括号
• 函数设定参数的时候，也不可以使用圆括号
• 赋值语句中，不能将整个模式，或嵌套模式中的一层，放在圆括号之中。

  // 报错
  
  ({ p: a }) = { p: 42 };
  
  ([a]) = [5];
  
  [({ p: a }), { x: c }] = [{}, {}];
  

  


解构赋值的用途

• 不借助中间值，实现两个变量值互换。

  let x = 1;
  
  let y = 2;
  
  [x, y] = [y, x];
  

• 从函数中返回多个值，可使用返回数组/对象的形式，例如return [1, 2, 3];或return { foo: 1, bar: 2 };，return获得的函数值，能够直接赋值给解构相相似的对象。
• 使用JS对象传参的时候，能够实现变量无序传参。function f({x, y, z}) { ... }; f({z: 3, y: 2, x: 1});
• JSON数据实现“键名”快速提取，由于JSON对象和JS对象的结构彻底一致，可使用键名直接提取，不须要像之前同样进行循环操做。
• 能够实现模拟函数参数值

  let x = 1;
  
  jQuery.ajax = function (url, {
  
  async = true,
  
  beforeSend = function () {},
  
  cache = true,
  
  complete = function () {},
  
  crossDomain = false,
  
  global = true,
  
  // ... more config
  
  }) {
  
  // ... do stuff
  
  };
  

• 遍历Map结构(有待补充)