ES6学习-4 解构赋值(1)数组的解构赋值
解构赋值是ES6很大的一个提升,为我们带来了很多方便,但用不好,会使程序的可读性变差,所以用时要注意,尽量保持程序的易读性。
数组解构赋值
在JS没有支持解构赋值之前,我们声明几个变量并赋值通常都是像下面这样:
1 var a=0;
2 var b=0;
3 var c=0;
有了解构赋值就可以写成这样了
1 var [a,b,c]=[0,0,0]
确实简单了许多,左边与右边能一 一对应的这种用解构赋值是既简单又易读。我之前为啥说用不好会使程序的可读性变差呢,因为解构在不是一对一对时候也会成功,下面举一些栗子:
1 let [ , , third] = ["foo", "bar", "baz"]; //前边两个跳过,直接用第三个元素给 third赋值,third:"baz"
2 let [x, , y] = [1, 2, 3]; //中间的跳过,用1给X赋值,3给Y赋值 x:1 y:3
3 let [x, y] = [1, 2, 3]; //用1给X赋值,2给y赋值,3没啥用处, x:1 y:2
虽然这些方式也会赋值成功,但可读性差很多,实际应用中尽量还是少用或不用。
解构赋值时的默认值
解析赋值允许指定默认值,如下面的栗子:
1 let [x, y = 'b'] = ['a']; // x='a', y='b',没有给y赋值,所以y使用了默认值
2 let [x, y = 'b'] = ['a', undefined]; //x='a', y='b', undefined相当于没人给y赋值,所以y使用了默认值
3 let [x, y = 'b'] = ['a', 'c']; //x='a',y='c' 用'c'给y赋值了,所以y变成了'c',没有使用默认值
ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。
1 let [x = 1] = [null]; // x = null null不是undefined,所以x没有使用默认值
一个很好用,也很有意思的代码,交换两个变量的值:
1 let [a,b]=[1,2];
2 console.log(a); //1
3 console.log(b); //2
4
5 [a,b]=[b,a]
6
7 console.log(a); //2
8 console.log(b); //1
ES6学习-4 解构赋值(1)数组的解构赋值的更多相关文章
- ES6学习笔记一:let、const、解构赋值
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7236342.html 感谢阮一峰老师的无私奉献,开源推动世界!教程地址:http://es6.ruanyife ...
- ES6 学习笔记(一)let,const和解构赋值
let和const let和const是es6新增的两个变量声明关键字,与var的不同点在于: (1)let和const都是块级作用域,在{}内有效,这点在for循环中非常有用,只在循环体内有效.va ...
- ES6 学习笔记 - 变量的解构赋值
变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...
- ES6标准入门 第三章:变量的解构赋值
解构赋值:从数组和对象中提取值,对变量进行赋值. 本质上,这种写法属于“匹配模式”:只要等号两边的模式相同,左边的变量就会被赋予对应的值. 1.数组的结解构赋值 基本用法 let [foo, [[ba ...
- ES6学习记录
前言 由于要学习React Native ,所以得用到ES6,故为运用React Native做一个铺垫 学习记录 一.变量 1.let let 与 var 作用相同,用于定义变量,但是作用域不同.不 ...
- ES6 学习笔记(整理一遍阮一峰大神得入门文档,纯自己理解使用)
1.let命令 1)let和var的区别:let声明的变量只有所在的代码块有效. 2)没有变量的提升,一定要声明后使用.使用let命令声明变量之前,该变量都是不可用的.形成“暂时性死区”. 3)typ ...
- ES6学习笔记(五)—— 编程风格
1. 块级作用域 let 取代 var —— let 只在声明的代码块内有效,而且不存在变量提升的效用 const 取代 let —— const 比较符合函数式编程的思想,运算不改变值,只是新建值: ...
- ES6学习笔记(二十一)编程风格
本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的.易于阅读和维护的代码. 1.块级作用域 (1)let 取代 var ES6 提出了两个 ...
- es6学习笔记--解构赋值
昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构 ...
随机推荐
- effective解读-第一条 静态工厂创建对象代替构造器
好处 有名称,能见名知意.例如BigInteger的probablePrime方法 享元模式.单例模式中使用 享元模式:创建对象代价很高,重复调用已有对象,例如数据库连接等.享元模式是单例模式的一个拓 ...
- Centos7下安装JDK详细过程记录
1.查询系统是否安装了java: [root@bogon ~]# java -version 根据上图显示,系统默认安装了Openjdk,它和我们使用的java jdk有些区别(具体的可度娘),所以需 ...
- kthread_worker和kthread_work机制
1.概述 在阅读内核源码时,可以看到kthread_worker.kthread_work两个数据结构配合内核线程创建函数一起使用的场景.刚开始看到这块时,比较困惑,紧接着仔细分析源码后,终于弄清楚了 ...
- APP或者前端通过识别用户代理详细信息和浏览器数据进行安全防御
使用用户代理解析API 识别 访问您网站的浏览器,机器人,操作系统和设备 上手免费 阅读文档 解码用户代理 识别检测浏览器,操作系统,平台,设备类型以及其他30多个字段 多种浏览器,机器人,手机,平板 ...
- 高可用负载均衡 haproxy+keepalived
服务器 20.0.0.206 10.0.0.206 bs-hk-hk01 高可用负载均衡节点 2c2g 20.0.0.207 10.0.0.207 bs-hk-hk02 高可用负载均衡节点 ...
- Spring IOC 特性有哪些,不会读不懂源码!
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 多线程.锁.JVM调优,都背出花啦,怎么一写代码还是乱糟糟? 为什么这些无论从书本. ...
- [矩阵乘法]裴波拉契数列II
[ 矩 阵 乘 法 ] 裴 波 拉 契 数 列 I I [矩阵乘法]裴波拉契数列II [矩阵乘法]裴波拉契数列II Description 形如 1 1 2 3 5 8 13 21 34 55 89 ...
- maven中心仓库OSSRH使用简介
目录 简介 为什么使用中心仓库 发布到中心仓库前的准备工作 使用OSSRH 使用Sonatype创建ticket 中央仓库中的组件要求 提供Javadoc 和源代码 使用GPG/PGP给文件签名 Me ...
- Weekly Contest 137
1046. Last Stone Weight We have a collection of rocks, each rock has a positive integer weight. Each ...
- 1.7.3- HTML表格属性