主要分以下7个内容
- 数组的解析赋值
- 对象的解析赋值
- 字符串的解析赋值
- 函数参数的解析赋值
- 数字和布尔类型的解析赋值
- 解析赋值与圆括号
- 用途
数组的解析赋值
本质上,数组解析赋值的写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
let [x,y] = [1,2];
// let x = 1;
// let y = 2;
let [,,z] = [1,2,3];
// z = 3;
let [a,b,...c] = [1,2,3,4,5];
// a = 1, b = 2, c = [3,4,5];
let [q,w,e] = [1,2]
//q =1, w =2 ,e = undefined
let [a,[s,d]] = [1,[2,3]];
//a = 1, s =2 , d = 3
//默认值
let [z = 1,x = 2] = [4];
// z = 4, x =2
//当某一项的值严格等于undefined时,就会进行默认赋值
对象的解析赋值
对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
let {x, y } = {x : 1 , y :2};
//x = 1, y = 2
let {foo:a, bar:s } = {foo:2, bar:3}
// a = 2, s =3
//默认值
let {z = 3,x,c} = { x : 1, c:2};
//z = 3, x = 1 ,c =2
//同数组的解析赋值的默认值,当某一项的值严格等于undefined时,进行默认赋值
//嵌套
let { p, p:[
x,{y,z=3}
] } = {p:[1,{y:44} ] };
//p = [1,{y:44}]
//x = 1, y = 44, z =3
字符串的解析赋值
字符串的解析赋值会将字符串转换成数组,同时添加一个length属性
let [a,b,c] = "qwer";
let {length:T} = "qwer"
// a = 'q', b ='w', c = 'e', T= 4;
函数参数的解析赋值
function move([x,y]){
return [x,y]
}
move([1,2]); // [1,2]
function move2({x = 2 ,y = 3} ){
return [x,y]
}
move2({x:3 , y:4}); //[3,4]
move2(); // [2,3]
function move3({x,y} = {x:4,y:5}){
return [x,y]
}
move3({x:1,y:3} );//[1,3]
//注意move3和move2的区别
//虽然都是默认赋值,但是move2使用的是参数变量的默认赋值
//而move3使用的是参数的默认赋
//值,两者是不一样的
move2({x:5});// [5,4]
move3({x:5}); // [5,undefined]
move3({x:5,y:undefined});// [5,undefined]
//注意这里并不是解析构造赋值
move3({x:5,y});// [5,5]
//函数move2的参数是一个对象,通过对这个对象进行解构
//得到变量x和y的值。如果解构失败,x和y等于默认值。
//函数move2是为参数指定默认值,而不是为变量x和y指定默认值,
//所以会得到与前一种写法不同的结果。
数字和布尔类型的解析赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
解析赋值与圆括号
解构赋值虽然很方便,但是解析起来并不容易,因此尽量不要在模式中放置圆括号。
用途
- 交换值
let [x,y] = [1,2];
[x,y] = [y,x];
//x = 2,y=1
- 函数返回多个值
function math(){
//****code
return [sin,cos,tan]
}
let [sin,cos,tan] = math();
function example(){
return {
x:1,
y:2
}
}
let {x,y} = example();
- 函数参数的定义
//参数有序
function f([x,y,z]){...}
f([1,2,3]);
//参数无序
function t({x,y,z}){...}
t({z:2,x:1,y:3})
- 提取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]
- 函数参数默认值
指定参数的默认值,就避免了在函数体内部再写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
};
- 遍历 Map 结构
任何部署了 Iterator 接口的对象,都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
如果只想获取键名,或者只想获取键值,可以写成下面这样。
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}
- 输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");
本文参考文章如下