JavaScript如何将对象属性值作为key传入另一对象获取对应值

实现方案 #

在对象字面量声明阶段无法直接引用自身的type属性，需要通过后续遍历或者工厂函数的方式动态赋值，具体有两种常用实现方式：

方案1：先定义商品基础信息，再批量填充图片链接 #

这种方式适合已经有现成商品数组的场景，遍历数组给每一项追加img属性：

// 已有的图片链接映射
const imageURL = {
  brakePad: "some_url_string",
  tieRodEnd: "some_url_string",
  rackEnd: "some_url_string",
};

// 先定义不带img的商品数组
const products = [
  {
    type: 'brakePad',
    brand: 'Akebono'
  },
  {
    type: 'tieRodEnd',
    brand: 'OtherBrand'
  }
  // 其他商品项
];

// 遍历批量赋值img
products.forEach(item => {
  // 直接用当前项的type作为key取值，无需硬编码
  item.img = imageURL[item.type] ?? '默认图片链接（可选，避免key不存在时返回undefined）';
});

方案2：通过工厂函数生成商品对象 #

这种方式适合动态生成商品数组的场景，在创建对象时直接计算img属性值：

const imageURL = {
  brakePad: "some_url_string",
  tieRodEnd: "some_url_string",
  rackEnd: "some_url_string",
};

// 封装商品创建工厂函数
function createProduct(type, brand) {
  return {
    type,
    brand,
    // 直接用传入的type作为key取值
    img: imageURL[type] ?? '默认图片链接'
  }
}

// 生成商品数组
const products = [
  createProduct('brakePad', 'Akebono'),
  createProduct('tieRodEnd', 'OtherBrand'),
  createProduct('rackEnd', 'ThirdBrand')
];

注意事项 #

不要尝试在对象字面量中直接写img: imageURL[this.type]，对象声明阶段this并不会指向当前正在创建的对象，会导致取值失败。

内容的提问来源于stack exchange，提问作者The Noob Programmer