es6的解构赋值学习(1)
相对es5的简单的“=”赋值来说,es6增加了一种新的赋值模式——解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比简单的“=”赋值来说,也更要花时间来理解,今天我们一起学习一下这个新的赋值方法。
看一行代码:
let [a,b,c] = [,,];
这是一种最基本的数组解构赋值,等同于:
var a = ;
var b = ;
var c = ;
相当于两边都是数组,它们的length相同,左边放变量,右边放值,一一对应,省了不少代码
如果length不同的话,会有两种情况:
let [x, y] = [, , ];
//x=1
//y=2 let [a] = [];
//a=undefined;
let [a, b] = [];
//a=1;
//b=undefined;
第一种:左边的length小于右边的,叫做不完全解构,变量都可以赋值成功,多余的值就多余了;
第二种:左边的length大于右边的,未超出的部分会正常解构并赋值,超出的变量在右边没有匹配的值,则解构失败,值定位undefined;
那如果两边的类型不同,举个栗子:一边是数组,另一边是非数组,则会报错,借用阮大神的话:
// 报错
let [foo] = ;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {}; //上面的语句都会报错,因为等号右边的值,要么转为对象以后不具备
//Iterator 接口(前五个表达式),要么本身就不具备 Iterator 接口(最后一
//个表达式)。
es6中还有默认值的概念,解构赋值也允许指定默认值:
let [foo = true] = [];
foo // true let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
我们可以看到,两边数组的length并不同,也没有赋值,但可以正常输出,是因为在声明变量时,给了变量一个默认值,若没有用其他方式给该变量赋值的话,则使用默认值,es6判断使用默认值的情况是给出了该位置的值为undefined(未给任何值的话默认是undefined)且必须“===”undefined,才会使用默认值:
let [x = 1] = [undefined];
x // let [x = 1] = [null];
x // null
上面的代码可以这样理解:
let x;
if ([undefined][0] === undefined) {
x = 1;
} else {
x = [undefined][0];
} let x;
if ([null][0] === undefined) {
x = 1;
} else {
x = [null][0];
}
然后在变量数量多的情况下,可以引用解构赋值的其他变量,但该变量必须已经声明,且有一个顺序:后面的可以使用前面的,反之不可:
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError
let [x = y, y = 1] = [2]; // x=2,y=1
今天就写到这里吧,数组的解构赋值也差不多了,希望能给大家一点帮助,以后我会边学边整理随笔,大家一起进步。(感谢阮一峰大神的经验)
es6的解构赋值学习(1)的更多相关文章
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
- ES6 - 变量的解构赋值学习笔记
变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...
- es6变量的解构赋值学习笔记
1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...
- ES6之解构赋值
截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...
- 进军es6(2)---解构赋值
本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久.目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需 ...
- Es6 新增解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...
- ES6 之 解构赋值
本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这 ...
- ES6变量解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...
- es6变量解构赋值的用途
这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读; 用途 1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白 let [x ...
随机推荐
- android 菜单的总结
安卓菜单有三种菜单. 选项菜单: 点击系统菜单按钮会触发 上下文菜单:长按屏幕触发 子菜单:某一个菜单的下一级菜单 具体的描叙:http://blog.csdn.net/zqiang_55/artic ...
- Jquery的AJAX应用详解
案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id=" ...
- 学习生命周期activity
2014年4月2日 08:31:27 开始学习activity周期, 简单了解了几个方法,写了几个打印语句,知道了先后顺序
- HTML5学习笔记四:html5结构
一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...
- cpsr当前程序状态寄存器
详解CPSR寄存器(ls_core) (2012-10-11 17:29:47) 转载▼ 标签: arm920t寄存器 cpsr cpu工作原理 分类: 第四章-踏入嵌入式领域之ARM 在介绍CPSR ...
- //@sourceURL=filename.js
在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样 ...
- NodeMCU之旅(四):实现Web配置页面
引言 利用Web页面做配置可以轻松适应用户的多种设备,如Android, IOS等.本文将介绍如何在NodeMCU中实现配置页面. 接线图请参考NodeMCU之旅(三):响应配置按钮. 配置页面后端 ...
- 必备的实用jQuery代码段(1)
1. 如何正确地使用toggleClass: //切换(toggle)类允许你根据某个类的 //是否存在来添加或是删除该类. //这种情况下有些开发者使用: a.hasClass('blueButto ...
- js框架Modernizr是什么东西? 他是前端开发HTML5和CSS3的强有力前端js检测类库
最近在研究modernizr的前端框架,发现这个Modernir对前端写页面非常友好,并且能够很快的建立起适应任何设备的html页面哦.在这里分享下基础教程,让大伙对modernizr是什么?做什么用 ...
- JAVA中获取当前运行的类名,方法名,行数
JAVA中获取当前运行的类名,方法名,行数 public static String getTraceInfo(){ StringBuffer sb = new StringBuffer(); Sta ...