深入理解ES6 --解构

原创 2017年09月05日 00:21:48

前言

对象和数组字面量是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;

结束语

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

javascript RegExp 环视

环视(Lookaround) 1       环视基础 环视只进行子表达式的匹配,不占有字符,匹配到的内容不保存到最终的匹配结果,是零宽度的。环视匹配的最终结果就是一个位置。 环视的作用相当于对...

js中数组过滤、遍历、迭代every、some、filter、map、forEach、reduce、reduceRight

全栈工程师开发手册 (作者:栾鹏) js系列教程1-数组操作全解js中数组遍历迭代serialize()序列化,将元素转化为xx=xx&xx=xx&xx=xx字符串形式,不仅能用于表单。代码如下:va...

一个demo学会css

一个demo学会css css选择器全解 css操作语法全解一个demo学会css:学习了css权威指南这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的css编程知识。让你...

js实现进制之间的转换

需求: 将十进制转换为任意进制 将任意进制转换为十进制 代码实现: 进制之间的转换 //将任意进制转换为十进制 parseInt一个参...

javascript 构造函数和new操作符

javascript 构造函数和new操作符 {…}语法允许创建一个对象,但如果需要创建多个类似的对象,则我们需要使用构造函数和“new”操作符。 构造函数构造函数技术上就是正常的函数,但一般有两...

深入理解ES6--块级作用域(let const)

var 声明及变量提升机制var 的声明提升机制 —> 在函数作用域或全局作用域中通过关键字var 声明的变量,无论实际在哪里声明,都会被当成在当前作用域(ES5作用域,只有函数能起到块级作用域的目...

图解原型原型链

图解原型原型链原型 ?在“类”中(也就是函数中)的prototype就指向一个原型对象,在实例中,__proto__就指向的是一个构造它的那个“类”(函数)的原型,通过protoype与__proto...

threejs概览

本文讲述threejs的总体概况,希望从一个较高的角度看threejs到底能做什么

js系列教程8-事件全解

printf("===========事件绑定==========="); //时间可以在h5代码中直接添加也可以在js代码中添加 var input1=document.getElementById...

js中数组增删查改unshift、push、pop、shift、slice、indexOf、concat、join

全栈工程师开发手册 (作者:栾鹏) js系列教程1-数组操作全解js中数组增删查改代码如下://元素增加 var names=[]; //定义数组并...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)