15fj

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、对于let和const而言,变量不能重新声明,一旦赋值的变量以前生命过就会报错

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

 

  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

相关文章: