我无法显示随机选择的对象答案

【问题标题】：I'm having trouble displaying my randomly selected object我无法显示随机选择的对象
【发布时间】：2017-02-26 23:19:49
【问题描述】：

我无法显示随机对象和该随机对象的属性。这个项目的目标是有一个 stockItems 列表，当我按下一个按钮时，它会选择一定数量的这些对象并将它们显示在 HTML p 标记中。现在，当我尝试显示它时，它会打印为 [object]。目标是使所选对象的属性位于不同的行上。

这是我正在使用的代码：

function buildShopItems(count) {
  var shopItems = [], i, itemIndex;
  count = stockItems.length < count ? stockItems.length : count;

  function getUniqueRandomItem() { //from stock
    var item;
    while (true) {
      item = stockItems[Math.floor(Math.random() * stockItems.length)];
      if (shopItems.indexOf(item) < 0) return item;
    }
  }

  for (i = 0; i < count; i++) {
    shopItems.push(getUniqueRandomItem());
  }
  return shopItems;
  console.log(shopItems);
}


var stockItems = [
  { item: "sword", type: "weapon", weight: "5 lbs.", cost: "10 gold" },
  { item: "hammer", type: "weapon", weight: "8 lbs.", cost: "7 gold" }
  //...
];


var shopItems = buildShopItems(1);


console.log(shopItems);

document.getElementById("item").innerHTML = shopItems.item;
document.getElementById("type").innerHTML = shopItems.type;
document.getElementById("weight").innerHTML = shopItems.weight;
document.getElementById("cost").innerHTML = shopItems.cost;

【问题讨论】：

使用JSHint 立即查找代码问题。您应该已经看到了unreachable code after return statement 警告。
你的上层console.log(shopItems); 永远不会执行，因为你在它之前运行了一个return。另外，while(true){}从来没有是个好主意...
shopItems 是一个数组。 shopItems.item 之类的没有意义。
@Xufox 我将使用什么来显示该数组中随机选择的对象？
@ObsidianAge 除了while(true){}，你有什么建议吗？

标签： javascript html arrays variables object

【解决方案1】：

问题在于您对indexOf 的使用。您可以使用indexOf 搜索对象，因为在javascript 中您无法使用== 或=== 比较对象，而indexOf 使用===。还为您做了一些语法更新。

'use strict'

const stockItems = [
  { item: "sword", type: "weapon", weight: "5 lbs.", cost: "10 gold" },
  { item: "hammer", type: "weapon", weight: "8 lbs.", cost: "7 gold" }
];

function isEquivalent(a, b) {
    // Create arrays of property names
    const aProps = Object.getOwnPropertyNames(a);
    const bProps = Object.getOwnPropertyNames(b);

    // If number of properties is different,
    // objects are not equivalent
    if (aProps.length != bProps.length) {
        return false;
    }

    for (let i = 0; i < aProps.length; i++) {
        const propName = aProps[i];

        // If values of same property are not equal,
        // objects are not equivalent
        if (a[propName] !== b[propName]) {
            return false;
        }
    }

    // If we made it this far, objects
    // are considered equivalent
    return true;
}

// normal indexof will not work with object because it uses strict equality
function myIndexOf(array, object) {    
    for (let i = 0; i < array.length; i++) {
        if (isEquivalent(array[i], object)) return i;
    }
    return -1;
}

function getUniqueRandomItem(shopItems) { //from stock
  var item;
  while (true) {
    item = stockItems[Math.floor(Math.random() * stockItems.length)];
    if (myIndexOf(shopItems, item) < 0) return item;
  }
}

function buildShopItems(count) {
  count = stockItems.length < count ? stockItems.length : count;
  const shopItems = [];

  for (let i = 0; i < count; i++) {
    const item = getUniqueRandomItem(shopItems);
    shopItems.push(item);
  }

  return shopItems;
}

const shopItems = buildShopItems(1);


console.log(shopItems);

【讨论】：