如何用JavaScript非硬编码键实现购物车信息指定格式控制台输出？

完全不需要硬编码商品名称，我们可以通过动态遍历购物车对象的商品属性来生成指定格式的输出，具体实现思路和代码如下：

核心思路 #

• 先提取购物车的商品总数和总价信息
• 动态遍历cart.Item对象的所有键（即商品名称），同时获取对应商品的价格
• 按要求的格式拼接所有信息成字符串
• 最后在浏览器控制台输出拼接好的内容

代码实现 #

function printCartSummary(cart) {
  // 提取购物车基础信息
  const itemCount = cart.Items;
  const totalPrice = cart.Total;

  // 动态遍历所有商品，生成单个商品的描述字符串
  const itemDetails = Object.entries(cart.Item).map(([productName, productInfo]) => {
    return `${productName} ($${productInfo.price})`;
  });

  // 拼接成最终需要的输出格式
  const outputStr = `Items: ${itemCount} - ${itemDetails.join(' - ')} Total: ${totalPrice}`;

  // 输出到控制台
  console.log(outputStr);
}

// 测试用的购物车对象
const cart = { 
  "Items": 3, 
  "Item": { 
    "Apple iPhone 5S": { "productId": 688, "url": "http://website.com/phone_iphone5s.html", "price": 299.99 }, 
    "Solio Mono Solar Charger": { "productId": 655, "url": "http://website.com/solio_charger.html", "price": 29.95 }, 
    "24 Month Warranty Package": { "productId": 681, "url": "http://website.com/24_month_warranty.html", "price": 129.95 } 
  }, 
  "Total": 459.89 
};

// 调用函数生成控制台输出
printCartSummary(cart);

关键代码解释 #

• Object.entries(cart.Item)：这个方法会把商品对象转换成[商品名称, 商品详情]的键值对数组，完美避免了硬编码商品名称的问题
• map方法：遍历每个键值对，生成商品名称 ($价格)格式的字符串
• join(' - ')：把所有商品描述用-连接成连续的字符串
• 最后拼接商品总数、商品描述和总价，得到符合要求的输出内容

内容的提问来源于stack exchange，提问作者Hey Soul Sister