1.解构赋值
什么是解构赋值呢?
官方的解释:ES6允许按照一定模式,从数据和对象中提取值,对变量进行赋值,这被称为解构。
单纯的文字上来看,可能不太好理解。但是呢,其实通过例子来学习的话还是比较简单的。下面来看看例子:
let arr = [4,5,6];
//如果呢,按照以前的写法,我们可能会这样写
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
//如果数组特别长的话,我们这样写就会相当的麻烦
//但是如果我们使用es6的话就会简单很多、
let [a,b,c] = arr;
console.log(a)
console.log(b)
console.log(c)
通过上述ES6的写法,是不是变得简单了很多呀。这样的写法结构看起来清晰易懂,而且还省去了麻烦的变量声明和赋值,这种叫做数组的解构赋值。
关于数据的解构赋值,需要注意以下几点:
1.解构赋值是可以嵌套的
简单的说呢,就是数组里面还可以是数组或者是其他对象什么的。就像上面我们举的栗子,只是一个简单的一维数组。下面的这个栗子就是多维的数组,但是解构赋值的方式也还是可用的。
let arr = [4,5,[8,9]];
let [a,b,[e,d]] = arr;
console.log(a) //4
console.log(b) //5
console.log(e) //8
console.log(d) //9
2.数组的不完全解构
简单的说,就是等号两边的数组的长度是不一样的。那么在这种情况中,匹配的变量就会赋值成功。没有对应上的变量的值就是undefined。举个栗子来解释会更简单一些。
var [a,b,c] = [4,6];
console.log(a) //4
console.log(b) //6
console.log(c) //undefined
//如果是这样呢,又会是什么样的结果呢
var [g,h] = [4,6,3];
console.log(g) //4
console.log(h) //6
//当然,并没有什么特别的结果 --
3.允许设置默认值
解构赋值中是可以设置默认值的。当变量没有赋值成功的时候,变量的值就是默认值,当赋值成功的时候,变量的值等于数组对应位置的值。
let [a,b = 20] = [5];
console.log(a) //5
console.log(b) //20 这里使用的就是默认值噢
let [a,b = 20] = [5,35];
console.log(a) //5
console.log(b) //35
前面讲的都是数组的解构赋值,接下来说一下对象的解构赋值
其实,对象的解构赋值和数组的解构赋值比较相似的。但是还是有一些区别的。接下来看看下面的两段代码:
var { a,b,c} = {"a":1,"b":2,"c":3};
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为3
var { a,b,c } = {"a":1,"c":3,"b":2};
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为3
有没有发现有什么不同的地方呢? 没错!b和c的位置交换了一下,但是上面两段代码中b和c的值还是一样的。这说明了什么问题。在对象的解构赋值中,左边变量的名字和右边属性的名字能一一对应,即使位置不一样,解构赋值还是可以成功的。如果变量找不到与其名字相同的属性,就会赋值不成功。下面就是一个不成功的栗子:
var { a } = {"b":2};
console.log(a);//结果:a的值为undefined
下面说说对象解构赋值需要注意的几点:
1.对象的解构赋值也是可以嵌套的
这就是对象解构赋值最简单的栗子:
let obj = {a:{b:100}};
let {a:{b}} = obj;
console.log(b) //100
字符串的解构赋值
下面就是解构赋值中比较基础的用法:
var [a,b,c,d,e,f] = "我就是老司机";
console.log(a);//我
console.log(b);//就
console.log(c);//是
console.log(d);//老
console.log(e);//司
console.log(f);//机
上面说了这么多解构赋值的用法,下面看看实际中我们是如何使用的。
1.交换变量的值
以前我们的写法都是通过第三个变量来实现两个变量的值进行互换,就像下面这个栗子
var x = 1;
var y = 2;
var z = x;//第三个变量临时存放x的值
x = y; //把y的值赋给x;
y = z; //把z的值赋值给y;
console.log(x); //结果:x为2
console.log(y); //结果:y为1
上面是我们常规的写法,下面是我们ES6的写法
var x = 1;
var y = 2;
[x,y] = [y,x];
通过ES6的写法,代码是不是简单了很多,而且结构更加的清晰明了。
2.提取函数的多个返回值
这个作用在日常的开发中用的还是比较多的,而且真的很方便。
let JSON = {
name:'小白',
id:131106015,
city:'青岛',
chengji:[{
math:100,
English:50
}]
};
//在平常的开发中,ajax请求是非常的常见的,这是我们以前的写法
getStudentScout().then(res =>{
name:res.body.JSON.name;
id:res.body.JSON.id;
city:res.body.JSON.city;
chengji:res.body.JSON.chengji;
})
//但是使用解构赋值的方式,会简单很多
getStudentScout().then(({body:{JSON:{name,id,city,chengji}}}) =>{
name:name;
id:id;
city:city;
chengji:chengji;
})
3.定义函数的参数
function demo({a,b,c}){
console.log("姓名:"+ a);
console.log("身高:"+ b);
console.log("体重:"+ c);
}
demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});
通过这种写法, 很方便就能提取JSON对象中想要的参数,例如案例中,我们只需要获取实参中的:a,b,c,而不需要关其他的参数,比如:d或者其他更多的参数。
4.函数参数的默认值
传统的参数默认值的实现方式是,先判断该参数是否为undefined,如果是代表没传,需要手动给它赋一个值,如:
function demo(a){
var name;
if(a === undefined){//判断参数书否是否传值
name= "张三"; //没传,赋默认值
}else{
name= a;
}
console.log(name);
}
但是有解构赋值就会简单很多。
function demo({name="张三"}){
console.log("姓名:"+name);//结果:姓名:张三
}
demo({});
通过设置函数参数的默认值,将代码简化了很多。
总结
解构赋值给我们一种新的变量赋值方式,主要可以利用数组解构赋值和对象解构赋值。它的用途包括:交换变量值,提取函数返回值,函数参数定义,默认值设定等等,都给我们编程带来便利,在未来的代码中会见到越来越多人使用这个新特性。
本文参考了微信公众号‘web前端教程’,喜欢的同学可以关注一下。里面的ES6和VUE的教程 都讲的通俗易懂。