ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

《ECMAScript 6 入门》【二、变量的解构赋值】(持续更新中……)

2022-06-15 18:35:30  阅读:192  来源: 互联网

标签:console log 解构 let ECMAScript 数组 var 赋值


前言:

让我们看下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

标签:console,log,解构,let,ECMAScript,数组,var,赋值
来源: https://www.cnblogs.com/wangchuanxinshi/p/16379391.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有