如何在 Javascript/jQuery 中动态切片数组？

Posted 2023-02-23

【中文标题】如何在 Javascript/jQuery 中动态切片数组？

【英文标题】：How can you dynamically slice an array in Javascript/jQuery?

【发布时间】：2017-09-03 10:24:18

【问题描述】：

我有一个照片库，其中包含将不断上传的图像。 php 数组已被转换/编码为 JSON 数组，以便我可以使用 javascript 操作数据。

理想情况下，我想单击一个按钮（CodePen 示例中的“下一组”）并加载下一组（2 个）缩略图。这是为了不一次加载所有图像，这可能是数百个。

问题：我无法弄清楚如何在点击时动态对数组进行切片（接下来的 5 张图片）。我当然可以一次加载 2 个：

myArray.slice(0,2);
myArray.slice(3,5);

但是，这不起作用，因为图像会不断添加到图库中。此外，我必须有太多的上述设置才能一次切出 5 个。

我试过了：

将数组拆分成更小的数组 for 循环和$.each 循环

我基本上需要能够在单击时将切片的开始和结束索引移动（例如）2。现在它只是继续对相同的两个图像进行切片，因为切片不是动态的。

这是我的CodePen

【问题讨论】：

只需在全局变量中跟踪索引，每次点击增加 5。然后.slice(index, index + 5); index += 5;

或者，如果您不关心原始数组（如果您不关心它是否被 sgrunk），您可以使用 splice 从数组中删除项目！每次调用.splice(0, 2) 都会得到不同的元素，因为之前的元素已经从原始数组中删除了！

请记住，在这种情况下，splice 应始终以 0 (.splice(0, amount)) 开头！

.shift 从数组的开头只剪切一项，要使用它，您需要一个循环来剪切任意数量的元素！使用.splice(0, amount) 将从一开始就削减amount 的项目，因此不需要循环！ 如果您需要遍历 spliceing 的结果数组，请使用 shift 。 如果您要将返回数组作为一个整体使用，请使用.splice。值得一提的是splice 更安全，因为（[1, 2].splice(0, 10000) === [1, 2]），在shift 版本中，您必须检查数组中是否还有元素以查看是否继续（否则返回未定义)!

加上splice，您可以像这样使用forEach：array.splice(0, amount).forEach(function(img) /* use img here */);！ push 性能稍好！

【参考方案1】：

我认为你的问题很简单。你做一个切片，总是得到相同的数组

var array = [0,1,2,3,4,5];
let newArray1 = array.slice(0,2); // returns a new array
let newArray2 = array.slice(0,2); // returns the same new array

for(var i = 0; i < 2; i = i+2) 
  result = array.slice(i, i+2);
  console.log(result);

【参考方案2】：

我认为没有办法完全按照您的意愿行事，但您可以跟踪您在数组中的位置并从那里进行切片，如下所示：

var nextSet = myArray.slice(lastIndex, lastIndex + 2);

用这个替换你现有的click()（包括lastIndex的声明）来试试：

var lastIndex = 0
$('.button').click(function() 
  var nextSet = myArray.slice(lastIndex, lastIndex + 2);
  lastIndex += 2;
  for (var i = 0; i < 2; i++) 
    var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextSet[i] + '>');
  
);

请注意，我已将 slice() 行移到 for 循环之外。无需为每次迭代都分割一个新数组。

这是CodePen using .slice()。

另一种方法是使用 shift() 在每次迭代时剥离数组中的第一项：

var nextItem = myArray.shift()

虽然这是破坏性的（它会从原始数组中删除项目），因此如果您想将其用于其他任何事情，您需要先复制原始数组。将您的 click() 替换为：

$('.button').click(function() 
  for (var i = 0; i < 2; i++) 
    var nextItem = myArray.shift();
    var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextItem + '>');
  
);

这是CodePen using .shift()。

【讨论】：

谢谢！ .shift() 方法似乎正是我想要的！再次，非常感谢你。已经为此工作了很长时间。你摇滚！