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、解构嵌套数组——赋值
综上即可

ES6 对象解构赋值和数组结构赋值

猜你喜欢