解构赋值是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. java例题_49 计算子串出现的次数

    1 /*49 [程序 49 子串出现的个数] 2 题目:计算字符串中子串出现的次数 3 */ 4 5 /*分析 6 * 1.子串的出现是有标志的,如" ",*,#或者其他 7 * ...

  2. Python基础之:struct和格式化字符

    目录 简介 struct中的方法 格式字符串 字节顺序,大小和对齐方式 格式字符 格式数字 格式字符 格式字符串 填充的影响 复杂应用 简介 文件的存储内容有两种方式,一种是二进制,一种是文本的形式. ...

  3. Redis初学

    1. redis     1. 概念     2. 下载安装     3. 命令操作         1. 数据结构     4. 持久化操作     5. 使用Java客户端操作redis Redi ...

  4. 【Azure Developer】调用SDK的runPowerShellScript方法,在Azure VM中执行PowerShell脚本示例

    当需要通过代码的方式执行PowerShell脚本时,可以参考以下的示例. Azure SDK中提供了两个方法来执行PowerShell脚本 (SDK Source Code: https://gith ...

  5. 做个开源博客学习Vite2 + Vue3 (三)博客设计和代码设计

    项目搭建好了之后是不是可以编码了呢? 等等不要着急,我们是不是应该先设计一下?比如博客的功能等? 博客设计 先做个简单的个人博客,因为是个人版,所以可以省略注册.登录这些功能,表结构也可以简单一点. ...

  6. IdentityServer4+OAuth2.0+OpenId Connect 详解

    一  Oauth 2.0 1 定义 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. ...

  7. 漫画 | 公司测试因提Bug不规范,锒铛入狱~

    互联网人罪状系列 1.上班第一天,前端把后端告上县衙,还列了 5 宗罪 2. 程序员状告产品经理八大罪状 (上) 3.程序员状告产品经理八大罪状(下) 开发人员与测试人员的关系,就如同程序员与产品经理 ...

  8. vue.js中$emit的理解

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. PHP 导出 CSV 0开头数据丢失问题处理

    PHP导出csv格式时,0开头会被office软件省略,如何处理?比如:033736 导出csv时会被excel转换成 33736 展示,不符合业务需求.处理方案: 微信支付的导出是这么处理的,加个反 ...

  10. 【Springboot】Springboot自动装配原理

    1.核心注解就是 EnableAutoConfiguration  该注解会激活SpringBoot的自动装配功能: 代码如下: @Target(ElementType.TYPE) @Retentio ...