循环遍历JavaScript数组并排除数组本身

Loop through JavaScript array and exclude the array itself

本文关键字：数组 排除 JavaScript 循环 遍历      更新时间：2023-09-26

我试图通过一个JS对象从JSON代码解析[this.props.dataPro.links]:

 "links" : 
[ "/static/media/0.jpg",
  "/static/media/1.jpg",
  "/static/media/1.jpg" ],

我正在插入这些链接数组键到一个图像对象:

_getStaticImages() {
    let images = [this.props.dataPro.links]
    for (var key in images) {
      if (images.hasOwnProperty(key)) {
        var obj = images[key];
         for (var prop in obj) {
           if (obj.hasOwnProperty(prop)) {
            images.push({
            original: obj[prop],
            thumbnail:obj[prop]
          });
        }
      }
     }
   }

    return images;
  }

结果，我得到一个空的返回对象在我的返回对象的开始，当我做console.log上的images响应似乎我也返回数组对象本身:

[Array[3], Object, Object, Object]
0:Array[4]
1:Object
2:Object
3:Object

我如何排序循环通过我的数组和排除数组本身?

您正在将初始数组添加到输出let images = [this.props.dataPro.links]中。相反，您可以使用Array。最好映射到这里:

var linkObj = {
  "links": [
    "/static/media/0.jpg",
    "/static/media/1.jpg",
    "/static/media/1.jpg"
  ]
};
function getStaticImages() {
  let output = linkObj.links.map(imgUrl => {
    return {
      original: imgUrl,
      thumbnail: imgUrl
    }
  });
  return output;
}
console.log(getStaticImages());

我会使用Array.prototype.map()，并做这样的事情:

getStaticImages(imageArray) {
  return imageArray.map(function(img) {
    return {
      original: img.whateverPropMapsToOriginal,
      thumbnail: img.whateverPropMapsToThumbnail,
    }
  });
}

var images = [];
for(var i = 0; i < this.props.dataPro.links.length;i++)
{
   images.push({
     original: this.props.dataPro.links[i],
     thumbnail: this.props.dataPro.links[i]
   });
}

至于为什么数组是第一个元素，这一行:

let images = [this.props.dataPro.links]

，其中创建数组images，其中包含要迭代的数组的第一个元素。

要创建一个空数组，不要在里面放任何值:

let images = []; // nothing inside

至于迭代自身。考虑到this.props.dataPro.links已经是一个数组，要遍历它，你应该这样做:

var myArray = this.props.dataPro.links; // so we don’t need to type it later
var images = []; // we’re creating *empty* table
for (var i = 0; i < myArray.length; ++i) {
    console.log('Item', i, myArray[i]);
    images.push({
        original: item,
        thumbnail: item
    });
}

那是做这件事的老方法。如果你支持IE9以上版本，那么你可以使用function Array.prototype.forEach:

var images = [];
this.props.dataPro.links.foreach(function (item, index) {
    console.log('Item', index, item);
    images.push({
        original: item,
        thumbnail: item
    });
}

不要使用第二种解决方案，如果你想有选择地中断遍历数组

为什么不改变你的for循环?

for (let i = 1; i > obj.length; i++) {
  if (obj[i]) {
    images.push({
      original: obj[prop],
      thumbnail: obj[prop]
    })
  }
}

这将跳过数组的0th元素(您想要跳过的对象)，但仍然会推送您想要的图像。

相关文章：