ES6 变量的解构赋值

ES6允许 按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。结构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清楚。赋值解构已经看了好多遍了,但是每次记不住,今天来写一篇博客来加深印象

一、数组的解构赋值

   我觉得数组的解构赋值的作用就是能够同时给多个变量进行赋值,不用像以前那样需要些多个赋值表达式,下面是数组的解构赋值的基本用法

基本使用方法:

1.模式匹配:只要等号两边的模式相同,左边的变量就会被赋予对应的值
let [a,b,c]=[1,2,3];
console.log(a);         //1
console.log(b);         //2
console.log(c);         //3
//嵌套数组进行解构
let [foo,[[bar],baz]]=[1,[[2],3]];
console.log(foo);   //1
console.log(bar);   //2
console.log(baz)    //3       

 let [x,y,...z]=['a'];
 console.log(x); //a
  console.log(y); //undefined
  console.log(z); //[]
2.不完全解构:等号左边的匹配模式只匹配等号右边数组的一部分
let [x,y]=[1,2,3];
console.log(x);         //1
console.log(y);         //2
 ```

###### 3.只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值
例如:对于Set结构,也可以使用数组的解构赋值

let [x,y,z]=new Set(["a","b","c"]);
console.log(x); //a

###### 4.解构赋值允许指定默认值:只有当数组成员严格等于undefiend,默认值才会生效 

var [foo=true]=[];
console.log(foo); //true

var [x=1]=[undefined];
console.log(x); //1

var [y=1]=[null];
console.log(y); //null
```

二、对象的赋值解构

基本使用方法:

1、变量名必须与属性名同名
var {baz,foo,bar}={foo:"aaa",bar:"bbb"};
//上面是这个的简写形式:var {baz:baz,foo:foo,bar:baz}={foo:"aaa",bar:"bbb"};
console.log(baz);       //undefined;
console.log(foo);       //aaa
console.log(bar);       //bbb
2、变量名与属性名不同名  
var {foo:baz}={foo:"aaa",bar:"bbb"};
console.log(baz);      //变量是baz,模式是foo```

###### 3、对于letconst而言,变量不能重新声明,一旦赋值的变量以前生命过就会报错

let foo;
let {foo}={foo:1};//报错
###### 4.对象的默认值生效的条件是对象的属性值严格等于undefined
var {x=3}={x:undefined};
console.log(x); //3
var {y=3}={y:null};
console.log(y) //null

###### 5.已经声明过的变量用于赋值解构需要使用圆括号

var x;
({x}={x:1});

#### 三、字符串的解构赋值:字符串也可以进行解构赋值。因为字符串可以被转换成一个类似数组的对象

const [a,b,c,d,e]='hello';
console.log(a); //h
console.log(b); //e
console.log(c); //c
console.log(d); //d
console.log(e); //e
```
#### 四、变量赋值解构的用途

1.交换变量的值:不用像以前那样麻烦,还需要定义一个中间变量来存取变量的值
var x=1,y=2;
[x,y]=[y,x];
console.log(x);         //2
console.log(y);         //1
 ```
###### 2.从函数返回多个值

####### 2-1返回一个数组:es5中只能定义一个变量去存取返回的数组,然后通过这个变量去访问这个返回的数组的值,而现在可以直接访问这个数组的值  

function example(){
return [1,2,3];
}
var [a,b,c]=example();
console.log(a) //1####### 2-2返回一个对象:可以直接取得返回对象里的变量值   
function example(){
return {
foo:1,
bar:2
}
};
var {foo,bar}=example();
console.log(foo);    //1
```

扫描二维码关注公众号,回复: 483020 查看本文章
3、函数参数的定义

3-1参数是有次序的值    

function f([x,y,z]){
    console.log(x);     
}
f([1,2,3])      //1

3-2参数是一组无次序的值      

function f({x,y,z}){
    console.log(x);
}

f({z:3,y:2,x:3})        //3
4、提取json数据
var jsonData={
    id:42,
    status:"ok",
    data:[854,222]
}
let {id,status,data:number}=jsonData;
console.log(id,status,number);      //42,"ok",[854,222]
5、遍历Map结构
var map=new Map();
map.set('first','hello');
map.set('second','world');

for(let [key,value] of map){
    console.log(key+" is "+value)   
}

//first is hello
//second is world

总结:变量的解构赋值在项目中常常能够用到,他能够给我们带来许多的便利,可以提高工作效率。

标签:  ES6

猜你喜欢

转载自blog.csdn.net/weidong32768/article/details/80180519