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

我们经常可以在其他编程语言(如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]

小节

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

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

(0)

相关推荐

  • ES6新特性四:变量的解构赋值实例

    本文实例讲述了ES6新特性之变量的解构赋值.分享给大家供大家参考,具体如下: 1. 数组的解构赋值 //① 可以从数组中提取值,按照对应位置,对变量赋值 var [a, b] = [1, 2]; //a = 1;b = 2 //② 下面是一些使用嵌套数组进行解构 var [d, [[c], f]] = [1, [[2], 3]]; var [,,third] = ["foo", "bar", "baz"];//third = "baz&

  • 解析JavaScript的ES6版本中的解构赋值

    什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray

  • es6基础学习之解构赋值

    前言 es6的语法已经出了很长的时间了,在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法,但是依旧有很多开发在写代码的时候,依旧没有用es6的语法,而是习惯使用老的语法,这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势,让大家从根本上了解es6语法的优势 下面话不多说了,来一起看看详细的介绍吧 基本用法 数组解构 让我们一起先来看数组解构的基本用法: let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3 let

  • ES6 对象的新功能与解构赋值介绍

    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始值可以简写,并可以使用可计算的属性名称.对象方法的定义消除了冒号和 function 关键字,示例如下: // Demo1 var value = "name", age = 18 var person = { age, // age: age ['my' + value]: 'Jenny

  • es6中的解构赋值、扩展运算符和rest参数使用详解

    前言 本文主要给大家介绍了关于es6中解构赋值.扩展运算符和rest参数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. es6中较为常用的书写风格 为了书写的方便,es6中提出了很多比较友好的书写方式,其中最为常见的属于以下几个: 字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1, 2, 3] 扩展运算符 rest参数 ... 本文希望能够学习其中的主要的用法,方便书写和简洁性. 字符串模板 在以前的日子,我们经常捡到各

  • ES6解构赋值的功能与用途实例分析

    本文实例讲述了ES6解构赋值的功能与用途.分享给大家供大家参考,具体如下: (1)交换变量的值 [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回.有了解构赋值,取出这些值就非常方便. // 返回一个数组 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返

  • ES6入门教程之变量的解构赋值详解

    前言 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值,下面话不多说了,来一起看看详细的介绍吧 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构. 在ES6之前想要为变量赋值,只能指定其值,如下: let a = 1; let b = 2 而在ES6中可以写成这样,如下: let [a,b] = [1,

  • 基于ES6作用域和解构赋值详解

    ES6 强制开启严格模式 作用域 •var 声明局部变量,for/if花括号中定义的变量在花括号外也可访问 •let 声明的变量为块作用域,变量不可重复定义 •const 声明常量,块作用域,声明时必须赋值,不可修改 // const声明的k指向一个对象,k本身不可变,但对象可变 function test() { const k={ a:1 } k.b=3; console.log(k); } test()解构赋值 { let a, b, 3, rest; [a, b, c=3]=[1, 2]

  • ES6解构赋值实例详解

    本文实例讲述了ES6解构赋值.分享给大家供大家参考,具体如下: 基本用法 let [x, y, ...z] = ['a'] //"a", undefined, [] 1.等号右边如果不是数组,将会报错(不是可遍历结构) 2.解构赋值 var, let, const命令声明均适用 3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值) set解构:任何类型的单个值的集合 let [x, y, z] = new Set(["a", "b

  • ES6学习之变量的解构赋值

    变量的解构赋值 ES6中允许按照一定模式,从数组和对象中提取,对变量进行赋值. 数组的解构赋值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代码标示可以从数组中提取值,按照位置的对应关系对变量进行赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [foo,[[bar],baz]] = [1,[[2],3]]; foo //1; bar //2; baz //3; let [,

随机推荐