点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

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

来源：动视网责编：小采时间：2020-11-27 22:00:44

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

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

推荐度：

点击下载本文 文档为doc格式

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

上述代码，你可以看到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]

小节

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

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

推荐度：

点击下载本文 文档为doc格式

标签： des 赋值 ES6

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐