如何构建支持[]运算符且可访问对象属性的混合数据结构？

你观察得特别仔细！D3加载CSV后返回的这种特殊结构，本质上是给原生JavaScript数组添加了自定义属性的产物——因为在JS里，数组本身就是一种特殊的Object类型，所以它天然具备“既是数组（支持下标[]访问、数组方法）又是对象（可挂载任意属性）”的特性。

核心原理：数组在JS中的本质 #

在JavaScript中，typeof []返回object是语言本身的特性：数组是继承自Object的特殊对象，它拥有数组专属的方法（比如push、map）和下标访问能力，同时也能像普通对象一样添加、读取自定义属性。

手动构建这类结构的两种方法 #

方法1：直接给数组添加属性（最简单）

这也是D3内部采用的方式，直接创建数组后挂载属性即可：

// 1. 创建普通数组存储行数据
const myData = [
  { name: "Alice", score: 90 },
  { name: "Bob", score: 85 },
  { name: "Charlie", score: 95 }
];

// 2. 给数组添加自定义属性（比如模拟D3的columns）
myData.columns = ["name", "score"];

// 测试访问方式
console.log(myData[1]); // 输出 { name: "Bob", score: 85 }
console.log(myData.columns); // 输出 ["name", "score"]
console.log(typeof myData); // 输出 "object"

方法2：用Object.defineProperty精细控制属性

如果需要对属性的特性（比如是否可枚举、是否可修改）做更严格的控制，可以用这个API，比如让columns属性不被for...in遍历到：

const myData = [/* 数组元素 */];

Object.defineProperty(myData, "columns", {
  value: ["name", "score"],
  writable: true,    // 允许修改属性值
  enumerable: false,  // 禁止该属性被枚举（比如for...in不会遍历到它）
  configurable: true  // 允许删除该属性
});

关于控制台显示的补充 #

你看到的(6) [{…}, {…}, …, columns: Array(8)]是浏览器控制台对这类特殊数组的格式化展示：它先显示数组的长度和元素列表，再单独列出附加的自定义属性，方便开发者快速理解整个结构。

内容的提问来源于stack exchange，提问作者Enrique Moreno Tent