es6学习--变量的解构赋值

1.概念

     解构：按一定的方式，从数组或者对象中取值，对变量进行赋值。

     如果解构不成功，变量的值就等于undefined。

  2.数组解构 

let [a,b,c] = [1,2,3];

console.log(a); //1

let [foo,[bar,baz]] = [2,['aaa',4]];
console.log(foo) //2
console.log(bar) //aaa
console.log(baz) //4


let [x,y,...z] = ['a'];

console.log(foo) //a
console.log(bar) //undefined
console.log(baz) //[]

 

 解构允许指定默认值

  

let [a=true,b,c] = [,2,3];

console.log(a); //true

 

允许引用其他变量，该变量必须已经声明

const PI = 3.14

let [a=true,b=PI,c] = [,,3];

console.log(b); //3.14

 

3.对象的解构赋值

  对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

   

const {foo,bar,baz} = {baz:"123",foo:"biubiu",bar:"dududu"};
console.log(foo);  //biubiu
console.log(bar); //dududu
console.log(baz); //123

对象的解构赋值也可以嵌套，也可以指定默认值

  

4.字符串解构赋值

 

const [a,b,c] = 'biu';
console.log(a);  //b
console.log(b); //i
console.log(c); //u

 

5.数值和布尔值的解构赋值

  只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

  

let {toString:s} = 123;
let {toString:flag} = true;
console.log(s)  //[Function: toString]
console.log(flag) //[Function: toString]
 
console.log(s === Number.prototype.toString)      //true
console.log(flag === Boolean.prototype.toString)  //true

 

6.函数解构赋值

 

function move({x,y}={x:0,y:0}) {
    return [x,y];
}

console.log(move({x:3,y:8})) //[3,8]
console.log(move({x:3}))  //[3,undefined]
console.log(move({}))   //[undefined,undefined]
console.log(move())    //[0,0]

 

7.（）的问题

 建议只要有可能，就不要在模式中放置圆括号。

 

8. 用途

   交换变量的值

let x =1;
let y = 2;
[x,y] = [y,x];

从函数中返回多个值

 

function example () {
    return [1,2,3];
}

let [a,b,c] = example();
console.log(a)  //1
console.log(b)  //2
console.log(c)  //3

 

函数参数的定义

 

提取json数据

  

let jsonData = {
    id:42,
    status:"ok",
    data:[12,23]
};

let {id,status,data} = jsonData;

console.log(id,status,data);