《ECMAScript 6 入门》【二、变量的解构赋值】(持续更新中……)
前言:
让我们看下es6的新语法解构,跟模式匹配类似。
一、数组的解构赋值
举个例子给多个变量赋值的写法:
var a =1;
var b =2;
var c =3;
需要写多个变量特别麻烦,我们先使用以前的简化方法。
var a=1,b=2,c=3;
现在es6引入了解构,我们可以使用数组的解构赋值来更简便的进行赋值。
1、完全解构
let [a,b,c]=[1,2,3];
可以从数组中提取值,按照对应位置,对变量赋值。本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
接下来,我们再举几个例子:
// 1、一一对应
let [,v]=[,1];
console.log(v) // 1
// 2、可以利用扩展符合并数组项
let [a,…b]=[1,2,3];
console.log(a) // 1
console.log(b) //[2,3]
// 3、如果左边不能一一对应右边的话,使用扩展符并且位置在末尾时,打印的为空数组,c没有对应,则是undefined;
let [a,c,…b]=[1];
console.log(a); // 1
console.log(b); // []
console.log; // undefined
// 4、如果没有一一对应的情况下,扩展符在中间,就会出错 let [a,...b,d,c]=[1];
这种情况也一样
let [a,…b,c]=[1];
// Uncaught SyntaxError: Rest element must be last element
如果解构不成功,变量的值就等于undefined。在第4种情况中,我们把…b的位置放在中间,就会出错,而放在末尾只是打印空数组。
我们再举几个实际用到的例子,比如说交换值。以前交换值必须再声明定义一个变量,就像这样。
var a = 10;
var b = 20;
var temp = a;
a = b;
b = temp;
看起来,比较绕而且代码长,现在我们使用了es6的解构,可以这样。
let a = 10;
let b = 20;
[a,b] = [b,a];
2、不完全结构
接下来,我们来看下一个特殊的例子,叫做不完全解构。就是等号左边的模式,只匹配一部分的等号右边的数组
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
3、默认值
let [x, y = 'b'] = ['a', 'c'];
console.log(y) // 'c'
let [x, y = 'b'] = ['a'];
console.log(y) // 'b'
let [x, y = 'b'] = ['a', undefined];
console.log(y) // 'b'
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119862313
最新文章
- 记录一次fat32格式U盘不识别问题
- Oracle数据库表结构导出
- 为Android GridView 设置行背景
- 在shell脚本中使用alias
- 201521123069 《Java程序设计》第1周学习总结
- Flask入门之触发器,事件,数据迁移
- awk的递归
- C# 中的#if、#elif、#else、#endif等条件编译符号
- STS的安装以及IDEA安装和破解过程
- C++ Programming Language中的Calculator源代码
- [UE4]基于物理的材质
- 王家林系列之scala--第69讲:Scala并发编程react、loop代码实战详解
- android studio 自定义控件
- ES6新特性6:模块Module
- 大规模Docker平台自动化监控之路
- php 连接redis
- 设置手机iphone5s邮件
- numeric_limits<;>;函数
- WCF 自承载 提供源码
- Excel&;&;word&;&;PPT
热门文章
- MySQL 的发展历史和版本分支
- java实现MD5文件加密
- Java学习day39
- Nuxt.js(二、解决首屏速度与SEO)
- ui-route的一般用法 ,比较简单。在平时项目也用到,但是我也要记下来,虽然是&#39;借鉴的&#39;,取其精华
- 2021.07.20 CF1477A Nezzar and Board(最大公因数,未证)
- ElasticSearch7.3学习(十九)---- deep paging
- Vue_基础功能循环、计算、绑定、事件处理、组件
- DFA算法之内容敏感词过滤
- 项目开发字符串模型strstr_while