当前位置:  开发笔记 > 编程语言 > 正文

在Javascript中同时映射和过滤数组

如何解决《在Javascript中同时映射和过滤数组》经验,为你挑选了5个好方法。

我有一个对象数组,我想迭代生成一个新的过滤数组.但是,我还需要根据参数从新数组中过滤掉一些对象.我正在尝试这个:

function renderOptions(options) {
    return options.map(function (option) {
        if (!option.assigned) {
            return (someNewObject);
        }
    });   
}

这是一个好方法吗?有更好的方法吗?我愿意使用任何库,如lodash.



1> thefourtheye..:

你应该用Array.reduce它.

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

var reduced = options.reduce(function(filtered, option) {
  if (option.assigned) {
     var someNewValue = { name: option.name, newProperty: 'Foo' }
     filtered.push(someNewValue);
  }
  return filtered;
}, []);

document.getElementById('output').innerHTML = JSON.stringify(reduced);

Only assigned options

 


2> Zuker..:

使用减少,卢克!

function renderOptions(options) {
    return options.reduce(function (res, option) {
        if (!option.assigned) {
            res.push(someNewObject);
        }
        return res;
    }, []);   
}



3> 小智..:

使用ES6,您可以做到非常简短:

options.filter(opt => !opt.assigned).map(opt => someNewObject)


这将执行两个循环,具体取决于哪些过滤器返回仍然可以占用内存.

4> Trevor Dixon..:

Array.prototype.flatMap是另一个选项。

options.flatMap(o => o.assigned ? [o.name] : []);

在上面链接的MDN页面上:

flatMap可以用作在地图中添加和删除项目(修改项目数)的方法。换句话说,它允许您将许多项目映射到许多项目(通过分别处理每个输入项目),而不是始终一对一。从这个意义上讲,它的作用类似于过滤器。只需返回一个1元素数组以保留该项目,返回一个多元素数组以添加项目,或返回0元素数组以删除该项目。


很好的解决方案!但是,读者切记,`flatMap`是最近才引入的,它的浏览器支持是[受限的](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap# Browser_compatibility)。您可能要使用官方的polyfill / shims:[flatMap](https://github.com/es-shims/Array.prototype.flatMap)和[flat](https://github.com/es-shims/ Array.prototype.flat)。

5> Maxim Kuzmin..:

reduceES6花式扩展语法的一行就在这里!

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const filtered = options
  .reduce((result, {name, assigned}) => [...result, ...assigned ? [name] : []], []);

console.log(filtered);
推荐阅读
农大军乐团_697
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有