动态声明对象属性及构造函数实例创建报错咨询

动态给对象添加属性其实有好几种实用的方法，我给你挨个说清楚：

• 方括号语法（最常用）：不管属性名是变量还是字符串，都能轻松搞定。比如：

  // 先定义属性名变量
  const propName = 'favoriteDrink';
  const person = {};
  // 动态添加属性
  person[propName] = 'coffee';
  // 结果：{ favoriteDrink: 'coffee' }
  

  也可以在创建对象字面量的时候直接用：

  const propName = 'favoriteDrink';
  const person = {
    name: 'Alice',
    [propName]: 'coffee'
  };
  

• Object.defineProperty()：如果需要给属性加一些特殊规则（比如能不能修改、能不能被遍历到），就用这个方法：

  const person = {};
  Object.defineProperty(person, 'age', {
    value: 25,
    writable: false, // 设为不可修改
    enumerable: true // 可以被遍历到
  });
  person.age = 30; // 不会生效，因为writable是false
  

• ES6展开运算符：要是想把动态属性合并到已有对象里，用展开运算符很方便：

  const propName = 'hobby';
  const person = {
    name: 'Bob',
    ...{ [propName]: 'hiking' }
  };
  // 结果：{ name: 'Bob', hobby: 'hiking' }
  

咱们先解决你遇到的语法报错：Uncaught SyntaxError: Unexpected token .，根源是你写构造函数的时候最后多了一个多余的闭合大括号！你写的是}};，但实际上this.storage = { ... };只需要一个}来闭合storage的对象，所以得改成};。

然后再说说嵌套数组映射的逻辑，我猜你是想让dataset里的每个元素对应arg3里的饮品，每个元素包含drink（饮品值）和food（arg4的值）？那你原来的写法会把map返回的整个数组赋值给drink，导致dataset变成[{ drink: [ {...}, {...} ] }]——也就是一个对象里的drink属性是数组，这大概率不是你想要的。

我给你调整一下代码，让它符合预期：

function Constructor(arg1, arg2, arg3, arg4) {
  this.arg1 = arg1;
  this.arg2 = arg2;
  this.arg3 = arg3;
  this.arg4 = arg4;
  this.storage = {
    [arg1]: { // 这里用方括号把arg1包起来，才会用arg1的实际值当属性名，不然就是固定字符串"arg1"
      open: arg2,
      dataset: arg3.map(drink => ({ drink, food: arg4 }))
    }
  };
}

// 举个调用例子
const diner = new Constructor('breakfast', true, ['coffee', 'tea'], 'toast');
console.log(diner.storage.breakfast.dataset);
// 输出：[{ drink: 'coffee', food: 'toast' }, { drink: 'tea', food: 'toast' }]

这里要特别注意：如果想把arg1的实际值作为storage的属性名，一定要用方括号语法[arg1]，不然属性名就只是字面量的"arg1"，这可能和你的需求不符哦。

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