javascript - 使用 findIndex 查找和更新对象中深度嵌套数组的性能

标签 javascript

我有以下数据结构:

const myData = [
        {
            "trips": [
                {
                    "destination": "Hungary",
                    "id": "34547",
                    "stars": 0
                },
                {
                    "destination": "Hungary",
                    "id": "14542",
                    "stars": 0
                },
                {
                    "destination": "Hungary",
                    "id": "88247",
                    "stars": 0
                },
                {
                    "destination": "Hungary",
                    "id": "11447",
                    "stars": 0
                },
            ],
            "descr": "Holidays",
            "id": "243567"
        },
    ]

假设我们有 N 个具有唯一 ID 的对象:

给定项目 id、行程 id 和替换行程对象,查找并替换行程对象。

示例:

const itemId = 243567;
const tripId = 14542;

const replacement = { 
  destination: Beijing
  id: 14542
  stars: 4
};;

我的解决方案如下:

const myData = [{
  "trips": [{
      "destination": "Hungary",
      "id": "34547",
      "stars": 0
    },
    {
      "destination": "Hungary",
      "id": "14542",
      "stars": 0
    },
    {
      "destination": "Hungary",
      "id": "88247",
      "stars": 0
    },
    {
      "destination": "Hungary",
      "id": "11447",
      "stars": 0
    },
  ],
  "descr": "Holidays",
  "id": "243567"
}];

const itemId = 243567;
const tripId = 14542;

const replacement = {
  destination: "Beijing"
  id: 14542
  stars: 4
};

const itemIndex = myData
  .findIndex(element => element.id === itemId);
const tripIndex = myData[itemIndex].trips
  .findIndex(element => element.id === tripId);
Object.assign(myData[itemIndex].trips[tripIndex], replacement);

该解决方案的执行效果如何?是否有更快的实现方法?

最佳答案

如果您只需要对给定数据集执行一次这样的查找和变异,那么您当前所做的就可以了。

但是,如果您将在同一数据集中执行多次查找和突变(因此在重新加载之前),那么您应该通过 id 和行程 id 来键入数据。为此,您可以使用此函数,您应该在加载数据集后调用一次:

function hashData(myData) {
    const result = {};    
    for (const row of myData) {
        const obj = result[row.id] = {};
        for (const trip of row.trips) {
            obj[trip.id] = trip;
        }
    }
    return result;
}

// Sample data
const myData = [{ "trips": [{"destination": "Hungary", "id": "34547", "stars": 0 },{"destination": "Hungary", "id": "14542", "stars": 0 },{"destination": "Hungary", "id": "88247", "stars": 0 },{"destination": "Hungary", "id": "11447", "stars": 0}], "descr": "Holidays", "id": "243567"}];

// Key it by id and trip id:
const hash = hashData(myData);

// Mutate one particular entry:
Object.assign(hash[243567][88247], { destination: 'PARADISE', id: "9999", stars: 5 });

// Display result
console.log(myData);
.as-console-wrapper { max-height: 100% !important; top: 0; }

如果您不介意更冗长的代码,那么将 Object.assign 替换为单独的赋值将在当前浏览器中提供更好的性能:

const obj = hash[243567][88247];
obj.destination = 'PARADISE';
obj.id = "9999";
obj.stars = 5;

关于javascript - 使用 findIndex 查找和更新对象中深度嵌套数组的性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46747903/

相关文章:

javascript - 使用 <canvas> 的 HTML5 运动跟踪

javascript - JQuery .load() 函数不起作用,因为加载的文件包含小 JS

javascript - 我运行了 react native 链接 Realm 但仍然出现错误

javascript - 整数偶数集

javascript - Google 电子表格 - 发送电子邮件

javascript - 尝试根据子属性对对象键进行排序

javascript - 如何将图像添加到我的 highcharts 图?

javascript - HTML5 文件 API : How to see the result of readAsText()

javascript - MUI自定义按钮颜色?

javascript - jQuery 捕捉/固定菜单宽度在滚动超过某个点时发生变化和跳跃