js对象中的属性太多答案

【问题标题】：Too many properties in a js objectjs对象中的属性太多
【发布时间】：2015-12-23 06:52:33
【问题描述】：

一个js对象可以有很多属性吗？

我想建一个类似workaway.info的网站，正在考虑如何设计搜索组件。在高级搜索选项下，他们有大约 30 个用于各种工作类型的复选框。每个职位列表中可以包含多种工作类型。

典型的做法是为对象中的每个复选框选项设置一个boolean 属性，还是为所有选项设置一个包含boolean 输入的array？

有什么理由选择一个而不是另一个？

    ...
//Method 1:
function Job(theCompany, thePosition){
  this.company = theCompany;
  this.position = thePosition;
  this.isMedical = true;
  this.isAdministrative = true;
  this.isLaw = false;
  ...
  }

//Method 2:
function Job(theCompany, thePosition){
  this.company = theCompany;
  this.position = thePosition;
  this.typeOptions = [true, true, false...];
  ...
  }

【问题讨论】：

标签： javascript

【解决方案1】：

通常，the property limit 是 65535。由于您不会达到该限制，因此您的问题纯粹是风格。

我认为我首选的方法是拥有一个字符串标志数组。例如：

function Job(theCompany, thePosition) {
    this.company = theCompany;
    this.position = thePosition;
    this.typeOptions = ['medical', 'administrative'];
}

【讨论】：

【解决方案2】：

这里没有完美的答案，它会根据编程风格发生巨大变化。

从字面上看，我不建议您选择第二个选项；

options = [ true, true, true, true, false, true, true, false, false, false, false, /*...*/];

在保持代码上下文的同时，不可能对它们中的每一个的作用有任何了解。

单个对象的布尔属性很好，但是当您谈论几十个，更不用说成千上万个属性时，单个对象上的相同嵌套级别的属性。

在更现代的浏览器（或带有 ES5 polyfills 的旧浏览器）中，我觉得这是 Set 的主要候选者；

var options = new Set();

form.onchange = function (e) {
  var el = e.target;
  if (isCheckbox(el)) {
    if (el.checked) {
      options.add( el.value );
    } else {
      options.delete( el.value );
    }
  }
};

我可能会这样写的原因是，添加键的代码实际上不需要知道任何关于键的信息。

在较大的应用程序中，采用通用方法，将数据输入到框架（React/Angular/Ember/etc/hand-made）中，该框架会自动构建表单、监听事件并从动态构建的表单中提取值以这样的方式创建页面，使其更难推理，但也使得添加、删除或修改选项变得更加容易，因为只有显示选项的代码和使用该值的代码需要照顾。

const formOptions = [
  { label: "Medical", value: "medical" },
  { label: "Legal", value: "legal" }
];

const form = buildForm(formOptions);
/* ...previous code... */
form.onsubmit = function () {
  Array.from(options). /* map, filter, forEach, reduce, etc */( ... );
};

中间的其余代码只是接线。

再一次，不完美；不是唯一的答案，而是一个答案，以及为什么。

【讨论】：

【解决方案3】：

选择方法一：为了便于维护代码，任何人阅读你的代码都会知道值的含义

【讨论】：

【解决方案4】：

我更喜欢method 1，因为它让开发人员可以通过其名称以某种有意义的方式访问属性名称，而不是通过数组索引。这种方法可以帮助开发者在以后更好地调试。如果你使用数组，开发者完全依赖于你的 cmets 和业务逻辑来找出数组中每个元素的确切用途，这使得调试非常困难。Method 1 帮助非常好调试并遵循标准，每个变量都应该有一些有意义的名称。

【讨论】：