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