正文
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");
