ES6 解构 destructuring
解构的作用:简化书写长度,提升开发效率。
解构对象
在开发中我们常用到使用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 [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的更多相关文章
- 深入浅出ES6(六):解构 Destructuring
作者 Jason Orendorff github主页 https://github.com/jorendorff 什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性 ...
- ES6解构赋值
前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...
- ES6 解构
{ "code": 200, "msg": "success", "data": { "total" ...
- ES6解构赋值常见用法
解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...
- es6 解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...
- ES6—解构赋值
1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明. 2. 数组的解构赋值 数组传统的变量赋值: var arr=[1,2,3]; ...
- ES6解构赋值详解
文章转载自:http://www.zhufengpeixun.cn/article/167 解构赋值(destructuring assignment)语法是一个 Javascript 表达式,这种语 ...
- (2)ES6解构赋值-数组篇
1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...
- es6 解构赋值 新认知/新习惯
es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...
随机推荐
- 云享专家倪升武:微服务架构盛行的时代,你需要了解点 Spring Boot
[摘要] 微服务架构的本质在于分布式.去中心化. 随着互联网的高速发展,庞大的用户群体和快速的需求变化已经成为了传统架构的痛点. 在这种情况下,如何从系统架构的角度出发,构建出灵活.易扩展的系统来快速 ...
- es6 proxy浅析
Proxy 使用proxy,你可以把老虎伪装成猫的外表,这有几个例子,希望能让你感受到proxy的威力. proxy 用来定义自定义的基本操作行为,比如查找.赋值.枚举性.函数调用等. proxy接受 ...
- JS获得天数差异
//获得天数差异 function datedifference(sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式 var dateSpan, tempDa ...
- 一道题反映Java的类初始化过程
Java的类初始化过程: 1. 父类的static成员变量,static语句块. 2. 子类的static成员变量,static语句块. 3. 父类的普通成员变量,构造函数. 4. 子类的普通成员变量 ...
- 使用正则表达式实现(加减乘除)计算器(C#实现)
起因:公司领导要求做一款基于行业规范的计算器, 然后需要用户输入一些数据,然后根据用户输入的数据满足某些条件后,再根据用户输入的条件二进行加减乘除运算.;-) 期间因为查找规范等形成数据表的某一列是带 ...
- oracle逻辑存储结构
oracle数据库管理系统有三个重要的概念:实例.数据库.数据库服务器.oracle数据库的存储结构可以分为逻辑存储结构和物理存储结构.逻辑存储结构用于描绘Oracle内部组织和管理数据的方式,而物理 ...
- go基础之并发
1.Goroutines是轻量级线程 2.channels的同步通信 1.Goroutines是轻量级线程 go语句在单独的线程中运行一个函数. 你可以使用go语句启动一个新的执行线程,即一个goro ...
- Java修炼——多维数组
二维数组就是存储一维数组(内存地址/引用)的数组 二维数组的实始化 1) int intA[][]={{1,2},{2,3},{3,4,5}}; 2) int [][] intB=new int[3] ...
- dubbo 订阅 RPC 服务
Dubbo 订阅 RPC 服务 建立消费者者项目 pom.xml <?xml version="1.0" encoding="UTF-8"?> &l ...
- [TimLinux] MySQL 中的CASE/WHEN语法
1. 介绍章节 MySQL 5.7-en.a4.pdf文档的第12章:Functions and Operators中的12.4Control Flow Functions介绍了流控制操作符:CASE ...