搜索
首页web前端js教程JavaScript对象解构用法解析(实例详解)

本篇文章给大家带来了JavaScript中对象解构用法解析的相关知识,希望对大家有帮助。

JavaScript对象解构用法解析(实例详解)

ES6(ES2015)的发布,给JavaScript 提供了一种更方便快捷的方式来处理对象的属性。该机制称为Destructuring(也称为解构赋值)。但是你真的会用吗?你真的了解各种场景下,解构赋值的用法吗?

使用解构从对象中获取值

对象解构最基本的用法是从对象中检索属性键的值。

例如,我们定义了一个对象,他有两个属性:name和age

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

传统上,我们将使用点 (.) 表示法或下标 ([]) 表示法从对象中检索值。下面的代码片段显示了使用点符号检索对象的值id和name从对象中检索值的示例。employee

在之前我们想要获取对象中某个属性的值,通产是使用.或者[]。

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对象属性值的函数。这里我们使用了[],来接受参数,js会根据这个键对从对象中检索!

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}岁!!!`);
}

07.png

相关推荐:javascript学习教程

以上是JavaScript对象解构用法解析(实例详解)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:掘金。如有侵权,请联系admin@php.cn删除
幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python vs. JavaScript:开发环境和工具Python vs. JavaScript:开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器