JavaScript中多维关联数组的正确声明方式及规范选择

首先纠正一个概念：JavaScript里并没有“多维关联数组”这个说法，先明确两种写法的专业定义：

• Option 1：这是给数组对象附加自定义属性。因为JavaScript里数组本质也是Object类型，所以可以强行给它加额外属性，但这属于对数组的误用——数组的设计初衷是存储有序的、按数字索引访问的元素，你这里完全没用到数组的核心功能（比如push()、length属性），只是把数组当成普通对象用。
• Option 2：这是嵌套对象字面量，这才是JavaScript里实现层级化键值对结构的标准方式。对象（Object）就是用来存储“键-值”映射关系的，嵌套对象自然就能实现你需要的多层级结构。

哪种写法更合理？ #

毫无疑问Option 2是正确且符合开发常规的写法，Option 1存在明显问题：

1. 语义混淆：其他开发者看到[]会默认这是一个有序数组，结果里面根本没存索引元素，全是自定义属性，增加理解成本。
2. 调试不便：在浏览器控制台或Node环境中，数组的默认输出会优先展示索引元素，自定义属性不会直接显示在数组的结构视图里，排查问题时容易遗漏。
3. 不符合语言设计意图：数组有自己的内置方法和行为（比如forEach遍历索引元素），你这么写完全浪费了数组的特性，同时也违背了代码的直观性。

代码对比与结论 #

Option 1（不推荐） #

const r_CLASS = [];

r_CLASS.selector = [];
r_CLASS.cl_name = [];
r_CLASS.cl_name_ext = [];

r_CLASS.selector.toggle = ".toggle";
r_CLASS.selector.container = ".container";
r_CLASS.selector.ctrl = ".controls";
r_CLASS.selector.ctrl_list = ".list";
r_CLASS.selector.ctrl_search = ".search";
r_CLASS.selector.ctrl_clear = ".clear";
r_CLASS.selector.chk = ".check";

r_CLASS.cl_name.toggle = "toggle";
r_CLASS.cl_name.container = "container";
r_CLASS.cl_name.ctrl = "controls";
r_CLASS.cl_name.ctrl_list = "list";
r_CLASS.cl_name.ctrl_search = "search";
r_CLASS.cl_name.ctrl_clear = "clear";
r_CLASS.cl_name.chk = "check";

r_CLASS.cl_name_ext.toggle = "toggle-zero";
r_CLASS.cl_name_ext.ctrl_search = "search-fail";

Option 2（推荐） #

const r_CLASS = {

  selector: {

    toggle: ".toggle",
    container: ".container",
    ctrl: ".controls",
    ctrl_list: ".list",
    ctrl_search: ".search",
    ctrl_clear: ".clear",
    chk: ".check"
  },
  cl_name: {

    toggle: "toggle",
    container: "container",
    ctrl: "controls",
    ctrl_list: "list",
    ctrl_search: "search",
    ctrl_clear: "clear",
    chk: "check"

  },
  cl_name_ext: {

    toggle: "toggle-zero",
    ctrl_search: "search-fail"

  }

}

直接采用Option 2的嵌套对象写法即可，这是前端开发中存储这类配置型层级数据的标准做法。

内容的提问来源于stack exchange，提问作者brut65