数组的解构赋值

 /* 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);//vconsole.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); // 1console.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 undefinedconsole.log(v1);//15

var {w2: w1 = 15} = {};//console.log(w2);//error: v2 is not undefinedconsole.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 和 lastconsole.log(first);// 6 下标为,0console.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,0console.log(move({m1: 10, m2: 20}));//10,20console.log(move());//0,0console.log(move({}));//0,0

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

console.log(move1({n1: 10}));//10,undefinedconsole.log(move1({n1: 10, n2: 20}));//10,20console.log(move1());//0,0console.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");