还有一点需要格外注意,解构对象 变量的名称一定要和右边对象的属性名称保持一致 ,否则会提示变量的值为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]
小节
今天的内容有些多,想必大家对解构赋值有了全面的认识吧,使用解构赋值是不是很强大,大大简化了我们的代码量,虽然优势蛮多,但是增加对代码的理解难度,我们只有在实践中不断的运用,来加深我们对解构赋值的认识。