【ES6】变量的解构赋值

【ES6】变量的解构赋值

• ​​一、什么叫解构赋值？​​
• ​​二、解构赋值有哪些分类？写法？​​

• ​​1)对数组的解构赋值​​
• ​​2)对对象的解构赋值​​
• ​​3)对字符串的解构赋值​​
• ​​4)对数值和布尔值的解构赋值​​
• ​​5)对函数参数的解构赋值​​

• ​​三、解构赋值的应用​​
• ​​查看更多ES6教学文章：​​
• ​​参考文献​​

一、什么叫解构赋值？

        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标准入门（第2版）》