ES6,全称为ECMAScript6。ES6与js的关系是:前者是后者的规格,后者是前者的实现。换句话说,ES是js的国际化版本,js是ES的子集。 |
一、什么叫解构赋值?
ES6允许按照一定的模式,从数组或者对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
而解构赋值的写法大多采用模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的 ES6允许按照一定的模式,从数组或者对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
而解构赋值的写法大多采用模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
大家不要怕,下面我们用通俗易懂的方式来说:先看例子
//普通赋值 var a=1; var b=2; var c=3; //ES6的解构赋值 var [a,b,c]=[1,2,3]; //输出都是: console.log(a);//1 console.log(b);//2 console.log(c);//3
模式匹配就是说,等号两边的格式要相同,它才可以赋值。
解构的意思是,对数组或者json格式的变量里面的内容进行分解,然后再赋值。类似于提取里面的值。
二、解构赋值有哪些分类?写法?
【1】对数组
的解构赋值
【2】对对象
的解构赋值
【3】对字符串
的解构赋值
【4】对数值和布尔值
的解构赋值
【5】对函数参数
的解构赋值
下面一一讲解每个类型的用法和写法:
1)对数组的解构赋值
/******************标准写法格式******************/ var [a,b,c]=[1,2,3]; //输出: console.log(a);//1 console.log(b);//2 console.log(c);//3 /******************嵌套数组写法格式******************/ var [a,[b,c]]=[1,[2,3]]; //输出: console.log(a);//1 console.log(b);//2 console.log(c);//3 /******************含定义数组写法格式******************/ var [a,...b]=[1,2,3,4]; //输出: console.log(a);//1 console.log(b);//[2,3,4] /******************不完全解构写法格式******************/ var [x,y]=[1,2,3]; //输出: console.log(x);//1 console.log(y);//2 let [a,[b],d]=[1,[2,3],4]; //输出: console.log(a);//1 console.log(b);//2 console.log(d);//4 /******************解构失败写法示例******************/ var [x]=[]; //输出: console.log(x);//undefined var [a,b]=[1]; //输出: console.log(a);//1 console.log(b);//undefined
【注】:上例中x、b解构失败,即x、b在模式匹配中未匹配到值,所以它们的值为undefined。
2)对对象的解构赋值
【注】:在对象解构赋值中,左边式中的变量的顺序不需要按照右边属性的排列顺序。
标准写法:
let {id:a,val:b}={id:"ko33",val:2}; //输出: console.log(a);//"ko33" console.log(b);//2 //解释:这里是对变量a、b赋值。 //首先,左右两边先按照模式匹配来取指,然后左边取得的值分别赋给a、b
简单写法:
let {id,val}={id:"ko33",val:2}; //输出: console.log(id);//"ko33" console.log(val);//2
下面的例子中,id是模式,a才是变量:
var {id:a}={id:"ko33",val:2}; //输出: console.log(a);//"ko33" console.log(id);//SyntaxError:Duplicate delaration "id"
下面的例子中,同一变量不能被let定义两次,var可以(参考let的用法):
//错误 let id; let {id}={id:"ko33"}; //正确 var id; var {id}={id:"ko33"}; //正确 var id; ({id}={id:"ko33"}); //正确 var a; var {id:a}={id:"ko33"};
还可以将js已定义的对象中的属性提取出来:
let {log,sin,cos}=Math; //Math是js自带的对象
3)对字符串的解构赋值
这里字符串被转化成为了对象。
const [a,b,c,d]="eggs"; //输出: console.log(a);//"e" console.log(b);//"g" console.log(c);//"g" console.log(d);//"s"
这里字符串被转化成了对象,js的字符串对象含有属性length。
let {length:len}="eggs"; //输出: console.log(len);//4
4)对数值和布尔值的解构赋值
let {toString:s}=123; let {toString:s}=true;
5)对函数参数的解构赋值
【注】:先解释一下默认值问题
默认值的标准形式:
var [x=1,y=x]=[1,2];
输出是x=1;y=2
解释: 首先,看左边的式子,x的默认值为1,y的默认值为x。只有当x、y在右边对应的模式为undefined的时候,才会取默认值。
取指流程: 先看x对应的右边的模式为1,所以x=1,左边的默认值不去管它,再看y对应的右边的模式为2,所以y=2,左边y的默认值不去管它。
函数参数的解构赋值分为3种:
(1)普通类型:
function add([x,y]){ return x+y; } add([1,2]);//3
(2)指定函数变量的默认值类型:
function move({ x = 0 , y = 0 }= {} ){ return [x,y]; } move({x:3,y:8});// [3,8] move({x:3});// [3,0] move({});// [0,0] move();// [0,0]
(3)指定函数形参的默认值类型:
function move({x,y}= {x:0 , y:0} ){ return [x,y]; } move({x:3,y:8});// [3,8] move({x:3});// [3,undefined] move({});// [undefined,undefined] move();// [0,0]
三、解构赋值的应用
【1】😮 交换两个变量的值
通常情况下,交换变量a、b的值,需要三句代码:
tmp=a;
a=b;
b=tmp;
现在ES6的语法只需要:
[a,b]=[b,a];
【2】😮 函数返回多个值
返回数组:
function test(){ return [1,2,3]; } var [a,b,c]=test();
返回数组:
function test(){ return { id:"hcq", val:"lxz" }; var {id,val}=test();
【3】😮 提取JSON数据
【注】😒 这里的变量data属于模式,不会被提取 😮
var jsonData= { id: 23, status: "alright", data:[596,69] } let {id,status,data:num}=jsonData;
查看更多ES6教学文章:
参考文献
阮一峰 《ES6标准入门(第2版)》