es6—变量的解构赋值

数组的解构赋值

 /* 1、变量的解构赋值：
        * 数组的元素是按次序排列的，变量的取值由它的位置决定；
        * 从数组和对象中提取值，对变量进行赋值，这被称为解构;
        * 属于“模式匹配”，只要等号两边的模式相同,左边的变量就会被赋予对应的值
        * */
        let [a, b, c] = [1, 2, 3];
        let [x, [v], [y]] = [1, [2], []];//就算是赋了空值，方括号也不能少，否则报错
        console.log("y:" + y);//结果是undefined即解构不成功
        console.log("x:" + x);//1
        let [m, [n], w] = [1, [2, 3], 4];
        console.log(m);//1
        console.log(n);//2 等号左右两边的模式不尽相同，但是也解构成功，称之为不完全解构
        console.log(w);//4

        /*2、数组默认值问题*/
        let [foo = true] = [];//判断位置是否有值，没有值或者为undefined,即可赋值成功
        console.log(foo);//true

        let [foo1 = true] = [undefined];//判断位置是否有值，没有值或者为undefined,即可赋值成功
        console.log(foo1);//true
        /*以上两个例子可看出，只有数组成员严格等于undefined时默认值才生效，但是null不等于undefined*/

        let [foo2 = true] = [null];
        console.log(foo2);//null

        let [foo4 = true] = [false];
        console.log(foo4);//false

        let [x1 = 1, y1 = x1] = [];
        console.log(x1, y1);//x1=1,y1=1

        let [x2 = 1, y2 = x2] = [2];
        console.log(x2, y2);//x2=2,y2=2

        let [x3 = 1, y3 = x3] = [1, 2];
        console.log(x3, y3);//x3=1,y3=2

        let [x4 = y4, y4 = 1] = [];
        console.log(x4, y4);//x4=undefined,y4=1(x4用y4做默认值时，y4还没有声明。解构失败)
      },
      clickObj: function () {
        /*3、变量的解构赋值:
        * 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
        * */
        let {foo, bar} = {bar: 'a', foo: 'v'};//只要
        console.log(foo);//v
        console.log(bar);//a

        let {baz} = {foo: 'aaa', bar: 'bbb'};
        console.log(baz);//undefined.解析的对象中没有对应的属性名,即解析失败

        const {log} = console;//将console.log赋值到log变量
        log('hello') // hello

        let {foo1: ba} = {foo1: 'aaa', bar: 'bbb'};
        console.log(ba);// "aaa"
        //console.log(foo1) // error: foo1 is not defined
        /*说明：foo1是匹配的模式，ba才是变量。真正被赋值的是变量ba，而不是模式foo1。*/

        /*模式与变量*/
        let obj = {
          p: [
            'Hello',
            {y: 'World'}
          ]
        };
        //let { p: [x, { y }] } = obj;//p作为模式时本身不赋值
        let {p, p: [x, {y}]} = obj;//p作为变量时也将参与赋值
        console.log(x); // "Hello"
        console.log(y); // "World"
        console.log(p);//["Hello",{y: "World"}]  不完全解构，hello相当于逗号前面的p,x没有解构出来

        /*多重解构赋值*/
        const node = {
          loc: {
            start: {
              line: 1,
              column: 5
            }
          }
        };
        let {loc, loc: {start}, loc: {start: {line}}, loc: {start: {column}}} = node;
        /*说明：一个逗号表示本次赋值结束，loc即该输出start包含start开始的内全部内容；
        *  loc: { start }：表示loc为模式，start为变量，输出的就是start中 line和column的值
        *  loc: { start: { line }}：表示loc和start都是模式不是变量，不会赋值，输出line的值
        *  loc: { start: { column }}：道理同上
        * */
        console.log(line); // 1
        console.log(loc);  // Object {start: Object} 即：{start:{line: 1, column: 5}}
        console.log(start);// Object {line: 1, column: 5} 即：{line: 1, column: 5}
        console.log(column);// 5

        /*对象默认值(对比以下三个例子)*/
        var {message: msg = 'Something went wrong'} = {message: 12};
        console.log(msg);//Something went wrong
        //console.log(message);//error: message is not undefined

        var {v2: v1 = 15} = {v1: 10};
        //console.log(v2);//error: v2 is not undefined
        console.log(v1);//15

        var {w2: w1 = 15} = {};
        //console.log(w2);//error: v2 is not undefined
        console.log(w1);//15

        /*语法注意点：*/
        let b;
        //{b} = {b: 1};//报错，大括号开头的话变量 b 将被解析为大代码块
        ({b} = {b: 1});//正确，小括号开头就行

        /*数组中对象属性的解构*/
        let arr = [6, 66, 666];
        let {0: first, [arr.length - 1]: last} = arr;//此处是把数组中数据的下标赋值给 first 和 last
        console.log(first);// 6 下标为,0
        console.log(last);// 666 解释：arr.length=3，3-1=2，下标为2
      },
      clickStr: function () {
        const [a, b, c, d, e] = 'hello';
        /*
        a // "h"
        b // "e"
        c // "l"
        d // "l"
        e // "o"
        */
        let {length: len} = 'hello';
        /*
        len // 5
        */
      },
      clickBool: function () {
        /*数值或布尔类型解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。undefined 和 null 除外*/
        let {toString: str} = 123;
        str === Number.prototype.toString;

        let {toString: str1} = true;
        str1 === Boolean.prototype.toString // true
      },
      clickParame: function () {
        function move({m1 = 0, m2 = 0} = {}) {//m1,m2在此为变量，且指定默认值，若是解构失败，也可得到默认值
          return [m1, m2];
        }

        console.log(move({m1: 10}));//10,0
        console.log(move({m1: 10, m2: 20}));//10,20
        console.log(move());//0,0
        console.log(move({}));//0,0

        function move1({n1, n2} = {n1: 0, n2: 0}) {//m1,m2在此为参数，且指定默认值，若是解构失败，则结果不一样
          return [n1, n2];
        }

        console.log(move1({n1: 10}));//10,undefined
        console.log(move1({n1: 10, n2: 20}));//10,20
        console.log(move1());//0,0
        console.log(move1({}));//undefined,undefined

        [1, undefined, 3].map((p = 'yes') => p);//若是传参数传递的undefined则可取到默认值
        // 1,yes,3

      },
      attention:function () {
        //let [(a)] = [1];
        //let {x: (c)} = {};
        //let ({x: c}) = {};
        //let {(x: c)} = {};
        //let {(x): c} = {};
        //let { o: ({ p: p }) } = { o: { p: 2 } };
        /*以上六个语句都报错，都是变量声明语句，模式不能使用圆括号*/

        //function f([(z)]) { return z; }
        //function f([z,(x)]) { return x; }
        /*以上两个语句属于函数参数变量声明，不能带圆括号*/

        //({ p: a }) = { p: 42 };
        //([a]) = [5];
        /*整个模式都放在圆括号更加错得离谱*/
        //[({ p: a }), { x: c }] = [{p:2}, {c:5}];//模式部分也不能有部分圆括号包裹
        //console.log(a)//a id not undefined

        /*正确使用圆括号的情况*/
        [(b)] = [3]; // 正确，模式是数组的第一个成员，与模式无关
        ({ p: (d) } = {}); // 正确，p属于模式
        [(parseInt.prop)] = [3]; // 正确，与圆括号，没有模式之说
      },
      doing:function () {
        /*1、交换变量的值*/
        let x = 1;
        let y = 2;
        [x, y] = [y, x];//交换变量的值

        /*2、从函数返回多个值或对象*/
        // 返回一个数组
        function example() {
          return [1, 2, 3];
        }
        let [u, i, o] = example();
        console.log(u);
        console.log(i);
        console.log(o);
        // 返回一个对象
        function example() {
          return {
            fo: 1,
            br: 2
          };
        }
        let { fo, br } = example();

    /*3、将函数的参数和值一一对应起来*/
        // 参数是一组有次序的值
        function f([x, y, z]) { }
        f([1, 2, 3]);

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

      /*4、提取json数据*/
        let jsonData = {
          id: 42,
          status: "OK",
          data: [200, 401]
        };

        let { id, status, data: number } = jsonData;
        console.log(id, status, number);// 42, "OK", [200, 401]

      /*5、指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。*/
        jQuery.ajax = function (url, {
          async = true,
          beforeSend = function () {},
          cache = true,
          complete = function () {},
          crossDomain = false,
          global = true,
          // ... more config
        } = {}) {
          // ... do stuff
        };

/*6、遍历map结构*/
        const map = new Map();
        map.set('first', 'hello');
        map.set('second', 'world');

        /*Map 结构原生支持 Iterator 接口*/
        for (let [key, value] of map) {//获取键值对，包括添加进来的str
          console.log(key + " is " + value);//first is hello  second is world
        }

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

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

      /*7、输入模块的指定方法*/
        const { SourceMapConsumer, SourceNode } = require("source-map");
      }
    }

对象的解构赋值

/*3、变量的解构赋值:
* 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
* */
let {foo, bar} = {bar: 'a', foo: 'v'};//只要
console.log(foo);//v
console.log(bar);//a

let {baz} = {foo: 'aaa', bar: 'bbb'};
console.log(baz);//undefined.解析的对象中没有对应的属性名,即解析失败

const {log} = console;//将console.log赋值到log变量
log('hello') // hello

let {foo1: ba} = {foo1: 'aaa', bar: 'bbb'};
console.log(ba);// "aaa"
//console.log(foo1) // error: foo1 is not defined
/*说明：foo1是匹配的模式，ba才是变量。真正被赋值的是变量ba，而不是模式foo1。*/

/*模式与变量*/
let obj = {
  p: [
    'Hello',
    {y: 'World'}
  ]
};
//let { p: [x, { y }] } = obj;//p作为模式时本身不赋值
let {p, p: [x, {y}]} = obj;//p作为变量时也将参与赋值
console.log(x); // "Hello"
console.log(y); // "World"
console.log(p);//["Hello",{y: "World"}]  不完全解构，hello相当于逗号前面的p,x没有解构出来

/*多重解构赋值*/
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
let {loc, loc: {start}, loc: {start: {line}}, loc: {start: {column}}} = node;
/*说明：一个逗号表示本次赋值结束，loc即该输出start包含start开始的内全部内容；
*  loc: { start }：表示loc为模式，start为变量，输出的就是start中 line和column的值
*  loc: { start: { line }}：表示loc和start都是模式不是变量，不会赋值，输出line的值
*  loc: { start: { column }}：道理同上
* */
console.log(line); // 1
console.log(loc);  // Object {start: Object} 即：{start:{line: 1, column: 5}}
console.log(start);// Object {line: 1, column: 5} 即：{line: 1, column: 5}
console.log(column);// 5

/*对象默认值(对比以下三个例子)*/
var {message: msg = 'Something went wrong'} = {message: 12};
console.log(msg);//Something went wrong
//console.log(message);//error: message is not undefined

var {v2: v1 = 15} = {v1: 10};
//console.log(v2);//error: v2 is not undefined
console.log(v1);//15

var {w2: w1 = 15} = {};
//console.log(w2);//error: v2 is not undefined
console.log(w1);//15

/*语法注意点：*/
let b;
//{b} = {b: 1};//报错，大括号开头的话变量 b 将被解析为大代码块
({b} = {b: 1});//正确，小括号开头就行

/*数组中对象属性的解构*/
let arr = [6, 66, 666];
let {0: first, [arr.length - 1]: last} = arr;//此处是把数组中数据的下标赋值给 first 和 last
console.log(first);// 6 下标为,0
console.log(last);// 666 解释：arr.length=3，3-1=2，下标为2

字符串的解构赋值

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

布尔数值类型的解构赋值

/*数值或布尔类型解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。undefined 和 null 除外*/
let {toString: str} = 123;
str === Number.prototype.toString;

let {toString: str1} = true;
str1 === Boolean.prototype.toString // true

参数的解构赋值

function move({m1 = 0, m2 = 0} = {}) {//m1,m2在此为变量，且指定默认值，若是解构失败，也可得到默认值
  return [m1, m2];
}

console.log(move({m1: 10}));//10,0
console.log(move({m1: 10, m2: 20}));//10,20
console.log(move());//0,0
console.log(move({}));//0,0

function move1({n1, n2} = {n1: 0, n2: 0}) {//m1,m2在此为参数，且指定默认值，若是解构失败，则结果不一样
  return [n1, n2];
}

console.log(move1({n1: 10}));//10,undefined
console.log(move1({n1: 10, n2: 20}));//10,20
console.log(move1());//0,0
console.log(move1({}));//undefined,undefined

[1, undefined, 3].map((p = 'yes') => p);//若是传参数传递的undefined则可取到默认值
// 1,yes,3

写法格式注意点

//let [(a)] = [1];
//let {x: (c)} = {};
//let ({x: c}) = {};
//let {(x: c)} = {};
//let {(x): c} = {};
//let { o: ({ p: p }) } = { o: { p: 2 } };
/*以上六个语句都报错，都是变量声明语句，模式不能使用圆括号*/

//function f([(z)]) { return z; }
//function f([z,(x)]) { return x; }
/*以上两个语句属于函数参数变量声明，不能带圆括号*/

//({ p: a }) = { p: 42 };
//([a]) = [5];
/*整个模式都放在圆括号更加错得离谱*/
//[({ p: a }), { x: c }] = [{p:2}, {c:5}];//模式部分也不能有部分圆括号包裹
//console.log(a)//a id not undefined

/*正确使用圆括号的情况*/
[(b)] = [3]; // 正确，模式是数组的第一个成员，与模式无关
({ p: (d) } = {}); // 正确，p属于模式
[(parseInt.prop)] = [3]; // 正确，与圆括号，没有模式之说

用途：

pasting

/*1、交换变量的值*/
        let x = 1;
        let y = 2;
        [x, y] = [y, x];//交换变量的值

        /*2、从函数返回多个值或对象*/
        // 返回一个数组
        function example() {
          return [1, 2, 3];
        }
        let [u, i, o] = example();
        console.log(u);
        console.log(i);
        console.log(o);
        // 返回一个对象
        function example() {
          return {
            fo: 1,
            br: 2
          };
        }
        let { fo, br } = example();

    /*3、将函数的参数和值一一对应起来*/
        // 参数是一组有次序的值
        function f([x, y, z]) { }
        f([1, 2, 3]);

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

      /*4、提取json数据*/
        let jsonData = {
          id: 42,
          status: "OK",
          data: [200, 401]
        };

        let { id, status, data: number } = jsonData;
        console.log(id, status, number);// 42, "OK", [200, 401]

      /*5、指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。*/
        jQuery.ajax = function (url, {
          async = true,
          beforeSend = function () {},
          cache = true,
          complete = function () {},
          crossDomain = false,
          global = true,
          // ... more config
        } = {}) {
          // ... do stuff
        };

/*6、遍历map结构*/
        const map = new Map();
        map.set('first', 'hello');
        map.set('second', 'world');

        /*Map 结构原生支持 Iterator 接口*/
        for (let [key, value] of map) {//获取键值对，包括添加进来的str
          console.log(key + " is " + value);//first is hello  second is world
        }

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

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

      /*7、输入模块的指定方法*/
        const { SourceMapConsumer, SourceNode } = require("source-map");