ECMA Script 6_解构赋值_模式匹配

解构赋值

从数组中提取值,按照对应位置,对变量赋值

只要等号右边的值不是对象或数组,就先将其转为对象。

由于 undefined 和 null 无法转为对象,所以对它们进行解构赋值,都会报错

let [a, b, c] = [1, 2, 3];

只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值

应用:

  • const person = {
        name: 'RyenToretto',
        age: 22,
        sex: '男'
    };
    
    // 解构赋值
    const {name, age, sex} = person;    // 缺点: 必须同名属性
    
    console.log(name. age, sex);
    
    // 对比之前,明显好用了很多
    console.log(person.name, person.age, person.sex);
  • const arr = [1, 3, 5, 7, 9];
    
    const [a, b, c, d, e, f=-1] = arr;    // 是一组有序的赋值, 允许默认赋值 此时 f=-1,因为索引值为 undefined
    const [aa, , cc] = arr;    // aa=1, cc=5

     

  • 如果解构不成功,变量的值就等于undefined。
  • 以下会报错
  • //右边的值  转为对象以后不具备 Iterator 接口
    let [foo] = 1;
    let [foo] = false;
    let [foo] = NaN;
    let [foo] = undefined;
    let [foo] = null;
    
    let [foo] = {};    // {} 本身就不具备 Iterator 接口
  • 解构赋值允许指定默认值
  • let [foo = true] = [];
    foo    // true
    
    let [x, y = 'b'] = ['a'];    // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined];    // x='a', y='b'

注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值

所以,只有当一个数组成员严格等于undefined,默认值才会生效。

  • let [x = 1] = [undefined];
    x    // 1
    
    let [x = 1] = [null];
    x    // null

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值

  • function f() {
        console.log('aaa');
    }
    
    let [x = f()] = [1];    // 由于 x 可以取 1 ,所以函数 f() 不会被执行
  • 默认值可以引用解构赋值的其他变量,但该变量必须已经声明
  • let [x = 1, y = x] = [];      // x=1; y=1
    let [x = 1, y = x] = [2];    // x=2; y=2
    let [x = 1, y = x] = [1, 2];    // x=1; y=2
    let [x = y, y = 1] = [];      // Reference Error: y is not defined
  • 对象的解构赋值
  • let { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo    // "aaa"
    bar    // "bbb"

    实际上的完整写法: let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

  • 也可以指定 默认值,生效的条件是,对象的属性值严格等于 undefined
  • var {x = 1, y = 2} = {x: 1}
    console.log(x);    // 1
    console.log(y);    // 2
  • 很有用的,sin(90*Math.PI/180);
  • let { log, sin, cos } = Math;
    console.dir(Math);
    console.dir(sin);    // let {sin} = {sin:function(){}, cos:function(){}}
  • 由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构
  • let arr = [1, 2, 3];
    let {0 : first, [arr.length - 1] : last} = arr;
    console.log(first);     // 1
    console.log(last);     // 3
  • 字符串的解构赋值

此时,字符串被转换成了一个类似数组的对象

  • const [a, b, c, d, e] = 'hello';
    console.log(a);    // "h"
    console.log(b);    // "e"
    console.log(c);    // "l"
    console.log(d);    // "l"
    console.log(e);    // "o"
  • 类似数组的对象都有一个 length 属性,因此还可以对这个属性解构赋值 0
  • let {length : len} = 'hello';
    console.log(len);    // 5
  • 等号右边是数值布尔值则会先转为对象
  • let {toString: s} = 123;
    console.log(s === Number.prototype.toString); // true
    
    let {toString: s} = true;
    console.log(s === Boolean.prototype.toString); // true
  • 函数的 实参 与 形参 也可以进行 解构赋值
  • function add([x, y]){
        return x + y;
    }
    
    add([1, 2]);     // 3
  • 函数 参数默认值    对象传参        参数是一组无序的值
  • function add({name = "someone", age = -1} = {name:"kjf", age:"22"}) {
        return [name, age];
    }
    
    console.log(add({name:"Jack", age:"31"}));    // ["Jack", "31"]
    console.log(add({name:"Rose", age:"21"}));    // ["Rose", "21"]
    console.log(add({}));    // ["someone", -1]
    console.log(add());    // ["kjf", "22"]
  • 函数 参数默认值    数组传参        参数是一组有序的值
  • function person([name="someone", age=-1] = ["kjf", 22]) {
        return name + " :  " +age;
    }
    
    console.log(person(["Jack", 30]));    // 'Jack :  30'
    console.log(person(["Rose"]));    // 'Rose :  -1'
    console.log(person([]));    // 'someone :  -1'
    console.log(person());    // 'kjf :  22'

应用:

  • 交换变量的值
  • let x = 1;
    let y = 2;
    
    [x, y] = [y, x];
  • 快速提取 JSON 数据
  • let jsonData = {
       " id": 42,
        "status": "OK",
        "data": [867, 5309]
    };
    
    let { id, status, data: number } = jsonData;
    
    console.log(id, status, number);    // 42, "OK", [867, 5309]
  • for(let [attr1, attr2] of map){}

如此遍历   for(let [key, value] of map){}

任何部署了 Iterator 接口的对象,都可以用 for...of 循环遍历

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

 

posted @ 2018-12-14 22:02  耶梦加德  阅读(340)  评论(0编辑  收藏  举报