ES6解构

作用

拆分数据解构，更方便的提取数据片段。

对象解构

声明变量

使用解构声明变量必须初始化
ES5

const obj = {
    name: 'lee',
    age: 18
}
let name = obj.name;
let age = obj.age;

ES6

const obj = {
    name: 'lee',
    age: 18
}
let { name, age } = obj;

赋值变量

const obj = {
    name: 'lee',
    age: 18
}
let name = 'hello';
let age = 7;
({ name, age } = obj);

默认值

如果指定的变量名称在对象中不存在，则赋值undefined

const obj = {
    name: 'lee',
    age: 18
}
let { name, age, gender } = obj;
console.log(gender); // undefined

当指定的属性不存在时，可以定义默认值
默认值在对象上没有该属性或该属性为undefined时生效

const obj = {
    name: 'lee',
    age: 18
}
let { name, age, gender = 'male' } = obj;
console.log(gender); // 'male'

别名(非同名局部变量)

取:左边的属性值存储在:右边的变量中

const obj = {
    name: 'lee',
    age: 18
}
let { name: myName, age: myAge } = obj;
console.log(name); // 空
console.log(myName); // 'lee'

嵌套

在解构中使用花括号{}，意为在找到花括号{}前的属性后，应该继续深入一层查找花括号{}中的属性

const obj = {
    person: {
        head: {
            eyes: 2,
            mouth: 1
        },
        body: {
            arms: 2,
            legs: 2
        }
    }
}
let { person: {head} } = obj;
console.log(head.eyes); // 2

数组

声明变量

let colors = ['red', 'green', 'blue'];
let [firstColor, secondColor] = colors;
console.log(firstColor); // 'red'

赋值变量

let colors = ['red', 'green', 'blue'];
let firstColor = 'black';
let secondColor = 'purple';
[firstColor, secondColor] = colors;
console.log(firstColor); // 'red'

默认值

当指定位置的属性不存在或者其值为nudefined时使用默认值

let colors = ['red'];
let [firstColor, secondColor = 'green'] = colors;
console.log(secondColor); // 'green'

嵌套

let colors = ['red', ['green'] ];
let [firstColor, [secondColor] ] = colors;
console.log(secondColor); // 'green'

交换两个值

ES5

let a = 1,
    b = 2,
    temp;

    temp = a;
    a = b;
    b = temp;

ES6

let a = 1,
    b = 2;

[a, b] = [b, a];

不定元素

let colors = ['red', 'green', 'blue'];
let [firstColor, ...restColors] = colors;
console.log(restColors); // ['green', 'blue']

网站导航

网站导航