深入理解ES6 --解构

前言

对象和数组字面量是JavaScript中两种最常用的数据结构,由于JSON数据格式的普及,二者已经成为语言中特别重要的一部分.在编码过程中,我们经常定义许多对象和数组,然后有组织的从中提取相关的信息片段,ES6 中添加了许多可以简化这种任务的新特性 : 解构.

解构的目的

减少同质化的代码

    //假设有这样一个对象,我们从中取值,在ES5 中的做法.
    let person = {
        name : "joe",
        age : 20,
    }
    //当对象里面需要取出的变量变多,并且对象层级加深,声明的变量和同质化的代码会急剧增长
    let name = person.name;
    let age = person.age;

对象解构赋值

    let person = {
        name : "joe",
        age : 20,
    }
    //即使有多个也能快速一次定义,并且容易找到对应的值
    let {name,age} = person;

    //被定义和赋值的是冒号后面的那个值
    let {name:name1,age:age1} = person;
    console.log(name1,age1);//joe,20

在解构中没有的值会默认为undefined

    let person = {
        name : "joe",
        age : 20
    }
    let {name,age,sex} = person;//Joe,20,undefined

    //自然 也可以提供默认值,只有当person没有sex值时生效
    let {name,age,sex = "man"} = person;//Joe,20,man

多层级的解构赋值

let node = {
    name : "first",
    parent :{
        name : "second"
    }
};

//定义了一个变量secondNode 
let {parent:{name:secondNode} = node;
console.log(secondNode );//second

对象结构赋值容易引发错误的地方

解构声明变量,必须要提供初始化程序,也就是等号右边的值,不然会报错

//语法错误
var {type,name};
//语法错误
let {type,name};
//语法错误
const {type,name};

//解构赋值等号右边不能为null 或 undefined 
var {type,name} = null;

对于已经声明的变量结构赋值

//先声明变量,结构赋值修改变量
let person = {
    name : "joe",
    age : 20
},
name,age;
// 由于花括号被认为是代码块,并不会执行,所以需要加上()
({name,age} = person);

//这样就会出现很多奇怪的表达式,没有意义,但能执行
({}={})

数组解构赋值

数组的解构赋值相对对象而言简单很多.

let persons = ["joe","alice","jack"];

let [firstPerson,secondPerson] = persons;
console.log(firstPerson,secondPerson);//joe,alice

//数组解构用来代替三角替换
[firstPerson,secondPerson] = [secondPerson,firstPerson]
console.log(firstPerson,secondPerson);//alice,joe

//数组解构一样支持默认值
let [a,b,c,d = "tony"] = persons;
console.log(d);//tony; 

数组解构中的不定参数

let persons = ["joe","alice","jack"];

//数组解构的不定参数和函数中表现一致,只能放在最后面.
let [person,...otherPersons] = persons;
console.log(person,otherPersons);//joe,["alice","jack"]

//利用不定参数深度复制一个数组

let [...newPersons] = persons;

结束语

本人才疏学浅,如有错漏之处或讲述不全之处,欢迎大家留言指正.