ES6之 变量的解构赋值（二）

• 解构赋值

  • ES6 允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构( Destructuring ）
  • 解构赋值允许指定默认值。
  • 包含：
    • 数组的解构赋值
    • 对象的解构赋值
    • 字待串的解构赋值
    • 数值和布尔值的解构赋值
    • 函数参数的解构赋值

• 数组的解构赋值

  • 本质上，这属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

    //案例 1：
    //之前的写法：
    let a = 1;
    let b = 2;
    let c = 3;
    //现在使用解构赋值
    let [a, b, c] = [1, 2 , 3];
    //案例 2：模式匹配
    let [foo, [[bar], baz]] = [1 , [[2], 3]];
    foo  //1
    bar  //2
    baz  //3
    //案例 3：模式匹配
    let [ , , third] = ［"foo"，"bar"，"baz"］;
    third // "baz"
    //案例 4：模式匹配
    let [head, ...tail] = [1, 2, 3, 4];
    head //1
    tail // [2, 3, 4]
    //案例 5：是不完全解构，即等号左边的模式只匹配一部分的等号右边的数组
    let [x, y] = [1, 2, 3];
    x //1
    y //2
    //案例 6：解构赋值允许指定默认值
    let [foo = true] = [];
    foo // true
    let [x, y ='b'] = ['a'];  //x ='a', y ='b'
    

• 对象的解构赋值

  • 对象的解构与数组有一个重要的不同。

    • 数组的元素是按次序排列的，变量的取值是由它的位置决定的
    • 而对象的属性没有次序，变量必须与属性同名才能取到正确的值

    //案例 1：对象的解构赋值
    let {foo, bar} = {foo:"aaa", bar:"bbb"} ;
    foo //"aaa"
    bar //"bbb"
    
    //案例 2：等号左边的两个变量的次序与等号右边两个同名属性的次序不
    //一致，但是对取值完全没有影响，只要变量与属性同名才能取到正确的值。
    let {bar, foo} = {foo:"aaa", bar:"bbb"};
    foo // "aaa"
    bar // "bbb"
    
    //案例 3：变量没有对应的同名属性，导致无法取值，最后为undefined
    let {bar} = {foo:"aaa", bar:"bbb"};
    baz // undefined
    
    

  • 如果变量名与属性名不一致，必须写成下面这样：

    //案例 4：变量名与属性名不一致
    let{foo: baz} = {foo:"aaa", bar:"bbb"};
    baz //"aaa"
    
    //案例 5：变量名与属性名不一致
    let obj = {first:'hello', last:'world'};
    let {first: f, last: l} = obj;
    f //'hello'
    l //'world'
    
    //案例 6：
    let {foo: baz} = {foo:"aaa", bar:"bbb"};
    baz //"aaa"
    foo //error: foo is not defined
    

• 字待串的解构赋值

  const [a, b, c, d, e] = 'hello';
  a // "h"
  b // "e"
  c // "l"
  d // "l"
  e // "o"
  
  let {length:len} = 'hello';
  len //5
  

• 函数参数的解构赋值

  //案例 1：，函数add 的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y
  function add ([x, y]} {
  	return x + y;
  }
  add([1, 2]); //3
  
  //案例 2：
  [[1, 2], [3, 4]].map(([a, b]) => a + b);
  //[3, 7]
  

  • 函数参数的解构也可以使用默认值

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

• 解构赋值的用途

  • 交换变量的值

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

  • 从函数返回多个值

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

  • 函数参数的定义

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

  • 提取JSON 数据

    let jsonData = {id:42, status:"OK"}；
    let {id, status} = jsonData;
    console .log(id, status);//42 ,"OK"
    

  • 函数参数的默认值

    • 指定参数的默认值，这样就避免了在函数体内部再写var foo = config.foo II ’ default foo ’；这样的语句。

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