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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php Try Catch异常测试
2009/03/01 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP实现的json类实例
2015/07/28 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
PHP7 其他修改
2021/03/09 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python开头的coding设置方法
2019/08/08 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
企业党员岗位承诺书
2015/04/27 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS