如何在map函数中跳过第一个元素

Question

我想在.map函数中跳过第一个，现在我做的是这样的：

block.gallery.map((item, i) => (
       <div className="gallery-item" key={i}>
        { block.gallery.length > 4 && i !== 0 ?
          <div className="inner">
             <img src={block.gallery[i].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[i].images.thumbnail_md} 1x, ${block.gallery[i].images.thumbnail_lg} 2x`} className="img-fluid" title="" />
             <div className="img-overlay">
               <span className="img-overlay-body">{ block.gallery.length - 4 }+ <span className="hidden-xs">Foto's</span></span>
             </div>
           </div>
           :
           <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" />
          }

- Sireini

---

为什么你在这里使用map，因为你没有返回任何东西。要循环数组，您可以使用forEach，要跳过第一个项目，可以检查if（i>0）。 - Aruna

@Aruna 被返回的是 <div className="gallery-item"> 和它所包含的所有内容。 - Tom Fenech

鉴于您的代码不再使用.map，更新您的问题将有所帮助。 - Pineda

Answer 1

因此，使用slice方法可以跳过第一个元素。

block.gallery.slice(1).map(...)

你还需要引用传递给map函数的项，而不是使用原始数组的索引。

block.gallery[i].images.thumbnail_sm

应该是这样的

item.images.thumbnail_sm

- epascarello

---

如果你使用切片跳过第一个索引，为什么会显示第一张图片呢？此外，你还需要删除内部的i==0检查。 - epascarello

你仍然得到第一个，因为你没有在map中引用数组。 - epascarello

现在.map函数中的每个项目都会得到带有x+照片的span，但是如何将其设置为仅最后一个？也许你也可以帮我解决这个问题。 - Sireini

检查是否为最后一个？((item, i, arr)=>和if(arr.length-1===i) - epascarello

围绕 span 元素？ - Sireini

Answer 2

你也可以使用Array.prototype.shift()方法删除数组的第一个元素，并在任何时候检索它；但是这会修改原始数组。

const head = block.gallery.shift(); // removes and stores first element in "head"

console.log(block.gallery) // array with first element removed

- darcher

---

如果您想跟踪已删除的内容并且不创建新数组，则可以按照以下方式进行。 - Akaisteph7