数组的解构赋值
/* 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");