引言:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰----技术胖
1.数组的解构赋值
一般数组的解构
let [a,c,d] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);
控制台输出:
这里要求要求等号两边的结构要一致,如下会出错
let [a,[c,d]] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);
控制台输出:
正确写法如下:
let [a,[c,d]] = [1,[2,3]];
console.log(a);
console.log(b);
console.log(c);
含有默认值的数组解构
let [a,b='World'] = ['hello'];
console.log(a+b);
控制台输出
undefined和null的区别
let [a,b='World'] = ['hello',undefined];
console.log(a+b);
控制台输出:
let [a,b='World'] = ['hello',null];
console.log(a+b);
控制台输出:
由此可知,unfinished是没有这个东西,所以程序会输出b的默认值,而null是一个对象,值取null,所以可以被赋值为null
此外啊,我们一般数组解构还可以以下面的形式来用,就是说直接传数组作为参数
let arr = [1,3,4];
function add([a,b,c]){
console.log(a+b+c);
}
add(arr);
还可以这样,之所以要加上(...)是因为这样表示的是取数组的值,而不是数组,记住解构的格式要一一对应!
let arr = [1,3,4];
function add(a,b,c){
console.log(a+b+c);
}
add(...arr);
2.对象的解构赋值
对象的解构赋值与数组不一样,不像数组是按照顺序赋值的,对象的解构是根据变量解构的,看代码
let {first,second} = {second:1,first:'i am first'}
console.log(first);
console.log(second);
控制台输出:表明不是按照顺序的,而是按照变量名解构
需要注意的是,若是变量先定义再解构,以下格式会出错
let obj;
{obj} = {obj:'i am a obj'};
console.log(obj);
编译出错:
正确写法是:
let obj;
({obj} = {obj:'i am a obj'});
console.log(obj);
控制台输出:
当我们从后台接收到一个json数据时,我们可以通过对象的解构将,将数据传送到函数里面执行,直接作为参数,看代码
let json ={
a:1,
b:2
}
function fun({a,b}){
console.log(a+b);
}
fun(json)
还可以加上默认值呢,这里给b加一个默认值
let json ={
a:1,
b:undefined
}
function fun({a,b=3}){
console.log(a+b);
}
fun(json)
3.字符串的解构赋值
let [a,b,c,d,e,f] = 'string';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
控制台输出:表明会将字符赋给变量。