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 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构 ...
随机推荐
- Azure Front Door(三)启用 Web Application Firewall (WAF) 保护Web 应用程序,拒绝恶意攻击
一,引言 上一篇我们利用 Azure Front Door 为后端 VM 部署提供流量的负载均衡.因为是演示实例,也没有实际的后端实例代码,只有一个 "Index.html" 的静 ...
- 简单创建ASP.NET网站(1)
闲话 公司员工辞职了,我从原来的Delphi开发转型到ASP.NET开发,接受同时的相关工作,因为网上搜了视频学习,还是不觉得有什么提升,一脸懵逼,所以就买了书籍自己慢慢学习,为了加深记忆,我就记录一 ...
- SQL Server如何将查询的内容保存到新的sql 表中
我是采用语句将 查询后的数据保存到一个新表中 1)采用into table 语句,需要保存到的这个新表不需要提前创建 select *into NewTable from Table --插入新表的语 ...
- Spring Security OAuth 格式化 token 输出
个性化token 背景 上一篇文章<Spring Security OAuth 个性化token(一)>有提到,oauth2.0 接口默认返回的报文格式如下: { "ac ...
- java面试一日一题:mysql中常用的存储引擎有哪些?
问题:请讲下mysql中常用的引擎有哪些? 分析:该问题主要考察对mysql存储引擎的理解,及区别是什么? 回答要点: 主要从以下几点去考虑, 1.mysql的存储引擎的基本概念? 2.mysql中常 ...
- Ancient Cipher UVA - 1339
Ancient Roman empire had a strong government system with various departments, including a secret s ...
- 注册中心与API网关不是这样用的!
之前在做顾问和咨询项目的时候,见到了一种非常经典的关于API网关和注册中心的错误用法.这个案例在我的星球里已经分享过,没想到最近又碰到了两个类似的使用姿势.也许这样的问题还存在不少团队的应用中,所以拿 ...
- 1026 Table Tennis
A table tennis club has N tables available to the public. The tables are numbered from 1 to N. For a ...
- win10 添加全局快捷键
前言 好久没写博客了,今天水一下 如何在win10 下添加一个全局唤醒的快捷键(打开截图软件) 步骤 win + Q 输入 管理工具 添加快捷方式 这里没有管理员权限,可以直接把创建好的 快捷方式 粘 ...
- 【SpringBoot】Springboot2.x整合Redis(一)
备注: springboto整合redis依赖于spring-boot-starter-data-redis这个jar 一,项目环境和依赖 1.POM.xml配置 <parent> < ...