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 相关文章推荐
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
javascript RegExp 使用说明
May 21 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
JS实现公告上线滚动效果
Jan 10 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
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
php实现websocket实时消息推送
2018/03/30 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
js中有关IE版本检测
2012/01/04 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
Jquery中"$(document).ready(function(){ })"函数的使用详解
2013/12/30 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
React组件生命周期详解
2017/07/03 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
Python 探针的实现原理
2016/04/23 Python
python 字符串和整数的转换方法
2018/06/25 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python面向对象程序设计示例小结
2019/01/30 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
Python wordcloud库安装方法总结
2020/12/31 Python
铲车司机岗位职责
2014/03/15 职场文书
个人汇报材料范文
2014/12/30 职场文书
大学生入党自荐书
2015/03/05 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫