如何移除结果数组中的空对象？提取在线状态元素的name属性

问题描述 #

我有一个包含元素的数组：

const item= [{name : 'a', color : 'white', status : 'offline'},
            {name : 'b', color : 'red', status : 'offline'},
            {name : 'c', color : 'yellow', status : 'online'},
            {name : 'e', color : 'green', status : 'online'}]

我需要创建一个新数组，仅包含status为online的元素的name属性。

我写的代码如下：

let newItem={};
let objLen=Object.keys(item).length;
for(const i=0;i<=objLen;i++){
 if([item.status][i] === 'online' && [item.status][i] != 'offline'){
  newItem[i]=[item.name][i]
 }
}
console.log(newItem);

但运行后newItem返回了带空对象的结果：

newItem= [{},
         {},
         {name : 'c'},
         {name : 'e'}]

想得到不含空对象的结果：

newItem= [{name : 'c'},
         {name : 'e'}]

问题分析与解决 #

你的代码存在几处错误：

• newItem被初始化为对象{}，但需求是数组，应初始化为[]
• 遍历数组无需用Object.keys(item).length，直接使用item.length即可
• 访问数组元素属性的方式错误，[item.status][i]应该改为item[i].status，需先获取数组第i个元素，再访问其status属性
• 赋值逻辑错误，[item.name][i]应改为{ name: item[i].name }，以此构造包含name属性的对象
• 循环条件i<=objLen会导致数组越界，正确条件是i<objLen

修正后的for循环写法 #

let newItem = [];
const arrLen = item.length;
for (let i = 0; i < arrLen; i++) {
  if (item[i].status === 'online') {
    newItem.push({ name: item[i].name });
  }
}
console.log(newItem);

更简洁的ES6写法（推荐） #

利用数组的filter方法筛选符合条件的元素，再用map方法提取所需属性：

const newItem = item
  .filter(item => item.status === 'online')
  .map(item => ({ name: item.name }));
console.log(newItem);

两种写法都能输出你期望的结果：[{name: 'c'}, {name: 'e'}]

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