解构赋值

2023-09-20 09:56| 来源: 网络整理| 查看: 265

基本赋值

const user = { id: 42, isVerified: true, }; const { id, isVerified } = user; console.log(id); // 42 console.log(isVerified); // true 赋值给新的变量名

可以从对象中提取属性，并将其赋值给名称与对象属性不同的变量。

const o = { p: 42, q: true }; const { p: foo, q: bar } = o; console.log(foo); // 42 console.log(bar); // true

举个例子，const { p: foo } = o 从对象 o 中获取名为 p 的属性，并将其赋值给名为 foo 的局部变量。

赋值到新的变量名并提供默认值

一个属性可以同时是两者：

从对象提取并分配给具有不同名称的变量。指定一个默认值，以防获取的值为 undefined。

const { a: aa = 10, b: bb = 5 } = { a: 3 }; console.log(aa); // 3 console.log(bb); // 5 从作为函数参数传递的对象中提取属性

传递给函数参数的对象也可以提取到变量中，然后可以在函数体内访问这些变量。至于对象赋值，解构语法允许新变量具有与原始属性相同或不同的名称，并为原始对象未定义属性的情况分配默认值。

请考虑此对象，其中包含有关用户的信息。

const user = { id: 42, displayName: "jdoe", fullName: { firstName: "Jane", lastName: "Doe", }, };

在这里，我们展示了如何将传递对象的属性提取到具有相同名称的变量。参数值 { id } 表示传递给函数的对象的 id 属性应该被提取到一个同名变量中，然后可以在函数中使用。

function userId({ id }) { return id; } console.log(userId(user)); // 42

你可以定义提取变量的名称。在这里，我们提取名为 displayName 的属性，并将其重命名为 dname，以便在函数体内使用。

function userDisplayName({ displayName: dname }) { return dname; } console.log(userDisplayName(user)); // `jdoe`

嵌套对象也可以提取。下面的示例展示了属性 fullname.firstName 被提取到名为 name 的变量中。

function whois({ displayName, fullName: { firstName: name } }) { return `${displayName} is ${name}`; } console.log(whois(user)); // "jdoe is Jane" 设置函数参数的默认值

默认值可以使用 = 指定，如果指定的属性在传递的对象中不存在，则将其用作变量值。

下面我们展示了一个默认大小为 big的函数，默认坐标为 x: 0, y: 0，默认半径为 25。

function drawChart({ size = "big", coords = { x: 0, y: 0 }, radius = 25, } = {}) { console.log(size, coords, radius); // do some chart drawing } drawChart({ coords: { x: 18, y: 30 }, radius: 30, });

在上面 drawChart 的函数签名中，解构的左侧具有空对象 = {} 的默认值。

你也可以在没有该默认值的情况下编写该函数。但是，如果你省略该默认值，该函数将在调用时寻找至少一个参数来提供，而在当前形式下，你可以在不提供任何参数的情况下调用 drawChart()。否则，你至少需要提供一个空对象字面量。

有关详细信息，请参阅默认参数值 > 有默认值的解构参数。

解构嵌套对象和数组

const people = [ { name: "Mike Smith", family: { mother: "Jane Smith", father: "Harry Smith", sister: "Samantha Smith", }, age: 35, }, { name: "Tom Jones", family: { mother: "Norah Jones", father: "Richard Jones", brother: "Howard Jones", }, age: 25, }, ]; for (const { name: n, family: { father: f }, } of people) { console.log(`Name: ${n}, Father: ${f}`); } // "Name: Mike Smith, Father: Harry Smith" // "Name: Tom Jones, Father: Richard Jones" 对象属性计算名和解构

计算属性名，如对象字面量，可以被解构。

const key = "z"; const { [key]: foo } = { z: "bar" }; console.log(foo); // "bar" 无效的 JavaScript 标识符作为属性名称

通过提供有效的替代标识符，解构可以与不是有效的 JavaScript 标识符的属性名称一起使用。

const foo = { "fizz-buzz": true }; const { "fizz-buzz": fizzBuzz } = foo; console.log(fizzBuzz); // true

【本文地址】

解构赋值

解构赋值

今日新闻

推荐新闻