深入理解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;

结束语

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

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

深入理解ES6 ---对象(object)

前言 在JavaScript中几乎每一个值都是某种特定的对象 ,例如数字是属于Number 类型的对象,字符串是String 类型的对象.可见对象在JavaScript中的重要性,而在ES6中着重通...

git 使用

git 先链接到远处仓库, git init 初始化本地仓库 git clone [url] 克隆仓库 git 提交新文件 步骤 1.先创建新文件 2. git add 文件url ...

深入ES6 三 解构赋值

解构赋值 解构赋值指的是按照一定规则,直接从数组和对象中提取值,对变量进行赋值。...
  • Hukaihe
  • Hukaihe
  • 2017年04月12日 20:29
  • 800

ES6学习2(变量的解构赋值)

ES6允许按照一定的模式,从数组和对象中提取值,并对变量进行赋值。这对于解析json数据和函数参数等操作是非常有帮助的。 数组的解构赋值 基本用法 以前为变量赋值只能直接指定,现在可以这...
  • exialym
  • exialym
  • 2016年06月08日 09:28
  • 280

ES6学习笔记一之js发展、let、const、解构赋值

ECMAScript和JavaScript的关系?1996年11月,JavaScript的创造者—-Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能成为国际...

ES6新特性 let、const、变量对象的解构赋值

最近在学习ES6的新特性,在看阮一峰写的ECMAScript 6 入门,目前刚开始看用自己能够理解的语言记笔记方便下次查看一 let 1、let 局部变量 不会变量提升,在运用时候要先声明在调用,v...

ES6之变量的解构赋值--读书笔记

1.变量的解构赋值ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。let a = 1; let b = 2...

es6基础回顾--解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 //以前的写法 let a=1; let b=2; let c=3; //es6写法 let [a,b,c] = [1,...

ES6学习之路(二) 变量的解构赋值

1.数组解构赋值什么事解构赋值:从数组或对象中提取值,对变量进行赋值; 总结: 数组解构赋值 1.等号两边的模式相同,左边的变量会被赋值上相对应的值; 2.等号右侧的值多于左侧...

ES6学习笔记:变量的解构赋值

ES6:变量的解构赋值
  • qtwwyl
  • qtwwyl
  • 2017年04月17日 22:31
  • 132
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深入理解ES6 --解构
举报原因:
原因补充:

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