JavaScript中的 `map` 和 `filter`

Question

以下是输入内容：

var m = [{
    name: 'foo',
    routes: [{verb: 'post', path: '/foo1'},
      {verb: 'get', path: '/foo2'}]
  }, {
    name: 'bar',
    routes: [{verb: 'put', path: '/:id'}]},
  {
    name: '__ignoreme',
    routes: [{verb: 'post', path: '/baz1'},
      {verb: 'get', path: '/baz2'}]
  }]

使用 map 和 filter，我想要实现：

  var desired = [
  'foo POST /foo1',
  'foo GET /foo2',
  'bar PUT /:id',
]

完整代码：

    var m = [{
        name: 'foo',
        routes: [{verb: 'post', path: '/foo1'},
          {verb: 'get', path: '/foo2'}]
      }, {
        name: 'bar',
        routes: [{verb: 'put', path: '/:id'}]},
      {
        name: '__ignoreme',
        routes: [{verb: 'post', path: '/baz1'},
          {verb: 'get', path: '/baz2'}]
      }]



    var desired = [
      'foo POST /foo1',
      'foo GET /foo2',
      'bar PUT /:id',
    ]


    var myOutput = m
            .filter(function (m) {
              return m.name.indexOf('__') === -1;
            })
            .map(function (m) {
              return [
                m.name,
                m.routes[0].verb.toUpperCase(),    // I should loop through my array instead of getting just the first element
// But can I loop through the array in my map?        
                m.routes[0].path
              ].join(' ');
            });


    console.log('>myOutput:', myOutput);
    // What I achieve which is not desired : 
    // [
    // 'foo POST /foo1',
    //  'foo PUT /:id',
    //]

这是我代码中使用的结构，我想通过小的变化并仍然使用map和filter来实现我期望的输出。

- Web Developer

---

有没有办法循环遍历我的数组？ - Web Developer

我不明白，你的输出里应该包含 'foo GET /foo2' 吗？但是你已经明确地将它过滤掉了。 - Crescent Fresh

是的，我该如何在map函数中循环我的路由数组？ - Web Developer

Answer 1

您可以在map函数内部使用循环，以确保查看给定名称的所有路由。这将返回一个数组的数组，因此我在map之后使用reduce将其展平为单个字符串数组。

var myOutput = m
        .filter(function (m) {
          return m.name.indexOf('__') === -1;
        })
        .map(function (m) {
          var arr = [];
          for(var i = 0; i < m.routes.length; i++){
            arr.push([
              m.name,
              m.routes[i].verb.toUpperCase(),            
              m.routes[i].path
            ].join(' '));
          }
          return arr;
        }).reduce(function(prev, cur){
          return prev.concat(cur);
        });

这会导致我的输出为["foo POST /foo1", "foo GET /foo2", "bar PUT /:id"]。

- IrkenInvader

Answer 2

你需要遍历你的routes数组，并在每个项目中进行映射以获取verb和path的值。

 var m = [{
        name: 'foo',
        routes: [{verb: 'post', path: '/foo1'},
          {verb: 'get', path: '/foo2'}]
      }, {
        name: 'bar',
        routes: [{verb: 'put', path: '/:id'}]},
      {
        name: '__ignoreme',
        routes: [{verb: 'post', path: '/baz1'},
          {verb: 'get', path: '/baz2'}]
      }]



    var desired = [
      'foo POST /foo1',
      'foo GET /foo2',
      'bar PUT /:id',
    ]


    var myOutput = m
            .filter(function (a) {
              return a.name.indexOf('__') === -1;
            })
            .map(function (a) {
              return a.routes.map(function (item) {
                return [
                  a.name,
                  item.verb.toUpperCase(),  
                  item.path
                ].join(' ');
              });
            })
            .reduce(function(prev, current){
              return prev.concat(current);
            })


    document.write('>myOutput:', myOutput);

- Aditya Singh

Answer 3

在过滤输入后，您可以将每组路由map到期望的格式，然后使用concat将这些数组连接在一起：

var m = [
    {
        name: 'foo',
        routes: [
            {verb: 'post', path: '/foo1'},
            {verb: 'get', path: '/foo2'}]
    },{
        name: 'bar',
        routes: [
            {verb: 'put', path: '/:id'}]
    },{
        name: '__ignoreme',
        routes: [
            {verb: 'post', path: '/baz1'},
            {verb: 'get', path: '/baz2'}]
    }
];

var filter = function(a){
    return a.filter(function(x){
        return x.name !== '__ignoreme';
    });
};

var format = function(name, route){
    return name + ' ' + route.verb.toUpperCase() + ' ' + route.path;
};

var process = function(a){
    if(!a.length){
        return [];
    }
    return a[0].routes.map(function(r){
        return format(a[0].name, r);
    }).concat(process(a.slice(1)));
}

console.log(process(filter(m)));

ES6 版本

const m = [
    {
        name: 'foo',
        routes: [
            {verb: 'post', path: '/foo1'},
            {verb: 'get', path: '/foo2'}]
    },{
        name: 'bar',
        routes: [
            {verb: 'put', path: '/:id'}]
    },{
        name: '__ignoreme',
        routes: [
            {verb: 'post', path: '/baz1'},
            {verb: 'get', path: '/baz2'}]
    }
];

const filter = xs => xs.filter(x => x.name !== '__ignoreme');
const format = (name, route) => `${name} ${route.verb.toUpperCase()} ${route.path}`;
const process = ([x,...xs]) =>
    x === undefined ? [] : [...x.routes.map(r => format(x.name,r)), ...process(xs)];

console.log(process(filter(m)));

ES6 参考：
const，
带有 解构 参数的箭头函数，
模板字面量，以及
展开运算符。

- 1983