1. 程式人生 > >ES6 物件解構賦值和陣列結構賦值

ES6 物件解構賦值和陣列結構賦值

1、解構物件

    1.1、解構單層物件

        1.1.1、解構單層物件——不賦值

let data = {
    id: 1,
    name: 'Jack'
}
let { id, name } = data;
console.log(id, name)            // 1 "Jack"

        1.1.2、解構單層物件——賦值
        注意:在下文程式碼中,一定要用一對小括號包裹解構賦值語句,javascript引擎將一對開放的花括號視為一個程式碼塊,而語法規定,程式碼塊不能出現在賦值語句的左側,新增小括號後可以將塊語句轉化為一個表示式,從而實現整個解構賦值的過程。

var data = {
    author: 'Better',
    age: 18
}, 
author = 'Jack',
age = 19;
console.log(author, age);        // Jack 19

//使用解構語法為多個變數賦值
({author,age} = data);

console.log(author, age);        // Better 18
console.log(data);               // {author: "Better", age: 18}

    1.2、解構巢狀物件

        1.2.1、解構巢狀物件——不賦值

let data = {
    date: '2018-12-03',
    author: 'Better',
    event: {
        eventName: 'playBadminton',
        peopleCount: 8
    }
}
let {date, author, event:{eventName, peopleCount}} = data;
console.log(date)                        // 2018-12-03
console.log(eventName)                   // playBadminton

        1.2.2、解構巢狀物件——賦值

// 1、被解構的物件中 沒有 該物件(如 detailData)
let data = {
    date: '2018-12-03',
    author: 'Better',
    event: {
        eventName: 'playBadminton',
        peopleCount: 8
    }
}
let {
    date, event: {
        eventName
    },
    detatilData: {
        city
    } = {
        city: '杭州'
    }
} = data;
console.log(date)                 // 2018-12-03
console.log(eventName)            // playBadminton
console.log(city)                 // 杭州

// 2、被解構的物件中 有 該物件(如 detailData)
let data = {
    date: '2018-12-03',
    author: 'Better',
    event: {
        eventName: 'playBadminton',
        peopleCount: 8
    },
    detatilData: {
        city: '北京'
    }    
}
let {
    date, event: {
        eventName
    },
    detatilData: {
        city = '杭州'
    }
} = data;
console.log(date)                 // 2018-12-03
console.log(eventName)            // playBadminton
console.log(city)                 // 北京

2、解構陣列

    2.1、解構單層陣列

        2.1.1、解構單層陣列——不賦值

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

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

let [foo] = [];            // foo = underfined;
let [bar, foo] = [1];      // foo = underfined;

        2.1.2、解構單層陣列——賦值

let node = {
    type:"Identifier",
    name:"foo"
};
let {type,name,value = true} = node;
console.log(type);//"Identifier"
console.log(name);//"foo"
console.log(value);//true


let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined


let node = {
    type:"Identifier",
    name:"foo"
},
 
type = "Literal",
name = 5;
 
// 使用解構語法為多個變數賦值
({type,name} = node);
 
console.log(type);//"Identifier"
console.log(name);//"foo"
// 注意:一定要用一對小括號包裹解構賦值語句,javascript引擎將一對開放的花括號視為一個程式碼塊,而語法規定,程式碼塊不能出現在賦值語句的左側,新增小括號後可以將塊語句轉化為一個表示式,從而實現整個解構賦值的過程。

// 為非同名區域性變數賦值
let node = {
    type:"Identifier"
};
let {type:localType,name:localName = "bar"} = node;
console.log(localType);        //"Identifier"
console.log(localName);        //"bar"

    2.2、解構巢狀陣列

        2.1.1、解構巢狀陣列——不賦值

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

        2.1.2、解構巢狀陣列——賦值
        綜上即可