javascript - 如何将对象数组的 id 与循环中的键等同起来？ Javascript

Question

我的 javascript 代码是这样的:

<script type="text/javascript">
      var photoList = [{id:"1", name:"hazard.jpg"}, {id:"3", name:"ronaldo.jpg"}, {id:"5", name:"messi.jpg"}];
      var res = "";
      for(var i = 0; i < 5; i++) {
          if((photoList[i] !== undefined) && (photoList[i].id !== null)) {
              res +=  `<li id="thumbnail-view-`+i+`">
                              <div class="thumbnail">
                                  <img src="/img/products/thumbs/`+photoList[i].name+`" alt="">                          
                                  <ul class="list-inline list-edit">
                                      <li>
                                          <a href="#" class="text-danger" id="delete-image-`+i+`"
                                             data-toggle="modal"
                                             data-target="#modal-delete-image-`+i+`"
                                             data-photo='${JSON.stringify(photoList)}'                                  
                                          >
                                              <span class="fa fa-trash"></span>
                                          </a>                                   
                                      </li>
                                  </ul>
                              </div>
                          </li>`;             
          }
          else {
              res += `<li id="thumbnail-upload-`+i+`">
                          <a href="#" class="thumbnail thumbnail-upload" id="add-image-`+i+`"
                             title="Add photo"
                             data-toggle="modal"
                             data-target="#modal-add-image-`+i+`"
                          >
                              <span class="fa fa-plus fa-2x"></span>
                          </a>
                      </li>`;
          }
      }
      $('ul.list-photo').html(res);
</script>

演示和完整代码如下:https://jsfiddle.net/oscar11/L6xctxze/

var photoList 有动态数据。变量可以如下所示:

var photoList = [{id:"3", name:"ronaldo.jpg"}, {id:"4", name:"ozil.jpg"}, {id:"5", name:"messi.jpg"}];

变量可能看起来像这样:

var photoList = [{id:"1", name:"hazard.jpg"}, {id:"5", name:"messi.jpg"}];

等所以这是动态的

我希望如果变量的 id = 1，则图像放在 1 号框中。如果变量的 id = 5，则图像放在 5 号框中。等等

如果变量是这样的:

var photoList = [{id:"1", name:"hazard.jpg"}, {id:"5", name:"messi.jpg"}];

然后图片放在1号和5号框

虽然在框 2、3、4 中包含图标 +

我该怎么做？

我按照上面的代码试了一下，还是报错

Answer 1

这是一个解决方案 https://jsfiddle.net/jq1y75bg/1/ .

您的代码中的问题是您正在遍历 photoList 数组并检查 (photoList[i] !== undefined) && (photoList[i].id != = null)，在您的 photoList 数组完全迭代之前，它永远不会为假。这就是为什么您会得到 3 个并排的元素。

相反，您可以维护一个 id 到 name 的映射，并在循环中检查它。像这样:

var photoMap = photoList.reduce(function(acc, p) {
    acc[Number(p.id)] = p.name;
    return acc;
}, {});

for (var i = 1; i <= 5; i++) {
    if (photoMap[i]) {
        /* An item exists for this index, whose name is photoMap[i] */
    } else {
        /* An item does not exist for this index */
    }
}