时间戳

首页 > 解决方案 > 如何使用 ES6 功能减少 3 个 for 循环以提高 javascript 性能？

javascript - 如何使用 ES6 功能减少 3 个 for 循环以提高 javascript 性能？

问题描述

我需要一个可以使用 ES6 特性减少 3 个 for 循环的解决方案。
在下面，我们有两个对象数组，其中我必须在两个位置添加一个密钥对以匹配一个。 

    let rootContent = [
       { 
        'name' : 'varshan',
        'textValues' : [
            { 'id' : 123 , 'value' : 'one' },
            { 'id' : 124 , 'value' : 'two' },
            { 'id' : 125 , 'value' : 'three' },
            { 'id' : 126 , 'value' : 'four' }   
        ]
       },
       {
            'name' : 'kathir',
        'textValues' : [
            { 'id' : 223 , 'value' : 'common' },
            { 'id' : 224 , 'value' : 'maddy' },
            { 'id' : 225 , 'value' : 'winner' },
            { 'id' : 226 , 'value' : 'loser' }  
        ]
       },
       {
            'name' : 'karthika',
        'textValues' : [
            { 'id' : 323 , 'value' : 'sticker' },
            { 'id' : 324 , 'value' : 'kammal' } 
        ]
       },
       {
            'name' : 'lavanya',
        'textValues' : [
            { 'id' : 423 , 'value' : 'beauty' } 
        ]
       } 
    ];

    let incomingContent = [
        {
             'name' : 'lavanya',
         'text_value' : 'beauty'    
        },
        {
             'name' : 'karthika',
         'text_value' : 'kammal'    
        },
        {
             'name' : 'kathir',
         'text_value' : 'maddy' 
        }
    ];

第一步是我们必须检查数组中的名称字段是否与 incomingContent数组的名称字段匹配rootContent，如果条件为真，那么我们必须添加一个匹配为真的键值对。

之后，我们必须使用数组的 text_value 字段找到textValues数组 insdie 匹配对象的子数组，如果匹配，则添加一个键值对，matched 为 true，否则为 false。我在下面附上了预期的结果，我需要一个具有 ES6 功能的解决方案，例如，...。rootContentincomingContentmap()find()

for (let i = 0; i < incomingContent.length; i++) {
    for (let j = 0; j < rootContent.length; j++) {
        if (rootContent[j].name === incomingContent[i].name) {
            rootContent[j]['matched'] = true;
            for (let k = 0; k < rootContent[j].textValues.length; k++) {
                rootContent[j].textValues[k]['matched'] =  rootContent[j].textValues[k].value === incomingContent[i].text_value ? true : false;
            }
        }
    }}

输出应该只是这样。 

        [
           { 
            'name' : 'varshan',
            'textValues' : [
                { 'id' : 123 , 'value' : 'one' },
                { 'id' : 124 , 'value' : 'two' },
                { 'id' : 125 , 'value' : 'three' },
                { 'id' : 126 , 'value' : 'four' }   
            ]
           },
           {
                'name' : 'kathir',
            'matched' : true,
            'textValues' : [
                { 'id' : 223 , 'value' : 'common' , 'matched' : false},
                { 'id' : 224 , 'value' : 'maddy' , 'matched' : true },
                { 'id' : 225 , 'value' : 'winner' , 'matched' : false},
                { 'id' : 226 , 'value' : 'loser' , 'matched' : false}   
            ]
           },
           {
                'name' : 'karthika',
                'matched' : true,
            'textValues' : [
                { 'id' : 323 , 'value' : 'sticker', 'matched' : false },
                { 'id' : 324 , 'value' : 'kammal' , 'matched' : true }  
            ]
           },
           {
                'name' : 'lavanya',
            'matched' : true,
            'textValues' : [
                { 'id' : 423 , 'value' : 'beauty' , 'matched' : true }  
            ]
           } 
        ]

标签： javascript

解决方案

将其中一个数组转换为按名称索引的对象，然后您将能够及时查找关联的名称O(1)，而不是O(N)时间。使用forEach而不是for避免手动迭代和索引，而不是x === y ? true : false，只是使用x === y，因为它已经解析为布尔值：

let rootContent=[{'name':'varshan','textValues':[{'id':123,'value':'one'},{'id':124,'value':'two'},{'id':125,'value':'three'},{'id':126,'value':'four'}]},{'name':'kathir','textValues':[{'id':223,'value':'common'},{'id':224,'value':'maddy'},{'id':225,'value':'winner'},{'id':226,'value':'loser'}]},{'name':'karthika','textValues':[{'id':323,'value':'sticker'},{'id':324,'value':'kammal'}]},{'name':'lavanya','textValues':[{'id':423,'value':'beauty'}]}];let incomingContent=[{'name':'lavanya','text_value':'beauty'},{'name':'karthika','text_value':'kammal'},{'name':'kathir','text_value':'maddy'}]

const rootContentByName = rootContent.reduce((a, item) => {
  a[item.name] = item;
  return a;
}, {});
incomingContent.forEach(({ name, text_value }) => {
  const thisRoot = rootContentByName[name];
  thisRoot.matched = true;
  thisRoot.textValues.forEach((item) => {
    item.matched = item.value === text_value;
  });
});
console.log(rootContent);

虽然数组方法比循环慢一些for，但它们通常更具可读性，并且可能更可取，除非您已经运行了性能测试并验证了特定方法占用了过多的 CPU 时间。

推荐阅读