如何在JavaScript类中利用数组索引为数组元素定义price属性

要实现需求，你需要把原奶昔数组里的字符串元素转换为对象（因为原始字符串没法稳定保存自定义属性），同时在转换过程中利用元素的索引n计算价格。以下是两种可行的实现方式：

方法一：转为对象数组（常规方案） #

修改cafe类的构造函数，遍历奶昔数组，把每个字符串转换成包含口味名称和price属性的对象：

class Cafe {
  constructor(menu) {
    this.iceCreams = menu[0];
    // 遍历数组时拿到索引n，用它计算价格
    this.milkshakes = menu[1].map((flavor, n) => {
      // 这里写基于n的价格计算逻辑，示例为 (索引+1)*5
      const price = (n + 1) * 5;
      return { flavor, price };
    });
  }
}

// 使用示例
const menu = [
  ['vanilla', 'chocolate', 'almond'],
  ['vanilla', 'pineapple', 'strawberry']
];
const myCafe = new Cafe(menu);
console.log(myCafe.milkshakes[0].price); // 输出 5
console.log(myCafe.milkshakes[1].price); // 输出 10

这样你可以通过myCafe.milkshakes[n].price获取对应奶昔的价格，通过myCafe.milkshakes[n].flavor获取口味名称，逻辑清晰且易于维护。

方法二：保留字符串访问方式（进阶方案） #

如果想直接用myCafe.milkshakes[0]获取字符串口味，同时还能访问price属性，可以用Proxy包装元素：

class Cafe {
  constructor(menu) {
    this.iceCreams = menu[0];
    this.milkshakes = menu[1].map((flavor, n) => {
      const price = (n + 1) * 5;
      // 创建代理，访问元素本身返回字符串，访问price返回计算值
      return new Proxy(flavor, {
        get(target, prop) {
          if (prop === 'price') {
            return price;
          }
          return target[prop];
        }
      });
    });
  }
}

// 使用示例
const myCafe = new Cafe(menu);
console.log(myCafe.milkshakes[0]); // 输出 "vanilla"
console.log(myCafe.milkshakes[0].price); // 输出 5

关键提醒 #

JS里的字符串是原始值，直接给它加属性的话，JS会临时生成包装对象，但这个对象不会被保留，下次访问字符串时会重新创建新的包装对象，之前加的属性会丢失，所以不推荐直接给字符串加属性。

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