javascript - 如何获取 Javascript 数组中某个对象之前的最后 N 个对象？

Question

我正在尝试用 Javascript 实现项目的无限加载。就像您在最喜欢的消息传递应用程序中滚动浏览消息时获得的效果一样。我有一个像这样的大数组(+1000 个对象):

var array = [
    { id : 1, text: "First"},
    { id : 2, text: "Second"},
    { id : 3, text: "Third"},
    { id : 4, text: "Forth"},
    { id : 5, text: "Fifth"},
    { id : 6, text: "Sixth"},
    { id : 7, text: "Seventh"},
    ...
];

现在我只想一次加载 10 个项目。例如，我只显示 ID 为 30 到 39 的项目。现在用户想要查看 30 之前的项目。选择 ID 为 30 的对象之前的最后 10 个项目的最佳方法是什么？如前所述，数组的大小很大，因此性能在这里很重要。

编辑

上面的例子只是一个例子。我应该能够根据需要多次过滤我的数组 10 项。

我想要实现的是加载一个大数组，但不是一次加载所有数组。我想一次加载 10 个项目。我正在跟踪过滤后的数组中的第一个对象(例如 30)，然后我想获取该特定对象之前的最后 10 个对象。

编辑 2

这是我的观点:

<div ng-repeat="message in messages" class="message-wrapper">
     // Show content of message 
</div>

现在我首先显示消息中的最后 10 个项目

$scope.init = function(){        
    var messages = Database.AllMessages(); // This function returns all my messages
    $scope.messages =  messages.length > 10 ? messages.slice(-10) : messages;        
}

现在假设此函数返回的项目是 Id 为 30 到 39 的项目。用户向上滚动并希望查看 30 之前的消息。那么我如何过滤 AllMessages() 返回的整个数组以获取 30 消息之前的最后 10 个项目？

提前感谢您的任何见解。

Answer 1

您想尽可能高效地查询数据源。确保数组首先按 id 排序:

array.sort(function(a, b) {
  if (a.id === b.id) return 0;
  if (a.id > b.id) return 1;
  return -1;
});

然后，可以进行二分查找，找到你要查找的元素的索引:

var search = function(arr, val) {
    if (arr.length === 0) {
        return -1;
    }

    var max = arr.length - 1, min = 0;

    while (max !== min) {
        var index = Math.floor((max + min) / 2);

        if (arr[index].id === val) {
            return index;
        }
        else if (arr[index].id < val) {
            min = index;
        }
        else {
            max = index;
        }
    }
    return arr[index].id === val ? index : -1;
}

// find index of element with desired id.
var index = search(array, 30);

一旦我们知道索引，我们只需选择索引之前/之后的元素:

var rangeMin = index - 10; // Inclusive. 10 is the maximum number of elements you want to render.
var rangeMax = index; // Not inclusive.

if (rangeMin < 0) { rangeMin = 0; }
if (rangeMax > array.length) { rangeMax = array.length; }

var elementsToRender = array.slice(rangeMin, rangeMax);

elementsToRender 现在将包含您要呈现的所有元素。