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

还有一点需要格外注意,解构对象 变量的名称一定要和右边对象的属性名称保持一致 ,否则会提示变量的值为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]

小节

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/8bad4bbb197440f94783bf1c7bfded4e.html