在 JavaScript 中，对象是一种非常重要的数据结构。我们经常需要对对象的属性进行读取、赋值和删除等操作。在 ES6 中，新增了动态属性名的特性，能够让我们更加灵活地操作对象的属性，提高代码的可读性和可维护性。
对象字面量中的动态属性名
在 ES6 中，我们可以在对象字面量中使用方括号 [] 来创建动态属性名，如下所示：
----- --- - - ------- ------ ------ -- --
这里的 name 和 age 都是变量，我们不需要在对象字面量中指定属性名，而是使用变量的值作为属性名。这样写的好处在于，我们可以通过变量来创建动态属性名，从而更加灵活地操作对象。
需要注意的是，使用动态属性名时，必须要用方括号 [] 包裹属性名，否则会报错。
对象中的计算属性名
在 ES6 中，对象字面量中的计算属性名和动态属性名的概念很相似。不同的是，计算属性名可以在对象已经创建之后通过 Object.defineProperty() 方法来添加动态属性名。
----- --- - ---
----- ---- - ------
----- --- - ------
-------------------------- ----- -
------ ------
--------- -----
----------- -----
------------- ----
---
-------------------------- ---- -
---- ---------- -
------ ---------
--
---- --------------- -
-------- - ------
--
----------- -----
------------- ----
---这个例子中，我们首先创建了一个空对象 obj，然后通过 Object.defineProperty() 方法为这个对象添加了两个动态属性名 name 和 age。
动态属性名的应用
可以看到，动态属性名在操作对象时非常灵活，因此被广泛地应用在前端开发中。下面我们来介绍两个常见的应用场景。
操作对象的动态属性
假设我们有一个页面需要展示很多文本框，这些文本框的 name 属性都不同，但我们需要在表单提交时将这些文本框的值一并提交。
如果我们用传统的方式操作每一个文本框，会非常麻烦。但如果使用动态属性名，只需要遍历表单中的所有元素，将它们的值存入一个对象中即可。
----- ---- - -------------------------------
----- -------- - ---
--- ---- ------- -- -------------- -
-- -------------- -
---------------------- - --------------
-
-这里的 formData 就是我们刚刚创建的动态属性名，通过遍历表单元素，将每个元素的 name 作为动态属性名，value 作为属性值存入 formData 对象中。这样就可以非常方便地提交表单了。
快捷获取对象属性
假设我们有一个表格，需要对表格中的数据进行排序。我们可以为表格中的每一列设定一个点击事件来实现排序功能。
-------
-------
----
--- -----------------------------------
--- ----------------------------------
-----
--------
-------
----
------------
-----------
-----
----
--------------
-----------
-----
--------
--------可以看到，我们为表头中的每一列都添加了一个点击事件，分别传递不同的参数。在 sortTable() 方法中，我们使用动态属性名来获取每一列的数据。
-------- --------------------- -
----- ---- - -------------------------------- -----
--- ---- --- -- ----- -
----- ---- - ----------------------------------------------------
------------------------------
-
-这个例子中，我们首先获取了表格中的所有行，然后遍历每一行。通过使用动态属性名 columnName，我们可以快速地获取每一列的数据。这样就可以实现非常便捷的表格排序功能了。
总结
ES6 中的动态属性名为我们的前端开发提供了非常便利的操作对象的手段，能够使我们的代码更加灵活、可读性更高。学习和掌握动态属性名的技能，能够在实际开发中提高我们的代码效率和开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e8de50f6b2d6eab3458093