本文主要是介绍了结构赋值的内容,每每看到解构赋值的内容,都会略有了解,但是很少有机会去学习解构赋值的所有知识,那么就让我带你把解构赋值的知识一网打尽(我全都要~)
一、数组的解构赋值
基本用法
// 为变量赋值 let [a,b,c] = [1,2,3]; a // 1 b // 2 c // 3 ———————————————————————————— // 使用嵌套数组进行解构赋值 let [foo,[[bar],baz]] = [1,[[2],3]]; foo // 1 bar // 2 baz // 3 ———————————————————————————— // 结构不成功的情况 let [foo] = []; let [bar,foo] = [1]; // 以上两种情况foo的值都会等于undefined 复制代码
不完全解构
即等号左边的模式只匹配等号右边数组的一部分。这种情况下,解构依然可以成功。
// 不完全解构 let [x,y,z] = [1,2,3]; x // 1 y // 2 复制代码
报错的情况
如果等号的右边不是数组(或者严格地说,不是可遍历的结构,那么将会报错)
// 报错 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {}; // 报错的原因是因为等号右边的值,本身或者转为对象后不具备Iterator接口 复制代码
事实上,只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值,如Set结构,Generator函数等。
默认值
// 解构赋值允许指定默认值 let [foo = true] = []; foo // true [x,y = 'b'] = ['a']; // x= 'a',y = 'b' —————————————————————————————————————— /* ES6内部判断一个位置是否有值是根据‘===’判断的,如果一个数组成员不严格等于undefined ,默认值是不会生效的。*/ let [x=1]=[null]; x // null // 如果一个数组成员是null,默认值就不会生效。 —————————————————————————————————————— // 默认值可以引用解构赋值的其他变量,但变量必须已经声明。 let [x = 1, y = x] = []; // x=1;y=1 let [x = 1, y = x] = [2]; // x=2;y=2 复制代码
二、 对象的解构赋值
基本用法
let {x , y} = {x:"aaa",y:"bbb"}; x // "aaa" y // "bbb" 复制代码
对象的解构与数组有一个重要的不同。在数组中,变量的取值由它的位置决定,在对象中,变量必须与属性同名。
// 如果变量名与属性名不一致,必须写成下面这样。 let {x:z} = {x:"aaa",y:"bbb"}; z // "aaa" /* 这种写法要注意:变量的声明和赋值是一体的,对于let和const而言,变量不能重新声明, 所以一旦复制的变量以前声明过,就会报错*/ let foo; let {foo}={foo:1}; /* 因为JavaScript引擎会将{foo}理解成一个代码块从而发生语法错误,故报错,解决方法 就是不讲大括号写在行首*/ ({foo}={foo:1}) 复制代码
默认值
// 对象的解构也可以指定默认值 let {x = 3} = {}; x // 3 let {x,y =5} = {x:1}; x // 1 y // 5 复制代码
三、 字符串的解构赋值
字符串也可以解构赋值,这是因为字符串被转换成了一个类似数组的对象。
基本用法
const [a,b,c,d,e,f] = 'juejin'; a // 'j' b // 'u' c // 'e' d // 'j' e // 'i' f // 'n' ———————————————————————————————————— // 还可以对字符串的length进行解构赋值 let {length: len} = 'juejin'; len // 6 复制代码
四 、 数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值或布尔值,则会先转为对象。
基本用法
let {toString:s} = 123; s === Number.prototyupe.toString // true /* 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象 由于undefined和null无法转为对象,所以会报错。*/ 复制代码
五、 函数参数的解构赋值
函数的参数也可以解构赋值。
基本用法
function add([x,y]){ return x + y; } add([1,2]) // 3 // 上面的代码中,函数add的参数实际上不是一个数组,而是通过解构赋值得到的变量x和y。 复制代码
默认值
函数参数的解构也可以使用默认值。
function move({x = 0, y = 0}) = { return [x,y]; } move({x:3,y:8}); // [3,8] move(); // [0,0] // 如果解构赋值失败,则x和y等于默认值。 复制代码
六、 解构赋值的用途
敲黑板啦~学会的知识要会用才行哦。变量的解构赋值用途有很多,下面列举几个主要的。
交换变量的值
[x,y] = [y,x] // 相比之前的写法,不用写临时变量啦,确实方便不少~ 复制代码
从函数返回多个值
// 返回一个数组 function example() { return [1,2,3]; } let [a,b,c] = example(); 复制代码
提取JSON数据
解构赋值对提取JSON对象中的数据尤其有用。
let jsonData = { id:43, status:"OK", data:["loveyou","juejin"] } let {id,status,data:string} = jsonData; console.log(id,status,string); // 43 "OK" ["loveyou", "juejin"] 复制代码
遍历Map结构
Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值非常方便。
let map = new Map(); map.set('first','loveyou') map.set('first','juejin') // 获取键名 for (let [key] of map){ //... } // 获取键值 for (let [,value] of map){ //... } 复制代码
最后
⚽本文总结了解构赋值的语法以及用途~
⚾如果这篇文章对你有帮助的话,麻烦点赞收藏哟~