ES6基础之解构赋值(destructuring assignment)


Posted in Javascript onFebruary 21, 2019

我们经常可以在其他编程语言(如GO语言)中看到多返回值这种特性,因为在很多实际场景中,函数的返回值中,函数的返回值并不只有一个单一的值。ES6之前,并没有可以直接使用语法来实现多返回值的特性。ES6终于出现了解构赋值的语法糖来解决此类问题。

解构赋值是一种表达式,允许您使用数组或对象,将可迭代对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行多个变量的赋值,大大的减少了代码量。解构表达式有两种:array和object。

今天的文章笔者将从以下方面进行介绍:

  • 使用数组表达式解构赋值
    • 常规用法
    • 忽略数组中的某些值
    • 使用展开语法
    • 默认参数值
    • 嵌套数组解构
    • 作为函数参数
  • 使用对象表达式解构赋值
    • 常规用法
    • 默认参数值
    • 嵌套对象
    • 作为函数参数
  • 其他
    • 解构对象的方法
    • 获取字符串长度
    • 拆分字符串
    • 交换变量
    • 遍历Map结构
    • 加载指定模块的方法
  • 常用场景介绍

使用数组表达式解构赋值

常规用法

如何将一个数组的值,赋值给多个变量?数组解构语法能让我们快速的迭代数组的元素,并赋值给多个变量。

E6之前,我们可以这种形式将数组的内容赋值给多个变量:

var myArray = [1, 2, 3];
var a = myArray[0];
var b = myArray[1];
var c = myArray[2];

ES6后,我们可以通过数组解构语法,在一行语句里完成上述操作。

let myArray = [1, 2, 3];
let a, b, c;
[a, b, c] = myArray; //array destructuring assignment syntax

上述代码中,[a, b, c]就是解构表达式。在数组解构语句的左侧就是需要进行赋值的多个变量,等号右侧则是我们需要分配的值。

我们还可以让上述代码更短,你还可以这么写,代码如下:

let [a, b, c] = [1, 2, 3];

我们在同一行语句中创建变量,而不是分别创建。是不是更清爽。

如果左边的数值少于右边数组的项数,左边变量的值只会和右边数组的内容一一对应,多于的内容将会忽略。

忽略数组中某些值

如果只有两个变量,我们数组内容有三项,我们想跳过数组中的第二项,我们如何使用数组解构赋值呢?代码如下:

let [a, , b] = [1, 2, 3];
console.log(a);
console.log(b);

上述代码我们使用, ,忽略数组中的第二项,建议中间有空格,方便我们阅读。

使用展开语法

上篇文章 《【ES6基础】展开语法(Spread syntax)》 ,笔者介绍了展开语法的几个应用场景,由于上篇文章没介绍解构赋值,所以在这里给大家介绍展开语法在解构赋值的应用。如下段代码所示:

let [a, ...b] = [1, 2, 3, 4, 5, 6];
console.log(a);
console.log(Array.isArray(b));
console.log(b);”

上述代码则会输出:

1
true
2,3,4,5,6

上述代码,你可以看到b变量被解构赋值成数组,这里...就是我们上篇文章提到的剩余参数场景的运用。

如果想跳过数组中的部分值,我们可以这么做,如下段代码所示:

let [a, , ,...b] = [1, 2, 3, 4, 5, 6];
console.log(a);
console.log(b);

上述代码则会输出:

1
4,5,6

这段代码我们跳过了数组的第2项和第3项。

默认参数值

笔者在 《【ES6基础】默认参数值》 给大家介绍了如何使用默认参数值,在解构赋值中,我们如何设置变量的默认值呢,如下段代码所示:

let [a, b, c = 3] = [1, 2];
console.log(c); //Output "3”

嵌套数组

我们还可以从多维数组中提取值并分配给变量,如下段代码所示:

let [a, b, [c, d]] = [1, 2, [3, 4]];

作为函数参数

我们还可以使用数组解构表达式作为函数参数来提取可迭代数组的值,作为参数传递给函数参数,如下段代码所示:

function myFunction([a, b, c = 3]) {
   console.log(a, b, c); //Output "1 2 3"
  }
myFunction([1, 2]);

笔者在《【ES6基础】默认参数值》 提及到我们可以传递undefined,指定某个具体的参数使用默认值,我们可以使用结构赋值为相关变量提供一组默认值,并传入undefined,如下段代码所示:

function myFunction([a, b, c = 3] = [1, 2, 3]) {
   console.log(a, b, c); //Output "1 2 3"
  }
myFunction(undefined);

在这里,我们将undefined作为参数传递,因此使用默认数组[1,2,3]进行提取赋值。

使用对象表达式解构赋值

常规用法

对象解构赋值将对象属性的值赋给多个变量。ES6之前我们可以这样把对象的属性赋值给多个变量,如下段代码所示:

var object = {name : "John", age : 23};
var name = object.name;
var age = object.age;

在ES6里,我们可以使用对象解构表达式,在单行里给多个变量赋值,如下段代码所示:

let object = {name : "John", age : 23};
let name, age;
({name, age} = object); //object destructuring assignment syntax

对象解构赋值的左侧为解构赋值表达式,右侧为对应要分配赋值的对象。解构语句的两边千万 不要遗漏左右括号() ,否则会报错。

还有一点需要格外注意,解构对象 变量的名称一定要和右边对象的属性名称保持一致 ,否则会提示变量的值为undefined。如果你想以其它的变量名进行命名,你可以这么做,如下段代码所示:

let object = {name : "John", age : 23};
let x, y;
({name: x, age: y} = object);

上述代码x,y为对应对象属性的值John,23。如果你输出name或age,编译器则会提示ReferenceError: 变量 is not defined

我们可以让代码更短,如下段代码所示:

let {name: x, age: y} = {name : "John", age : 23};

上述代码由于声明变量和解构赋值在同一行,因此对象解构语句两边无需左右括号()。

默认参数值

在解构对象针对未分配值的变量,我们可以为变量提供默认值,如下段代码所示:

let {a, b, c = 3} = {a: "1", b: "2"};
console.log(c); //Output "3”

在解构对象时变量名支持表达式计算,如下段代码所示:

let {["first"+"Name"]: x} = { firstName: "Eden" };
console.log(x); //Output "Eden”

嵌套对象

我们还可以从嵌套对象中提取属性值,即对象中的对象。 如下段代码所示:

let {name, otherInfo: {age}} = {name: "Eden", otherInfo: {age:23}};
console.log(name, age); //Eden 23

作为函数参数

就像数组解构赋值一样,我们也可以使用对象解构赋值作为函数参数,如下段代码所示:

function myFunction({name = 'Eden', age = 23, profession ="Designer"} = {}){
  console.log(name, age, profession); // Outputs "John 23 Designer"
}
myFunction({name: "John", age: 23});

在这里,我们传递一个空对象作为默认参数值,如果将undefined作为函数参数传递,变量将使用默认值。

其他

解构对象的方法

比如结构Math对象的方法,如下段代码所示:

let {floor,pow}=Math;//把Math里的方法提取出来变成一个变量
let a=1.1;
console.log(floor(a));//1
console.log(pow(2,3));//8

获取字符串的长度

var {length}='lxy';
console.log(length);//3

拆分字符串

var [a,b,c,d]='前端达人';
console.log(a,b,c,d) // 输出:前 端 达 人

交换变量

let x = 1;
let y = 2;
[x, y] = [y, x];

遍历Map结构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

加载指定模块的方法

const { SourceMapConsumer, SourceNode } = require("source-map");

常用场景介绍

比如我们经常与后端API接口做数据交互,我们需要处理返回的JSON对象,使用解构方式大大简化了我们的代码,如下段代码所示:

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

小节

今天的内容有些多,想必大家对解构赋值有了全面的认识吧,使用解构赋值是不是很强大,大大简化了我们的代码量,虽然优势蛮多,但是增加对代码的理解难度,我们只有在实践中不断的运用,来加深我们对解构赋值的认识。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
vue.js表格分页示例
Oct 18 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
ES6基础之展开语法(Spread syntax)
Feb 21 #Javascript
ES6基础之默认参数值
Feb 21 #Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 #Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 #Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 #Javascript
详解Puppeteer前端自动化测试实践
Feb 21 #Javascript
javascript中join方法实例讲解
Feb 21 #Javascript
You might like
PHP版本常用的排序算法汇总
2015/12/20 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
客服工作职责
2013/12/11 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
同志主要表现材料
2014/08/21 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle