ES6 学习笔记(2) 变量的解构赋值

1. 数组的解构赋值

 let a = 1;
 let b = 2;
 let c = 3;
  // ES6 可以写成
 
 let [a,b,c] = [1,2,3];

1.1 “模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

  let [x,,y] = [1,2,3];
    x // 1 ;
    y // 3;
  let [head,...tail]=[1,2,3,4];
    head // 1 
    tail // [2,3,4]
  let [x,y,...z] = ['a'];
    x // 'a' ;
    y // undefined ;  如果结构不成功就是undefined
    z // [] ;

1.2 如果等号的右边不是数组（或者严格地说，不是可遍历的结构，那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

1.3 默认值

  let [x, y = 'b'] = ['a']; // x='a', y='b'
 // ES6 内部使用严格相等运算符（===）判断一个位置是否有值
  let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'  
  // 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
  let [x = 1, y = x] = [];     // x = 1 ; y = 1;
  let [x = 1, y = x] = [2]     // x = 2 ; y = 2; 
  let [x = y, y = 1] = [];     // ReferenceError: y is not defined

2. 对象的解构语法

2.1 对象的属性没有次序,变量名必须与属性名同名,才能取到正确的值

  let {foo , bar} = { foo : 'aaa' , bar :'bbb'}
  foo  //aaa
  bar  //bbb
  // 变量名与属性名不一致
  let { foo:baz} = {foo : 'aaa' ,bar : 'bbb'}
  baz // 'aaa' ;
  foo // error : foo is not defined 
  // 先找到同名属性,然后再赋给对应的变量 真正被赋值的是后者

2.2 对象解构也可以用于相套结构对象

 let obj = {
  p: [
      'Hello',
      { y: 'World' }
      ]
  };

  let { p: [x, { y }] } = obj;
  x // "Hello"
  y // "World"

2.3 对象的解构也可以指定默认值

    var { x =3} = {}
    x // 3
    var {x : y = 3} = { x: 5}
    y // 5

2.4 如果解构失败 变量的为undefined

    let {foo} = {bar : 'baz'};
    foo //undefined

2.5 如果解构模式是嵌套的对象,而且子对象所在的福属性不存在就会报错

    // 报错
    let {foo : {bar}} = {bar : 'baz'};

2.6 将一个已声明的变量用于解构赋值

  let x;
  {x} = { x : 1};
 // SynctaxError : synctax error 
 // 上面代码报错 因为会将{x} 解析成一个代码段 发生语法错误
  ( {x} = { x = 1}) 

2.7 对象的解构赋值,可以很方便的地将现有对象的方法,赋值到某个变量上

let { log, sin, cos } = Math;

2.8 由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构

  let arr = [1,2,3] ;
  let { 0 : first ,[arr.length - 1] : last} = arr ;
  first // 1
  last // 3

3 字符串的解构赋值

3.1 字符串可转换成一个类似于数组的对象

  const  [a,b,c,d,e] = 'hello' ;
  a // 'h'
  b // 'e'
  c // 'l'
  d // 'l'
  o // 'o'
  // 类数组都有一个length属性
  let {length : len} = 'hello' ;
  len // 5

4 数值和布尔值的解构赋值

4.1 解构赋值时如果等号右边是数值和布尔值,则会先转为对象

  let { toString : s } = 123 ;
  s === Number.prototype.toString  // true
  let {toString : s} = true ;
  s === Boolean.prototype.toString // true

解构的规则: 如果等号右边的值不是数组或对象,就先将其转化为对象;因为 undefined和null 无法转换成兑现,所以进行解构赋值会报错

5 函数参数的机构赋值

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

5.1 undefined 会触发函数参数的默认值.

[1, undefined , 3].map((x = 'yes') => x); // [1,'yes',3]

6 圆括号问题 以下三种解构赋值不得使用圆括号

3.1 变量声明语句

  // 全部报错
  let [(a)] = [1];
  let {x: (c)} = {};
  let ({x: c}) = {};

3.2 函数参数

  // 报错
  function f([(z)]) { return z; }
  // 报错
  function f([z,(x)]) { return x; }

3.3 赋值语句的模式

  // 全部报错
  ({ p: a }) = { p: 42 };
  ([a]) = [5];

7 用途

7.1 交换变量的值

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

7.2 从函数返回多个值

 // 返回数组
 function example() {
   return [1,2,3];
 }
 let [a,b,c] = example();
 //返回对象
 function example() {
   return { foo : 1 , bar : 2 };
 }
 let {foo ,bar} = example();

7.3 函数的定义

  // 参数是一个有序数值
  function f ([x,y,z]) {...}
  f([1,2,3]) ;
  // 参数是一个无序数值
  function f({x,y,z}) {}
  f({x = 1, z = 2, y = 3});

7.4 提取json数据

  let jsonData = { id : 12 , status : 'ok' , data : [1212,545]};
  let {id , status , data: number} = jsonData ;
  console.log(id ,status ,number) ; // 12  ,'ok' ,[1212,545]

7.5 函数参数的默认值

  function ajax( url , {async = true, id = 1});

7.6 遍历map解构

  const map = new map();
  map.set( 'first' , 'hello');
  map.set( 'last' , 'world');
  for (let [key ,value] of map) {
    console.log( key + 'is' + value)
    // first is hello
    // second is world
  };
  // 获取键名
  for (let [key] of map) {
    // ...
  }

  // 获取键值
  for (let [,value] of map) {
    // ...
  }

7.7 输入模块的指定方法

 const { SourceMapConsumer, SourceNode } = require("source-map");