JavaScript中，所有存储的数据本质上都是对象的属性。数组的“值”实际上是其以数字为键的属性，而非数字键的属性则被视为普通对象属性。本文旨在澄清数组与对象属性的根本区别，强调当需要使用非数字键时应优先选择普通对象。我们将探讨如何利用Object.entries()遍历并筛选出对象或类数组结构中的所有属性，特别是那些非数字（非索引）的属性，并提供示例代码以指导实践。

JavaScript属性的本质：一切皆属性

在javascript中，无论是数组还是普通对象，其内部存储的数据都是以属性（property）的形式存在的。当我们执行以下代码时：

var array = []; array['test1'] = 'property 1'; // 字符串键属性 array[0] = 'value 1';         // 数字键属性

这两行代码本质上都在array这个对象上创建了属性并赋值。它们之间的唯一区别在于属性的键（或名称）的类型：一个是字符串’test1’，另一个是数字0。

JavaScript数组的特殊之处在于，它为数字键（即索引）提供了许多优化和特殊行为，例如length属性会自动更新、forEach、map等迭代方法默认只处理数字索引的元素。当你在数组上使用非数字键时，这些键仍然会作为普通属性存在于数组对象上，但它们不会影响length属性，也不会被标准的数组迭代方法所处理。这导致了许多开发者对“值”和“属性”的混淆。实际上，数组的“值”就是那些以数字为键的属性。

何时使用数组，何时使用对象

理解了属性的本质后，选择正确的数据结构至关重要：

1. 使用数组 ([])：

   立即学习“Java免费学习笔记（深入）”；

   • 当你需要存储一个有序的元素集合时。
   • 当元素的访问主要通过数字索引进行时。
   • 数组提供了丰富的操作方法（如push, pop, splice, forEach, map, filter等），这些方法都是针对数字索引的元素设计的。

2. 使用普通对象 ({})：

   • 当你需要存储无序的键值对集合时。
   • 当元素的访问主要通过字符串键（或符号键）进行时。
   • 对象更适合表示具有命名属性的实体（例如，一个用户的详细信息，{ name: ‘Alice’, age: 30 }）。

最佳实践：避免在数组上使用非数字键。虽然JavaScript允许这样做，但这会破坏数组作为有序列表的语义，并可能导致代码难以理解和维护。如果你需要使用非数字键来存储数据，那么一个普通对象是更合适的选择。

获取所有属性：Object.entries()

无论是一个普通对象还是一个包含了非数字键的“类数组”对象，你都可以使用Object.entries()方法来获取其所有的可枚举属性（包括数字键和非数字键）。Object.entries()会返回一个数组，其中每个元素都是一个[key, value]对。

即构数智人

即构数智人是由即构科技推出的ai虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

41

查看详情

以下是如何遍历一个包含数字和非数字键的对象的示例：

// 示例对象，模拟可能包含数字和非数字键的情况 const dataContainer = {}; dataContainer['test1'] = '属性值 1'; dataContainer['test2'] = '属性值 2'; dataContainer[0] = '数组值 0'; dataContainer[1] = '数组值 1';  console.log("--- 遍历所有属性（包括数字键和非数字键）---"); Object.entries(dataContainer).forEach(([key, value]) => {     console.log(`${key}: ${value}`); }); /* 输出： 0: 数组值 0 1: 数组值 1 test1: 属性值 1 test2: 属性值 2 */

注意：Object.entries()返回的属性顺序在ES2015规范中是确定的：首先是数字键（按升序），然后是字符串键（按插入顺序），最后是Symbol键。

筛选非数字属性

如果你只想获取那些非数字键的属性，可以在Object.entries()的结果上使用filter()方法，结合正则表达式来判断键是否为纯数字。

const dataContainer = {}; dataContainer['test1'] = '属性值 1'; dataContainer['test2'] = '属性值 2'; dataContainer[0] = '数组值 0'; dataContainer[1] = '数组值 1'; dataContainer['3a'] = '混合键 3a'; // 包含数字但不是纯数字  console.log("n--- 筛选非数字键的属性 ---"); Object.entries(dataContainer)     .filter(([key]) => !/^d+$/.test(key)) // 过滤掉键是纯数字的属性     .forEach(([key, value]) => {         console.log(`${key}: ${value}`);     }); /* 输出： test1: 属性值 1 test2: 属性值 2 3a: 混合键 3a */

在上述代码中：

• filter(([key]) => …)：对每个[key, value]对，只关注其键key。
• !/^d+$/.test(key)：这是一个正则表达式测试。
  • ^：匹配字符串的开始。
  • d+：匹配一个或多个数字字符。
  • $：匹配字符串的结束。
  • test(key)：如果key是一个仅由数字组成的字符串（例如”0″, “1”, “123”），则返回true。
  • !：取反，因此!/^d+$/.test(key)会筛选出那些不是纯数字键的属性。

注意事项与总结

• 选择正确的数据结构：这是JavaScript编程中的一个基本原则。使用数组处理有序列表，使用对象处理命名键值对。这不仅能让你的代码更清晰，还能充分利用语言特性和性能优化。
• 理解length属性：数组的length属性只反映数字索引的最大值加一，不会受到非数字键属性的影响。
• 迭代行为：forEach, map等数组方法只会遍历数字索引的元素。for…in循环会遍历所有可枚举属性（包括数字和非数字键），但它也可能遍历原型链上的属性，并且顺序不保证，因此通常不推荐用于数组迭代。Object.keys(), Object.values(), Object.entries()是更现代、更安全、更可预测的迭代对象属性的方法。

通过本文，我们澄清了JavaScript中“值”与“属性”的误区，强调了数组与普通对象的正确使用场景，并提供了获取和筛选非数字键属性的实用方法。掌握这些概念和技巧，将有助于你编写更健壮、更符合JavaScript惯例的代码。