ES6过滤数组和映射的高效方式

Question

我想获取仅具有 status 个“现有”的数组，并且不在 newArray 中添加状态。最有效的方法是什么？

const products = [
    {
        "id": "111",
        "name": "grapes",
        "status": "Linked",
    },
    {
        "id": "222",
        "name": "banana",
        "status": "Existing",
    },
    {
        "id": "333",
        "name": "mango",
        "status": "Existing",
    },
    {
      "id": "444",
      "name": "salad",
      "status": "Linked",
      
    },
    {
        "id": "555",
        "name": "juice",
        "status": "Existing",
    }
]

  const newArray = 
    products?.map(({ name = '', id = '' }) => ({
      name,
      id,
    }))

Answer 1

我认为问题在于您正试图在一个数组函数中同时执行这两项操作。我会使用 filter 按 status === "Existing" 过滤它，然后 map 它，删除 status 属性.

const products = [{
    "id": "111",
    "name": "grapes",
    "status": "Linked",
  },
  {
    "id": "222",
    "name": "banana",
    "status": "Existing",
  },
  {
    "id": "333",
    "name": "mango",
    "status": "Existing",
  },
  {
    "id": "444",
    "name": "salad",
    "status": "Linked",

  },
  {
    "id": "555",
    "name": "juice",
    "status": "Existing",
  }
]

const newArray = products.filter((elem) => elem.status === "Existing")
     .map(({ id, name, status }) => ({ id, name }))

console.log(newArray);

Answer 2

就代码行而言，最有效的可能只是一个 filter() followed by a map() 操作：

const result = products.filter(({status}) => status === 'Existing')
                       .map(({id, name}) => ({id, name}));

完整片段：

const products = [{
  "id": "111",
  "name": "grapes",
  "status": "Linked",
}, {
  "id": "222",
  "name": "banana",
  "status": "Existing",
}, {
  "id": "333",
  "name": "mango",
  "status": "Existing",
}, {
  "id": "444",
  "name": "salad",
  "status": "Linked",

}, {
  "id": "555",
  "name": "juice",
  "status": "Existing",
}];

const result = products.filter(({status}) => status === 'Existing')
                       .map(({id, name}) => ({id, name}));
                       
console.log(result);

由于这需要两次迭代，就性能而言最有效的方法可能是显式 for 循环，将匹配值推送到结果数组中。

如果您想在一次迭代中完成所有工作但仍保持功能性方法，则可以通过一个 reduce() 操作完成所有工作：

const products = [{
  "id": "111",
  "name": "grapes",
  "status": "Linked",
}, {
  "id": "222",
  "name": "banana",
  "status": "Existing",
}, {
  "id": "333",
  "name": "mango",
  "status": "Existing",
}, {
  "id": "444",
  "name": "salad",
  "status": "Linked",

}, {
  "id": "555",
  "name": "juice",
  "status": "Existing",
}];

const result = products.reduce((a, {id, name, status}) => {
  if (status === 'Existing') a.push({id, name});
  return a;
}, []);
                       
console.log(result);

ES6过滤数组和映射的高效方式

Efficient Way of Filtering Array and Mapping in ES6

javascript

ecmascript-6