解构赋值是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)数组的解构赋值的更多相关文章

  1. ES6学习笔记一:let、const、解构赋值

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7236342.html 感谢阮一峰老师的无私奉献,开源推动世界!教程地址:http://es6.ruanyife ...

  2. ES6 学习笔记(一)let,const和解构赋值

    let和const let和const是es6新增的两个变量声明关键字,与var的不同点在于: (1)let和const都是块级作用域,在{}内有效,这点在for循环中非常有用,只在循环体内有效.va ...

  3. ES6 学习笔记 - 变量的解构赋值

    变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...

  4. ES6标准入门 第三章:变量的解构赋值

    解构赋值:从数组和对象中提取值,对变量进行赋值. 本质上,这种写法属于“匹配模式”:只要等号两边的模式相同,左边的变量就会被赋予对应的值. 1.数组的结解构赋值 基本用法 let [foo, [[ba ...

  5. ES6学习记录

    前言 由于要学习React Native ,所以得用到ES6,故为运用React Native做一个铺垫 学习记录 一.变量 1.let let 与 var 作用相同,用于定义变量,但是作用域不同.不 ...

  6. ES6 学习笔记(整理一遍阮一峰大神得入门文档,纯自己理解使用)

    1.let命令 1)let和var的区别:let声明的变量只有所在的代码块有效. 2)没有变量的提升,一定要声明后使用.使用let命令声明变量之前,该变量都是不可用的.形成“暂时性死区”. 3)typ ...

  7. ES6学习笔记(五)—— 编程风格

    1. 块级作用域 let 取代 var —— let 只在声明的代码块内有效,而且不存在变量提升的效用 const 取代 let —— const 比较符合函数式编程的思想,运算不改变值,只是新建值: ...

  8. ES6学习笔记(二十一)编程风格

    本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的.易于阅读和维护的代码. 1.块级作用域 (1)let 取代 var ES6 提出了两个 ...

  9. es6学习笔记--解构赋值

    昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.   数组的解构 ...

随机推荐

  1. 【DB宝45】MySQL高可用之MGR+Consul架构部署

    目录 一.MGR+Consul架构简介 二.搭建MGR 2.1.申请3台MGR机器 2.2.3台主机安装MySQL环境 2.3.修改MySQL参数 2.4.重启MySQL环境 2.5.安装MGR插件( ...

  2. MongoDB 那些事(一文以蔽之)

    前言 身边一直都有小伙伴在问:MongoDB到底是什么?它有到底什么特性?有什么与众不同?在什么情况下使用MongoDB最合适?以什么样的姿势是最好的?难道就一定要用吗?....说实话,这些问题都问到 ...

  3. Azure App Service(一)利用Azure DevOps Pipeline 构建镜像,部署应用程序

    一,引言 起因是前两天项目上做测试,需要我把写好的基于.NET 5 的 Web 测试程序作成 Docker 镜像.当我在本地验证完功能后,准备利用 Docker 构建应用程序镜像的时候,发现系统不支持 ...

  4. PAT (Basic Level) Practice (中文) 1050 螺旋矩阵 (25 分) 凌宸1642

    PAT (Basic Level) Practice (中文) 1050 螺旋矩阵 (25 分) 目录 PAT (Basic Level) Practice (中文) 1050 螺旋矩阵 (25 分) ...

  5. 第21 章 : Kubernetes 存储架构及插件使用

    Kubernetes 存储架构及插件使用 本文将主要分享以下三方面的内容: Kubernetes 存储体系架构: Flexvolume 介绍及使用: CSI 介绍及使用. Kubernetes 存储体 ...

  6. Kubernetes中Deployment部署故障排除

    Kubernetes中Deployment部署故障排除 字符型思维导图 排查pod状态(带标签):kubectl get pods,是否有等待处理的pod? 是?kubectl describe po ...

  7. 连续函数离散化-以SOGI为例

    0. 引言 0.1 本文内容 基于SOGI函数,将s域传递函数转换为离散的z域函数,并以m语言形式进行实现,在simulink中封装为m-function并进行验证 0.2 学到什么 离散化方法 函数 ...

  8. java面试-JDK自带的JVM 监控和性能分析工具用过哪些?

    一.JDK的命令行工具 1.jps(JVM Process Status Tools):虚拟机进程状况工具 jps -l 2.jinfo(Configuration Info for java):Ja ...

  9. Spring Boot 2.3 新特性优雅停机详解

    什么是优雅停机 先来一段简单的代码,如下: @RestController public class DemoController { @GetMapping("/demo") p ...

  10. Nginx/Apache + acme.sh 实现https访问

    1 概述 acme.sh实现了acme协议,可以从Let's Encrypt生成免费的ssl证书用于实现https,本文介绍了常见的两种服务器Apache与Nginx上利用acme.sh配置https ...