ES6下有没有单行方案实现对象数组属性初始化并追加值？

问题描述 #

初始化对象的数组属性后再追加值通常需要两步操作，现有需求是找到更优的单行实现方案，示例场景见下方appendError(prop, error)方法：

• 使用原生JS或者lodash有没有单行或者更简洁的实现方式？
• 可选链等新特性暂不能使用的前提下，有没有兼容的解决方案？类似PHP中$array[prop][] = val;的直接赋值效果。

原始实现代码：

class Errors {
  constructor(fields ) {
      this.errors = {};
  }

  /**
   * 给指定字段追加错误信息
   *
   * @param {string} prop | 示例: "email"
   * @param {string} error | 示例: "Invalid email"
   */
  appendError(prop, error) {
      /* 属性不存在时先初始化空数组 */
      if (!this.has(prop)) this.errors[prop] = [];
      /* 再追加错误值 */
      this.errors[prop].push(error);
  }

  /**
   * 判断指定字段是否存在错误
   *
   * @param {string} prop
   */
  has(prop) {
      return this.errors.hasOwnProperty(prop);
  }
}

可用方案 #

原生JS实现 #

无需额外依赖，兼容所有ES6+环境的单行写法：

appendError(prop, error) {
  (this.errors[prop] || (this.errors[prop] = [])).push(error);
}

逻辑说明：先判断this.errors[prop]是否为真值，不存在则初始化空数组，返回数组实例后直接调用push方法追加值，和原始实现逻辑完全等价。

如果你的环境支持ES2021新增的逻辑或赋值运算符||=，可以写得更易读：

// 两行写法可读性更高，也可以用逗号运算符合并为单行
appendError(prop, error) {
  this.errors[prop] ||= [];
  this.errors[prop].push(error);
}

Lodash实现 #

如果项目中已经引入了lodash，可以用内置的_.update方法实现，写法更简洁：

appendError(prop, error) {
  _.update(this.errors, prop, val => (val || []).concat(error));
}

_.update会自动处理目标属性不存在的场景，直接传入更新函数即可完成追加操作。

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