一,变量结构
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命令就不会报重复定义的错误,但是编译器会将左边的大括号理解为一个代码块,代码块是不能被赋值的
解决办法:将整个表达式放进小括号中,降级为一个表达式,就不会被认为是代码块了
嵌套:
对象解构也可以嵌套
前提是两边的模式一定要一样
嵌套赋值
对象解构默认值
默认值生效的条件是:对象的属性严格等undefined
4,字符串解构赋值
字符串在解构时,会将字符串转换为一个类数组
语法:
let[a,b,c,d] = 'hello';
console.log(a,b,c,d);//hell
在字符串转换的类数组中有一个属性叫做length,可以对这个属性进行解构赋值
5,数值和布尔值的解构赋值
使用对象解构的方案
如果等号右边是数值或布尔,左边是对象,那么数值或布尔会先被转为对象,再解构
解构的原则:
数组解构只要右边不是数组或字符串就会报错,
对象解构,右边不是对象就会先转为对象,然后解构
由于null和undefined无法转为对象,所以对他们进行解构都会报错
6.函数的解构赋值
语法:
function fun([x,y]){
console.log(x+y)
}
fun([1,2]);
fun函数的参数是一个数组,调用fun传入的也是一个数组,在传入的瞬间,实参与形参进行解构,将x和y两个变量进行了赋值
函数的解构可以使用默认值
函数参数是一个对象,通过对象解构得到x,y的值,如果解构失败使用默认值
7,解构的用途
1)交换变量值
let x = 1;
let y = 2;
[x,y] = [y,x];
console.log(x,y);// 2 1
2)从函数返回多个值
函数一次只能返回一个值,想要返回多个值只能将返回的值放入数组或对象
function fun(){
return {
a:1,
b:2
};
}
let{a,b} = fun();
console.log(a,b);//1 2
3)函数传参
//有序传参
function fun([a,b,c]){
console.log(a,b,c);
}
fun([1,2,3]);
//无序传参
function fun1({x,y,z}){
console.log(z,x,y);
}
fun1({x:3,z:1,y:2});
4)提取json数据
解构对提取数据尤其有用
5) 函数参数默认值
es6允许函数的参数设置默认值
二、函数扩展
1.函数参数默认值
直接将默认值写在形参之后
function fun(x,y='world') {
console.log(x,y);
}
fun('hello');//hello world
fun('hello','小明');//hello 小明
与解构配合使用
function fun({x,y=5}={}) {
console.log(x,y);
}
参数默认值的位置:
如果函数定义默认值,这个默认值一般会是尾参数(最后一个参数),如果非尾参数设置了默认值,其实上这个参数是无法省略的
函数参数的个数:
函数的length属性
函数名.length 是函数形参个数
函数形参个数不包含默认值的参数以及默认值后边的形参都不被包含,rest参数也不包含在length之中