ES6新特性之解构使用细节
ES6的解构说白了就是能够让我们一次性取到多个值,大致可分为一下几个方面
1、数组解构
普通的一维数组解构,如下one = array[0],two=array[1],three=array[2]
var [one, tow, three] = array;
嵌套数组解构
var [one,[[two],three]] = [1,[[2],3]];
// one=1;two=2;three=3
还可以跳过一些元素解构
var [,,three] = [1,2,3];
// three=3
指定不定参数进行解构
var [one,...three] = [1,2,3];
three=[2,3];
当访问空数组或则越界的时候得到undefined;
2、对象解构
对象解构使用{},首先指定要解构的属性名,然后指定绑定的变量
var {name:nameA,age:ageA}={name:"Jhon",age:23};
// nameA="Jhon",ageA=23
如果属性名和变量名一致时,可以缩写
var {name,age}={name:"Jhon",age:23};
// name="Jhon",age=23
对象也可以像数组一样进行嵌套解构,当解构一个未定义的属性时得到undefined
如果已经声明了某些变量或者没有使用关键字(var,let,const),则像下面这样使用会报错,因为解析引擎将{开头的语句解析为一个语句块,这时要加()处理
{name,age}={name:"Jhon",age:23};
// error
({name,age}={name:"Jhon",age:23});
3、其他
- 解析null或者undefined会得到一个错误
- 解析原始类型将会得到undefined
function show(){
return [1,2];
}
var [one, two] = show();
解构Map
for( var [,value] of map){
console.log(value);
}
ES6新特性之解构使用细节的更多相关文章
- javascript ES6 新特性之 解构
解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值 var arr = [1, 2, 3]; //传统方式 var a = arr[0], ...
- JavaScript ES6 新特性详解
JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const , let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...
- js--ES6新特性之解构
前言 es6 中引入了解构这一新特性,了解解构成为一个格合前端必须掌握的基础知识,不仅作为了面试的重要考查知识,同时能极大提高我们平常工作的开发效率.本文来总结一下需要掌握的解构知识点. 正文 1.什 ...
- ECMAscript6新特性之解构赋值
在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是" ...
- ECMA Script 6新特性之解构赋值
1.基本概念用法 1.1解构赋值:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值. var a = 1; var b = 2; var c = 3; /*上述赋值语句用解构赋值为*/ v ...
- ES6,ES2105核心功能一览,js新特性详解
ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...
- ES6新特性三: Generator(生成器)函数详解
本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...
- 前端入门21-JavaScript的ES6新特性
声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
随机推荐
- python 实现注册程序
本文介绍用python实现一个模拟注册的程序,详细需求如下: # 写一个注册的程序,输入username,密码,密码确认,输入的账号和密码不能为空,两次输入密码必须一致,用户名不能重复,错误次数4次# ...
- 传统编程和IoC的对比
ref:http://www.importnew.com/13619.html 传统编程:决定使用哪个具体的实现类的控制权在调用类本身,在编译阶段就确定了. IoC模式:调用类只依赖接口,而不依赖具体 ...
- 工作中对数组的一些处理,整理(结合underscore.js)
1.数组里边相同元素提取成map,并以'',''分隔 例如:var arr = [{a:"xx",b:''xxx''},{a:"xxx",b:''xxxxx'' ...
- 非position:fixed,footer自動調到屏幕底部
一.980px手機端寫法: $(function(){ var sh=$('section').height(); var ww=$(window).width(); ...
- [js学习笔记] 原型链理解
js中只有对象,包括对象,函数,常量等. prototype 只有函数里有这个属性. 对象里可以设置这个属性,但是没这个属性的意义 prototype指向一个对象,可以添加想要的方法. 该对象里有一个 ...
- Angular2开发拙见
本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型 ...
- Charles Proxy v4.1.4 免费注册激活方法
去官网下载最新版Charles,目前是v4.1.4 下载后安装Charles,然后先打开一次Charles软件(Mac系统需要先打开一次,Windows不需要) 到网站 http://charles. ...
- 【笔记】php常用函数
phpusleep() 函数延迟代码执行若干微秒.unpack() 函数从二进制字符串对数据进行解包.uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID.time_sleep_unti ...
- NOIP2017SummerTraining0713
个人感受:这套题是真的难,以至于,拿了130分就第三了(说来羞耻,真的不想---) 问题 A: 乐曲创作 时间限制: 1 Sec 内存限制: 256 MB提交: 370 解决: 58[提交][状态 ...
- Day1 Python基础学习
一.编程语言分类 1.简介 机器语言:站在计算机的角度,说计算机能听懂的语言,那就是直接用二进制编程,直接操作硬件 汇编语言:站在计算机的角度,简写的英文标识符取代二进制去编写程序,本质仍然是直接操作 ...