解构赋值是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. concurrentHashMap扩容相关方法详解

    上一个博客中说到了concurrentHashMap的put操作,在put操作之后如果添加了节点,我们首先会把全局的节点数+1,如果满足了扩容条件,我们则进行扩容 我们先从addCount方法说起 / ...

  2. 第11 章 : 可观测性:你的应用健康吗?(liveness和readiness)

    课时 11:可观测性:你的应用健康吗?(莫源) 本次课程的分享主要围绕以下五个部分: 介绍一些整体需求的来源: 介绍在 K8s 中 Liveness 和 Readiness 的使用方式: 介绍在 K8 ...

  3. [Fundamental of Power Electronics]-PART I-5.不连续导电模式-5.4 总结与重点

    5.4 总结与重点 基本的buck,boost以及buck-boost电路的特点总结在表5.2中.其中给出了\(K_{crit}(D)\)的表达式,CCM和DCM下的变换比,以及DCM下二极管导通占空 ...

  4. Asp.Net Core 5 REST API 使用 JWT 身份验证 - Step by Step

    翻译自 Mohamad Lawand 2021年1月22日的文章 <Asp Net Core 5 Rest API Authentication with JWT Step by Step> ...

  5. 201871030108-冯永萍 实验二 个人项目— D{0-1}背包问题项目报告

    项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/2018CST 这个作业要求链接 https://www.cnblogs.com/nwnu-dai ...

  6. 【源码解析】- ArrayList源码解析,绝对详细

    ArrayList源码解析 简介 ArrayList是Java集合框架中非常常用的一种数据结构.继承自AbstractList,实现了List接口.底层基于数组来实现动态容量大小的控制,允许null值 ...

  7. 华为联运游戏或应用审核驳回:HMS Core升级提示语言类型错误

    问题描述 最近项目组应用集成华为的HMS Core SDK相关能力后,发布地区选择中国大陆,提交审核,华为审核驳回:在低于2.5.3版本的华为移动服务手机上启动时或调出支付时拉起升级提示为英文,正确的 ...

  8. SpringBoot 使用逆向工程 构建Mapper.xml Dao层(持久层) 实体类

    逆向工程 注: 有数据库表即可 第一步为创建数据库表 (可选)使用PowerDesigner设计数据库表,物理模型构建 添加pom.xml 逆向工程生成代码插件 <!--plugin 逆向工程生 ...

  9. Crackme_003

    功能: 拿到文件,先执行一下.功能如下: 1.nag窗口 会先出现如下nag窗口,持续几秒 2.注册窗口: 出现错误会提示:You Get Wrong  Try Again 破解: 1.查壳: 无壳, ...

  10. .NET WebSockets 核心原理初体验

    上个月我写了<.NET gRPC核心功能初体验>, 里面使用gRPC双向流做了一个打乒乓球的Demo, 实时双向这两个标签是不是很熟悉,对, WebSockets也可以做实时双向通信. 本 ...