变量解构 1.什么是解构 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) 2.数组解构赋值 语法: let[a,b,c]=[1,2,3]; console.log(a,b,c); 从数组中取值,按照对应位置,对变量取值,这种写法属于'匹配模式',只要等号两边模式相同,左边的变量就会被赋予相对应的值 如果解构失败,变量的值就等于undefined 不完全解构:等号左边的模式只匹配一部分右边的数组,解构依然成功 如果等号右边不是数组:会报错 解构赋值允许默认值:只有解构失败也就是严格等(===)undefined,默认值才会生效 如果默认值是一个表达式,那么这个表达式是惰性求值,即只有在用到时才能执行 默认值可以引用解构赋值的其他变量,但是被引用的变量必须已经被定义 3.对象解构赋值 语法: let{a,b}={a:'aaa',b:'bbb'}; console.log(a,b);//aaa bbb 顺序: 数组解构按照对应位置关系,但是对象解构变量的取值没有顺序,变量必须与属性同名,才能解构成功 变量与属性不同名: let{a:c}={a:'aaa',b:'bbb'}; console.log(c);//aaa 机制:先找到同名属性,然后再赋值给对应的变量,真正被赋值的是后者,而不是前者 变量同名:报错 es6规定了let和const命令定义的变量不能重复定义,解构赋值也是一样的 如果没有第二个let命令就不会报重复定义的错误,但是编译器会将左边的大括号理解为一个代码块,代码块是不能被赋值的,解决办法:将整个表达式放进小括号中,降级为一个表达式,就不会被认为是代码块了 eg: let a; ({a}={a:3});//使用小括号,降级为一个表达式 console.log(a); 嵌套:对象解构也可以嵌套 前提两边的模式一定要一样 eg:
let obj={ first:[ 'hello', {firstChild:'world'} ] }; let {first:[x,{firstChild:y}]}=obj; console.log(x,y);//hello world
嵌套赋值 对象解构默认值 默认值生效的条件是:对象的属性严格等undefined
对象的解构其实是下边模式的简化版 a和c是模式,b和d是变量 let{a:b,c:d}={a:'aaa',c:'ccc'}; console.log(b,d);//aaa ccc
4.字符串解构赋值 字符串在解构时,会将字符串转换为一个类数组 语法: let[a,b,c,d]='hello'; console.log(a,b,c,d);//h e l l
在字符串转换的类数组中有一个属性叫做length,可以对这个属性进行解构赋值 let{length:len}='hello'; console.log(len);//5
5.数值和布尔值的解构赋值 使用对象解构方案 如果等号右边是数值或布尔,左边是对象,那么数值或布尔会先被转为对象,在解构 解构的原则:数组解构只要右边不是数组或字符串就会报错,对象解构,右边不是对象就先转为对象,然后解构 由于null和undefined无法转为对象,所以对他们进行的解构都会报错
// 数值与布尔解构 let {toString:ts}=123; console.log(ts); //分为两步走 //1.将数值转为对象 console.dir(new Number(2123)); //2.将对象与对象进行解构,如果数值对象的模式与左边的模式不对应会去原型对象中查找 console.log(ts===Number.prototype.toString);//true
6.函数的解构赋值 语法: function fun([x,y]) { console.log(x+y); } fun([1,2]); fun函数的参数是一个数组,调用fun传入的也是一个数组,在传入的瞬间,实参与形参进行了解构,将x和y两个变量进行了赋值 函数的解构可以使用默认值 函数参数是一个对象,通过对象解构,得到x,y的值,如果解构失败使用默认值 7.解构的用途 1) 交换变量值
eg:
let x=1; let y=2; [x,y]=[y,x]; console.log(x,y);//2,1
2) 从函数返回多个值 函数一次只能返回一个值,想要返回多个值只能将返回值放入数组或对象返回,有了解构方法就可以轻松的取出这些值 3) 函数传参 4) 提取json数据 解构对提取json尤其有用 5) 函数参数默认值 es6允许函数的参数设置默认值