初识ES6 解构
1.数组的解构
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
例子:
let [a, b, c] = [1, 2, 3];
console.log(a);//1
console.log(b)://2
console.log(c)://3
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
2.对象的解构
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
let {foo,bar}={bar:'aaa',foo:'bbb'};
console.log(foo);//aaa
console.log(bar);//bbb
3.字符串解构
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a,b,c,d,f]='hello';
console.log(a);//h
console.log(b);//e
console.log(c);//l
console.log(d);//l
console.log(e);//o
初识ES6 解构的更多相关文章
- 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—解构赋值
1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明. 2. 数组的解构赋值 数组传统的变量赋值: var arr=[1,2,3]; ...
- es6 解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...
- (2)ES6解构赋值-数组篇
1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...
- es6 解构赋值 新认知/新习惯
es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...
- 简单看看es6解构赋值
哎,我真的是太难了,今天就被这个解构赋值(也可以叫做析构,貌似析构是在c++中的,所以我这里叫做解构赋值吧)弄的我很烦,本来以为很容易的,结果还是弄了好久...就总结一下解构吧! 1.解构的基本使用 ...
- ES6 解构 destructuring
解构的作用:简化书写长度,提升开发效率. 解构对象 在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上.可能这个数据返回的对象或数组.例如返回一个obj{name:'zwq',age:18 ...
随机推荐
- 2.6 USB摄像头驱动之USB描述符
学习目标:分析USB摄像头驱动的描述符: 一.USB设备描述符 在usb设备驱动分析那一节,也用到了usb描述符. usb描述符可分为: USB设备描述符(usb_device_descriptor) ...
- day11迭代器 and 闭包
函数名的使⽤以及第一类对象 函数名是一个变量, 但它是一个特殊的变量, 与括号配合可以执行函数的变量. 函数名就是变量名, 函数名存储的是函数的内存地址 函数名可以赋值给其他变量 函数名可以当做容器类 ...
- Python学习:17.Python面向对象(四、属性(特性),成员修饰符,类的特殊成员)
一.属性(特性) 普通方法去执行的时候,后面需要加括号,特性方法执行的时候和静态字段一样不需要不需要加括号. 特性方法不和字段同名. 特性方法不能传参数. 在我们定义数据库字段类的时候,往往需要对其中 ...
- React with webpack
//entry.js require("!style!css!./style.css"); require("./hello.jsx"); // documen ...
- PhpStorm2016.2版本 安装与破解
1.PhpStorm2016简介以及下载地址 1.1.PhpStorm介绍 PhpStorm是一个轻量级且便捷的PHP IDE,其旨在提高用户效率,可深刻理解用户的编码,提供智能代码补全 快速导 ...
- 20155334 2016-2017-2 《Java程序设计》第四周学习总结
20155334 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 第六章:继承与多态 继承:面对对象中,子类继承父类,避免重复的行为定义 extends表示会 ...
- ruby学习笔记(2)-chomp,chop的区别
还没开始系统性的学习Ruby,最近在看metasploit框架的exploit会涉及到Ruby脚本,也就硬着头皮一遍查阅资料一遍做些笔记吧. Ruby字符串中存在chop和chomp的内置函数.我在h ...
- Ubuntu配置android环境
jdk:http://www.oracle.com/technetwork/cn/java/javase/downloads/index.html 安装JDK的步骤:http://jingyan.ba ...
- asp.net self host and urlacl(解决UnHandledException Message:拒绝访问的问题)
命令提示符(管理员权限)需要添加的代码: netsh http add urlacl url=http://*:9999/ user=Everyone listen=yes 其中: url:代码中的u ...
- OpenStack入门篇(八)之镜像服务Glance
一.Glance的概述 Glance是为虚拟机的创建提供镜像的服务,我们基于Openstack是构建基本的IaaS平台对外提供虚拟机,而虚拟机在创建时必须为选择需要安装的操作系统,Glance服务就是 ...