定义:ES6允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构赋值。

如:
//
定义变量 let a = 1; let b = 2; let c = 3; 解构写法: let [a, b, c] = [1, 2, 3]; console.log(a); //1 console.log(c); //3

对象的解构赋值:

let {foo} = {
    foo: "222",
    bar: "adsafe"
};
//console.log(foo);    //222


let {foo:baz}
= { foo: 12345 }; //console.log(foo); //foo is undefined console.log(baz); //12345

let {a} = b;

意思是从b这个对象中提取属性名为a的值并赋给a属性,返回一个对象{a: a}。

即:对象的赋值是下面的简写形式:

let {foo:foo,bar:bar} = {foo:'aaa',bar:'vvvv'};

也就是说,对象的解构赋值的内部机制是先找到同名属性,讲值赋值给对应的变量。真正被赋值的是后者,而不是前者。

上面代码

let {foo:baz} = {
    foo: 12345
};
//console.log(foo); //foo is undefined
console.log(baz); //12345
这段代码foo是匹配模式,baz才是变量。

用途:
1.函数参数的定义
function foo([x, y]) {
    return x + y;
}
var baz = foo([1, 2]);
console.log("baz", baz); //baz 3

function foo({y, x}) {
    return x + y;
}
var baz = foo({
    x: 1,
    y: 2
});
console.log("baz", baz); //baz 3

2.交换变量的值

let x = 2;
let y = 3;
[x, y] = [y, x];
console.log(x, y);   //3,2

3.从函数中返回的多个值

function foo() {
    return {
        a: 1,
        b: 2,
        c: 3
    }
}
let {a, b, c} = foo();
console.log(b); //2

function foo() {
    return [1, 2, 3]
}
let [a, b, c] = foo();
console.log(b); //2

  函数只能返回一个值,如果要返回多个值,只能将它们放在数组和对象中。通过解构取出这些值就非常方便。

4.提取JSON数据

let jsonData = {
    id: 12,
    status: 'OK',
    data: [987, 654]
}
let {id, status, data} = jsonData
console.log(id, status, data);    //12 "OK" [987, 654]

 

posted on 2018-01-20 15:11  sandy.simple  阅读(126)  评论(0编辑  收藏  举报