解构的作用:简化书写长度,提升开发效率。

解构对象

在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上。可能这个数据返回的对象或数组。例如返回一个obj{name:'zwq',age:18,sex:woman}而我们获取里面的值保存在变量里会用 var name = obj.name,var age = obj.age。

在es6中提供了解构的语法糖,让左右两侧极为相似的结构进行变量赋值。

在对象中单独写一个name代表的就是 name:name,左侧name你要到对象对象找到的属性,右侧name代表你声明的变量名,所以,下面代码中obj对象的name,age属性赋值给变量name和age。在左侧的变量找到了右侧对象的相同属性并把值赋给对应变量。

let obj = {
name: "zwq",
age: 18,
sex:'female'
}
let name,age;
({ name, age } = obj);
console.log(name, age); //zwq 18

上面代码是先声明变量,在赋值。也可以声明变量时同时赋值,如下:

let {name,age} = obj;
console.log(name,age); //zwq 18

当自己声明的变量不想和对应的属性重名是

let {name:Oname,age:Oage} = obj;
console.log(Oname,Oage); //zwq 18

默认赋值

下面代码采用默认赋值,形参a,分别默认赋值为10,20。当值传入一个值的时候,b并不是undefined,而是取默认值。

function sum(a = 10,b = 20){
console.log(a+b);
}
sum(5);

下面代码使用默认值的方式给变量sex附上默认值male,当对象中找不到对应的属性是取默认值,当存在对用属性是,取对象里面的值。

let {name:Oname,age:Oage,sex ='male' } = obj;
console.log(Oname,Oage,sex);

解构数组

由于数组也是对象,属性名是当前的索引值,所以下面可以成功的进行变量赋值。同时数组中用length属性。因此声明length变量也可以获取对象的属性值:数组的长度

let arr = [1,2,3];
let {0:x,1:y,2:z} = arr
console.log(x,y,z); //1,2,3
 let{length} = arr;
 console.log(length);  //3
 

而解构就是使用左右两侧极为相似的解构进行赋值,在数组解构中这样书写:

let [x,y,z] = arr;
console.log(x,y,z); //1,2,3

当数组嵌套对象的形式也可以利用左右两侧相似解构进行赋值。

用,,,占位,照抄arr的结构。如下声明name变量,并且打印zwq.

let arr = [1,2,3,{name:'zwq'}];
let [,,,{name}] = arr;
console.log(name);

ES6 解构 destructuring的更多相关文章

  1. 深入浅出ES6(六):解构 Destructuring

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性 ...

  2. ES6解构赋值

    前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...

  3. ES6 解构

    { "code": 200, "msg": "success", "data": { "total" ...

  4. ES6解构赋值常见用法

    解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...

  5. es6 解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...

  6. ES6—解构赋值

    1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明.    2. 数组的解构赋值 数组传统的变量赋值:      var arr=[1,2,3]; ...

  7. ES6解构赋值详解

    文章转载自:http://www.zhufengpeixun.cn/article/167 解构赋值(destructuring assignment)语法是一个 Javascript 表达式,这种语 ...

  8. (2)ES6解构赋值-数组篇

    1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...

  9. es6 解构赋值 新认知/新习惯

    es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...

随机推荐

  1. RS485与RS232

    以下内容为结合视频,加上自述对其理解. 信息在传输线上通过电压信息进行传输,一个字节的数据有8位. 当传输一个字节的信息时,通信方式有串行通信与并行通信,在这两种通信方式之中,RS485是并行通信,R ...

  2. es6 proxy浅析

    Proxy 使用proxy,你可以把老虎伪装成猫的外表,这有几个例子,希望能让你感受到proxy的威力. proxy 用来定义自定义的基本操作行为,比如查找.赋值.枚举性.函数调用等. proxy接受 ...

  3. react-native Android release打包失败

    npm run build报错(android) react-native 0.5x在安卓环境 gradle 3.x版本下编译release版本的时候提示编译失败,但是debug模式下是没有问题的. ...

  4. ARTS-S docker ceontos镜像中使用crontab

    centos镜像中默认没有crontab,需要在dockerflle中通过yum的安装 yum -y install vixie-cron crontabs && yum clean ...

  5. 线阵CCD-TCD1209采集系统&驱动设计

    关键字:CPLD+AD9945+TCD1209+CY7C68013A TCD1209,一款经典的CCD线阵单色传感器.本次设计一款基于usb2.0高速采集图像. CPLD+AD9945+TCD1209 ...

  6. 【Java Web开发学习】Spring MVC异常统一处理

    [Java Web开发学习]Spring MVC异常统一处理 文采有限,若有错误,欢迎留言指正. 转载:https://www.cnblogs.com/yangchongxing/p/9271900. ...

  7. C语言每日一练——第7题

    一.题目要求 已知数据文件in.dat中存有200个四位数,把这些数存到数组a中,编写函数jsVal(),其功能是:把千位数字和十位数字重新组成一个新的含有两位数字的数ab(新数的十位数字是原四位数的 ...

  8. NodeJS4-8静态资源服务器实战_构建cli工具

    Cli(command-line interface),中文是 命令行界面,简单来说就是可以通过命令行快速生成自己的项目模板等功能(比较熟悉的是vue-cli脚手架这些),把上述写的包做成Cli工具. ...

  9. springcloud-微服务架构基础

    一 前言 学习微服务要从基础的架构学起,首先你要有个微服务的概念才能学习对吧!!如果你都不知道啥是微服务,就一头扎进去学习,你自己也觉得自己也学不会对吧.本篇文章主要让大家快速了解基础的架构分格,以便 ...

  10. 北京国际机场T3行李运维平台开发记录

    说明 该项目是一个后台管理型网站项目,供北京国际机场T3航站楼行李调度运维部门使用,开发时间一个半月,我负责所有的前端开发.后端开发.API接口文档设计与编写.服务部署和交付. 整个网站具备的功能有: ...