在ES 6中从对象中获取属性

在现代的 JavaScript 编程中,以对象为基础的编程已经成为了一种非常普遍的方式。然而,在处理对象时,有时我们只需要其中的某些属性,而不是整个对象。在 ES 6 中,我们可以使用一种新的语法来更方便地获取对象的属性。

对象解构(Object Destructuring)

对象解构是一种可以让我们从对象中提取属性并将其分配给变量的语法。它使得代码更加简洁易读。这是一个基本的用法示例:

----- ------ - -
  ----- --------
  ---- ---
  ------- --------
--

----- - ----- --- - - -------

------------------ -- -------
----------------- -- --

上面的代码声明了一个 person 对象,并使用对象解构从中提取出 nameage 属性。通过使用花括号 {},我们可以指定要提取的属性名,然后将其分配给相应的变量。

如果你想将属性赋值给不同的变量名,可以使用下面这样的语法:

----- - ----- --------- ---- -------- - - -------

---------------------- -- -------
---------------------- -- --

在上面的代码中,我们指定了 name 属性应该被赋值给变量 fullNameage 属性应该被赋值给变量 yearsOld

对象解构还支持默认值。当属性的值为 undefined 时,将使用默认值。下面是一个示例:

----- - ---- - ------------ ---------- - ------------ - - ---

------------------ -- -----------
------------------------ -- ------------

在上面的代码中,我们使用了空的对象,并指定了默认值。由于空对象没有 nameoccupation 属性,因此它们使用了我们提供的默认值。

嵌套对象解构(Nested Object Destructuring)

如果对象的某个属性是另一个对象,那么我们可以使用嵌套对象解构来访问该属性的属性。以下是一个嵌套对象解构的示例:

----- ------ - -
  ----- --------
  ---- ---
  -------- -
    ------- ---- ---- ----
    ----- ----------
    ------ ----
  -
--

----- - ----- -------- - ---- - - - -------

------------------ -- -------
------------------ -- ---------

在上面的代码中,我们通过嵌套对象解构获取了 city 属性。注意,我们必须指定 address 属性名,然后再从中获取 city 属性。

数组解构(Array Destructuring)

除了对象解构,ES 6 还引入了数组解构,它可以从数组中提取元素并将其分配给变量。以下是一个基本的用法示例:

----- ------- - --- -- ---

----- ------- ------- - --------

------------------- -- -
-------------------- -- -

在上面的代码中,我们从 numbers 数组中提取了前两个元素,并将它们分配给变量 firstsecond

与对象解构类似,数组解构也支持默认值和嵌套解构。这里不再赘述。

结论

ES 6 中的对象解构和数组解构是 JavaScript 编程的有用工具,可以大大简化代码,提高代码质量和可读性。通过使用它们,我们可以更方便地访问对象和数组中的属性和元素。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/10742


猜你喜欢

  • 运行独立的 V8 引擎

    什么是 V8 引擎? V8 是一款由 Google 开发的 JavaScript 引擎。它被广泛用于 Chromium 浏览器和 Node.js 等应用程序中。作为一款高性能的引擎,V8 能够快速编译...

    7 年前
  • 构造函数与工厂函数

    当我们在学习 JavaScript 的时候,经常会听到构造函数和工厂函数这两个概念。虽然它们都可以用来创建对象,但是它们之间还是存在着一些区别和适用场景的。 构造函数 构造函数是一种特殊的函数,它可以...

    7 年前
  • React.js:组件包装技巧

    React.js 是一个流行的前端框架,它提供了一种适用于构建交互式用户界面的声明式编程模型。在 React 中,组件是构建应用程序的基本单元。 在开发大型应用程序时,我们常常需要重复使用一些常见的功...

    7 年前
  • 如何用jQuery手动触发验证?

    在前端开发中,表单验证是不可或缺的。使用jQuery插件可以快速地实现对表单的验证,但是有时候需要手动控制验证的触发时机。本文将介绍如何使用jQuery手动触发表单验证。

    7 年前
  • 调用一个变量中命名的JavaScript函数

    在JavaScript中,函数可以被定义并存储在一个变量中。如果您需要在代码中调用这个变量中存储的函数,本文将介绍如何做到这一点。 使用函数表达式定义函数 首先,让我们看一下如何使用函数表达式定义一个...

    7 年前
  • 如何在JavaScript中进行字符串替换操作

    在前端开发中,我们经常需要对字符串进行替换操作。JavaScript提供了非常方便的方法来实现这个目标,那就是使用 replace() 函数。本文将介绍如何使用 replace() 函数实现字符串替换...

    7 年前
  • 算符优先与JavaScript三元运算符

    在JavaScript中,算符优先级(Operator Precedence)非常重要,它可以决定不同操作符的执行顺序。如果你不熟悉它,可能会导致代码出现难以发现的错误。

    7 年前
  • JavaScript表单提交-确认或取消提交对话框

    在前端开发中,表单提交时通常需要用户确认是否真的要提交数据。为了提高用户体验和防止误操作,我们可以使用JavaScript编写一个确认或取消提交对话框。 实现思路 监听表单提交事件。

    7 年前
  • 如何使用jQuery检查文件输入大小?

    在前端开发中,我们经常需要检查用户上传的文件大小是否符合要求。使用jQuery可以非常方便地完成这个任务。 获取文件大小 要获取文件大小,我们需要先获取文件对象。在HTML中,我们可以通过<in...

    7 年前
  • 如何用javascript获取URL参数?[重复]

    抱歉,我无法写出重复的文章。 但是我可以简要介绍如何使用JavaScript获取URL参数: 在JavaScript中,有一种称为 "URLSearchParams" 的内置对象可用于获取现代浏览器中...

    7 年前
  • 禁用表单自动提交按钮单击

    背景介绍 在前端开发中,表单是一个非常常见的元素。表单通常包括多个文本输入框、下拉列表等控件以及一个提交按钮。当用户在表单中输入数据后,点击提交按钮可以将表单数据发送到服务器进行处理。

    7 年前
  • 最好的内容类型为 JSONP?

    在前端开发中,我们通常需要跨域请求数据。不过,由于同源策略 (Same Origin Policy) 的限制,直接通过 AJAX 请求跨域资源是不被允许的。此时,JSONP 就成了一个非常实用的解决方...

    7 年前
  • JavaScript的forEach循环对数组对象

    在 JavaScript 中,forEach() 是一个用于数组对象的迭代方法。它可以遍历数组中的每个元素,并执行指定的函数来处理每个元素。在本文中,我们将深入探讨 forEach() 的使用方法和一...

    7 年前
  • 如何检查是否加载了背景图像?

    在前端开发中,图片的加载是非常重要的一部分。而有时候我们需要知道背景图像是否已经被成功加载,进行后续操作或者提供用户友好的交互体验。那么,该如何检查背景图像是否已经加载呢?接下来,我将详细介绍一些方法...

    7 年前
  • Chrome撤销“阻止此页创建附加对话框”操作

    背景 在浏览器的安全策略中,弹窗是一项被禁止或者限制的行为。Chrome 浏览器也不例外,在用户访问网站时会提示是否允许网站创建弹窗。 但有时候我们会误操作或者因为某些原因阻止了某些网站创建弹窗,导致...

    7 年前
  • Gulp.js 任务,返回 SRC?

    Gulp.js 是前端开发中常用的构建工具之一。它可以帮助我们自动化完成一些重复性的任务,比如 CSS 和 JavaScript 的压缩、合并、编译以及文件的复制等等。

    7 年前
  • 如何动态加载减速器在应用代码分裂的重演?

    在前端开发中,减小首次加载时间是提高用户体验的关键。一种常见的做法是将应用代码分成多个chunks,然后按需加载。这样可以将初始加载时间缩短,但是当用户访问到某些不常用功能时,可能会遇到动态加载的延迟...

    7 年前
  • 前端技术:放大一个点(使用缩放和翻译)

    在前端开发中,经常需要实现放大一个点的功能,可以通过两种方式来实现:缩放和翻译。本文将详细讲解这两种方法的原理、实现方式以及相应的代码示例,并给出一些相关的学习和指导意义。

    7 年前
  • Chrome和Firefox的秘密拷贝到剪贴板函数?

    剪贴板是我们在进行网页操作时经常会用到的一个功能,比如复制粘贴文本内容或者图片。而在前端开发中,我们经常需要实现一些自动化或者快捷操作,比如将文本或者图片复制到剪贴板中。

    7 年前
  • 为什么“严格”在这个例子10x提高性能?

    在前端开发中,常常需要处理大量的数据和复杂的逻辑操作。对于这些问题,我们通常会采用一些优化技巧来提高代码的性能。其中一个比较常见的技术就是使用“严格模式”。 什么是严格模式? “严格模式”是 Java...

    7 年前

相关推荐

    暂无文章