JavaScript对象解构的用法实例解析

前言

随着ES6（即ES2015标准）的发布，JavaScript引入了一种更为便捷高效的对象属性处理方式，该技术被称为解构赋值（Destructuring）。你是否真正掌握了它的用法？是否清楚在不同场景下如何灵活运用解构赋值？

使用解构从对象中获取值

对象解构最基础的用途是从对象中提取属性键对应的值。

例如，我们定义了一个包含name和age两个属性的对象。

const User = {
  name: '搞前端的半夏',
  age: 18
}

传统上，我们会使用点（.）表示法或方括号（[]）表示法从对象中检索值。以下代码片段展示了使用点符号从employee对象中获取id和name值的示例。

以往获取对象属性值时，通常依赖.或[]操作符。

const name = User['name'];
const age = User.age;

当然，在当前简单场景下这两种方式并无不妥，但当User对象的属性增多时，我们需要不断复制粘贴代码，导致大量重复代码产生。

引入解构赋值后，我们可以快速获取值。例如，利用对象的键名创建变量，并将对象中对应键的值分配给该变量。这样无论属性有多少，只需指定属性名即可完成赋值，从而大幅减少重复代码。

const { name, age } = User;

使用解构从嵌套对象中获取值

在上述示例中，User仅为单层简单对象。而在日常开发中，我们常需处理嵌套对象。那么，如何利用解构赋值从嵌套对象中提取值呢？下面我们重新定义User对象，为其新增一个contact属性，该属性包含User的phone信息。

const User = {
  name: '搞前端的半夏',
  age: '18',
  contact:{
    phone:'110',
  }
}

若使用.操作符获取phone值，则需要连续调用两次。

const phone = User.contact.phone;

若使用解构赋值，则写法如下：

const  {contact:{phone}}=User
consosle.log(phone)  // 输出10.

无论嵌套层级多深，只要遵循此写法，即可准确获取具体值。

使用对象解构定义新变量及默认值

默认值

在日常开发中，我们可能会遇到各种极端情况。

例如，后端返回的对象可能缺失某些字段。

const User = {
  name: '搞前端的半夏',
}

或者属性值为空：

const User = {
  name: '搞前端的半夏',
  age: ''
}

当我们使用解构赋值时，无论age属性是否存在，都会创建age变量。

const { name, age } = employee;

当User.age没有具体值时，我们可以

const { name, age=18 } = employee;

为age指定一个默认值。

新变量

别急，解构还有更多精彩用法！如何创建一个全新变量，并分配一个基于对象属性值计算得出的结果？这听起来复杂，但请看以下示例。

当我们希望输出User属性的组合值时，应如何处理？

const { name,age,detail = `${name} 今年 ${age} `} = User ;
console.log(detail); // 输出：搞前端的半夏 今年 18 

使用JavaScript对象解构别名

在JavaScript对象解构中，你可以为解构出的变量指定别名（alias）。这非常有助于避免变量名冲突。

const User = {
  name: '搞前端的半夏',
  age: ''
}

假设我们想通过解构赋值获取age属性的值，但代码中已存在名为age的变量，此时便需在解构时定义别名。

const { age: userAge } = User;
console.log(userAge); //搞前端的半夏

如果直接使用age，则会报错。

console.log(age);

使用对象解构处理动态名称属性

我们经常将API响应数据作为JavaScript对象进行处理。这些对象可能包含动态数据，因此作为客户端，我们甚至可能事先不知道属性键的名称。

const User = {
  name: '搞前端的半夏',
  age: ''
}

当我们将键作为参数传递时，可以编写一个返回User对象属性值的函数。这里使用了[]来接受参数，JavaScript会根据该键从对象中检索值。

function getPropertyValue(key) {
    const { [key]: returnValue } = User;   
    return returnValue;
}

const contact = getPropertyValue('contact');
const name = getPropertyValue('name');

console.log(contact, name); // 空  搞前端的半夏

在函数参数和返回值中解构对象

使用对象解构进行传参

利用对象解构将属性值作为参数传递给函数。

const User = {
  name: '搞前端的半夏',
  age: 18
}

现在让我们创建一个简单函数，该函数利用name和dept属性值构建一条消息并登录到浏览器控制台。

function consoleLogUser({name, age}) {
  console.log(`${name} 今年 ${age}`); 
}

直接将值作为函数参数传递，并在内部使用它们。

consoleLogUser(User); // 搞前端的半夏 今年 18

解构函数对象返回值

对象解构在函数返回值的处理上还有另一种用法。如果函数返回一个对象，你可以直接将值解构为变量。让我们创建一个返回对象的函数。

function getUser() {
  return {
    'name': '搞前端的半夏',
    'age': 18
  }
}

const { age } = getUser();
console.log(age); // 18

在循环中使用对象解构

我们要讨论的最后一个（但同样重要）的用法是循环中的解构。让我们考虑一组员工对象数组。我们想要遍历该数组，并使用每个员工对象的属性值。

const User= [
  { 
       'name': '爱分享的半夏',
   		 'age': 16
  },
  { 
      'name': '搞前端的半夏',
   		 'age': 18
  },
  { 
        'name': '敲代码的半夏',
   		 'age': 20
  }
];

你可以使用for-of循环遍历User对象数组，然后利用对象解构赋值语法来提取详细信息。

for(let {name, age} of employees) {
  console.log(`${name} 今年${age}岁!!!`);
}

总结

至此，关于JavaScript对象解构用法的介绍到此结束。如需了解更多相关js对象解构用法内容，请搜索本站以前的文章或继续浏览下面的相关文章。希望大家以后多多支持本站！