如何改写JS代码使用箭头函数实现功能并保留原有排序顺序

以下两种实现均完全保留原有代码的排序逻辑（最终结果顺序和headers数组的顺序保持一致）： #

最小改动版本（仅替换箭头函数，逻辑完全不变） #

仅把原代码中map方法的普通匿名函数替换为箭头函数，其他逻辑和原代码100%一致：

const headers = 
  [ { text: 'City',                  value: 'city'   } 
  , { text: 'Zip code',              value: 'zip'    } 
  , { text: 'Country',               value: 'country'} 
  , { text: 'Number of Inhabitants', value: 'inhabitants' } 
  ];

const selectedHeaders = 
  [ { text: 'City',     value: 'city' } 
  , { text: 'Zip code', value: 'zip'  } 
  ];
  
let tab = [];

for (i = 0; i < headers.length; i++) {
  // 仅修改了此处的回调为箭头函数
  pos = selectedHeaders.map(e => e.value).indexOf(headers[i].value);
  if (pos > -1) {
    tab.push(headers[i]);
  }
}

console.log(tab);

优化实现（推荐） #

原逻辑本质是筛选headers中value属于选中范围的项，用filter结合箭头函数实现代码更简洁，性能更好：

const headers = 
  [ { text: 'City',                  value: 'city'   } 
  , { text: 'Zip code',              value: 'zip'    } 
  , { text: 'Country',               value: 'country'} 
  , { text: 'Number of Inhabitants', value: 'inhabitants' } 
  ];

const selectedHeaders = 
  [ { text: 'City',     value: 'city' } 
  , { text: 'Zip code', value: 'zip'  } 
  ];

// 提前提取选中的value集合，只需要遍历一次selectedHeaders
const selectedValues = new Set(selectedHeaders.map(e => e.value));
// 直接筛选headers，顺序和原headers完全一致
const tab = headers.filter(header => selectedValues.has(header.value));

console.log(tab);

该版本优势：

• 性能更高：选中值的判断时间复杂度从O(n)降到O(1)，数组元素越多性能优势越明显
• 没有冗余的for循环和临时变量，代码可读性更强
• 完全兼容Vue v-select组件的selectedHeaders变量格式

内容的提问来源于stack exchange，提问作者Zabz