Memory 敲除JS-在没有ko.mapping的情况下观察数组中任何属性的突变

在我的应用程序中，我必须只显示一个长列表中评级最高的前5项。我已实施了以下措施：

长列表是一个数组，我已经将它转换为一个可观察数组，所有元素都是ko.mapping的可观察元素，前5项是一个计算数组，它依赖于长列表。每当长列表中的任何内容发生更改时，计算数组就会使用长列表并获取前5项

我的问题是，带有ko.mapping的长数组占用60MB内存，而没有ko.mapping的长数组只占用4MB内存。有没有一种方法可以在不映射长数组的情况下实现这种效果

下面是一个例子，我用一个更小更简单的长数组重新创建了这个场景，但这只是为了让您理解我所说的

这是长数组，在演示中，我将其设置为12个元素长：

 this.longArray = ko.mapping.fromJS([
    {name:"Annabelle"},
    {name:"Vertie"},
    {name:"Charles"},
    {name:"John"},
    {name:"AB"},
    {name:"AC"},
    {name:"AD"},
    {name:"AE"},
    {name:"AF"},
    {name:"AG"},
    {name:"AH"},
    {name:"AJ"}
]);

这是计算的数组（仅显示前5个）：

this.sortedTopItems=ko.computed（函数（）{
返回self.longArray（）.sort（函数（a，b）{
if（a.name（）b.name（））返回1；
返回0；
}).切片（0,5）；
}，这个）；

---

“更改一”按钮用于模拟长数组的更改，而“重置”按钮用于将数组重置为其初始状态。

当然可以，但最简单的方法是在放入淘汰之前过滤数据。如果你只关心前5个。让我们假设您的长项目数组称为

data

。请注意，我现在无法测试这一点，但它应该会给你一个好主意

const sortedTopItems = ko.observableArray([]);

// Call with new data
const update = (data) => {
    data.sort((a,b) => a.name - b.name);
    sortedTopItems(data.slice(0, 5));
}

这将处理无法观察到的简单数据的情况。如果您希望实际数据项（行）是可观察的，那么我将执行以下操作：

const length = 5;

// Create an empty array and initialize as the observable
const startData = new Array(length).map(a => ({}));
const sortedTopItems = ko.observableArray(startData);

// Call with new data
const update = (data) => {
    data.sort((a,b) => a.name - b.name);

    for(let i = 0; i < length; i++) {
        const item = sortedTopItems()[i];
        ko.mapping.fromJS(data[i], item); // Updates the viewModel from data
    }
}

const length=5；
//创建一个空数组并初始化为可观察数组
const startData=新数组（长度）.map（a=>（{}））；
const sortedTopItems=ko.observableArray（起始数据）；
//使用新数据呼叫
常数更新=（数据）=>{
data.sort（（a，b）=>a.name-b.name）；
for（设i=0；i

const length = 5;

// Create an empty array and initialize as the observable
const startData = new Array(length).map(a => ({}));
const sortedTopItems = ko.observableArray(startData);

// Call with new data
const update = (data) => {
    data.sort((a,b) => a.name - b.name);

    for(let i = 0; i < length; i++) {
        const item = sortedTopItems()[i];
        ko.mapping.fromJS(data[i], item); // Updates the viewModel from data
    }
}