如何在ES5中根据num属性匹配结果填充name属性数组？

需求：当变量num的值与对象数组arrObj中元素的num属性值匹配时，将对应元素的name属性值填充至空数组arr中（预期结果为['Luke', 'Martin']）。

原始变量定义 #

var num = 1;
var arr = [];
var arrObj = [
  { name: 'Mark', num: 3 },
  { name: 'Paul', num: 4 },
  { name: 'Luke', num: 1 },
  { name: 'Martin', num: 1 }
];

实现方案 #

方案1：普通for循环（兼容所有ES5及更早环境）

通过遍历数组索引，逐个判断元素的num属性是否匹配，匹配则将name推入目标数组：

for (var i = 0; i < arrObj.length; i++) {
  var currentItem = arrObj[i];
  if (currentItem.num === num) {
    arr.push(currentItem.name);
  }
}
console.log(arr); // 输出: ['Luke', 'Martin']

方案2：forEach遍历（ES5新增数组方法）

利用ES5新增的Array.prototype.forEach方法遍历数组，逻辑与for循环一致，写法更简洁：

arrObj.forEach(function(currentItem) {
  if (currentItem.num === num) {
    arr.push(currentItem.name);
  }
});
console.log(arr); // 输出: ['Luke', 'Martin']

方案3：filter + map组合（ES5新增数组方法）

先通过filter筛选出符合条件的元素，再用map提取对应的name属性，直接得到目标数组：

var arr = arrObj.filter(function(currentItem) {
  return currentItem.num === num;
}).map(function(currentItem) {
  return currentItem.name;
});
console.log(arr); // 输出: ['Luke', 'Martin']

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