Question

我尝试使用.map()方法从JavaScript对象数组中生成String，并使用以下代码：

var array1 = [{
    "DepartmentId": 155,
    "DepartmentName": "Animation",
    "Selected": true
  },
  {
    "DepartmentId": 156,
    "DepartmentName": "Software Development",
    "Selected": false
  },
  {
    "DepartmentId": 161,
    "DepartmentName": "Testing",
    "Selected": false
  },
  {
    "DepartmentId": 160,
    "DepartmentName": "Account",
    "Selected": true
  }
];

// pass a function to map
const map1 = array1.map(function(e) {
  if (e.Selected == true) return e.DepartmentId;
}).join(',');

console.log(map1);

我的预期输出是：155,160

但是它给了我

实际输出为：155 ,,, 160

Answer 1

当if不满足时，undefined从回调中返回，当数组加入时会在数组中产生空白点。首先使用.filter：

var array1 = [{
    "DepartmentId": 155,
    "DepartmentName": "Animation",
    "Selected": true
  },
  {
    "DepartmentId": 156,
    "DepartmentName": "Software Development",
    "Selected": false
  },
  {
    "DepartmentId": 161,
    "DepartmentName": "Testing",
    "Selected": false
  },
  {
    "DepartmentId": 160,
    "DepartmentName": "Account",
    "Selected": true
  }
];

// pass a function to map
const map1 = array1
  .filter(e => e.Selected)
  .map(e => e.DepartmentId)
  .join(',');

console.log(map1);

或者，对于一次迭代中的filter和map，请改用reduce：

var array1 = [{
    "DepartmentId": 155,
    "DepartmentName": "Animation",
    "Selected": true
  },
  {
    "DepartmentId": 156,
    "DepartmentName": "Software Development",
    "Selected": false
  },
  {
    "DepartmentId": 161,
    "DepartmentName": "Testing",
    "Selected": false
  },
  {
    "DepartmentId": 160,
    "DepartmentName": "Account",
    "Selected": true
  }
];

// pass a function to map
const map1 = array1
  .reduce((a, e) => {
    if (e.Selected) {
      a.push(e.DepartmentId);
    }
    return a;
  }, [])
  .join(',');

console.log(map1);

Answer 2

您需要先过滤，然后映射所需的属性。

var array1 = [{ DepartmentId: 155, DepartmentName: "Animation", Selected: true }, { DepartmentId: 156, DepartmentName: "Software Development", Selected: false }, { DepartmentId: 161, DepartmentName: "Testing", Selected: false }, { DepartmentId: 160, DepartmentName: "Account", Selected: true }];

const map1 = array1
    .filter(({ Selected }) => Selected)
    .map(({ DepartmentId }) => DepartmentId)
    .join(',');

console.log(map1);

使用一个功能，您需要使用flatMap。

var array1 = [{ DepartmentId: 155, DepartmentName: "Animation", Selected: true }, { DepartmentId: 156, DepartmentName: "Software Development", Selected: false }, { DepartmentId: 161, DepartmentName: "Testing", Selected: false }, { DepartmentId: 160, DepartmentName: "Account", Selected: true }];

const map1 = array1
    .flatMap(({ Selected, DepartmentId  }) => Selected ? DepartmentId : [])
    .join(',');

console.log(map1);

Answer 3

像上面指出的那样，通常的方法是先过滤然后映射。

重复链接中指出的另一个选项是使用reduce。

但是我想我要添加另一个选项，您也可以先map然后再filter，并且您也可以filter(Boolean)。

var array1 = [{
    "DepartmentId": 155,
    "DepartmentName": "Animation",
    "Selected": true
  },
  {
    "DepartmentId": 156,
    "DepartmentName": "Software Development",
    "Selected": false
  },
  {
    "DepartmentId": 161,
    "DepartmentName": "Testing",
    "Selected": false
  },
  {
    "DepartmentId": 160,
    "DepartmentName": "Account",
    "Selected": true
  }
];

// pass a function to map
const map1 = array1.map(function(e) {
  if (e.Selected == true) return e.DepartmentId;
}).filter(Boolean).join(',');

console.log(map1);

Answer 4

一种选择是使用reduce。这将遍历每个数组元素，并且仅包含Selected个数组元素的部门ID

var array1 = [{
    "DepartmentId": 155,
    "DepartmentName": "Animation",
    "Selected": true
  },
  {
    "DepartmentId": 156,
    "DepartmentName": "Software Development",
    "Selected": false
  },
  {
    "DepartmentId": 161,
    "DepartmentName": "Testing",
    "Selected": false
  },
  {
    "DepartmentId": 160,
    "DepartmentName": "Account",
    "Selected": true
  }
];

// pass a function to map
const map1 = array1.reduce(function(c, e) {
  if (e.Selected == true) return c.concat(e.DepartmentId);
  else return c;
}, []).join(',');

console.log(map1);

更短版本：

var array1 = [{"DepartmentId":155,"DepartmentName":"Animation","Selected":true},{"DepartmentId":156,"DepartmentName":"Software Development","Selected":false},{"DepartmentId":161,"DepartmentName":"Testing","Selected":false},{"DepartmentId":160,"DepartmentName":"Account","Selected":true}]

const map1 = array1.reduce((c, e) => e.Selected ? c.concat(e.DepartmentId) : c, []).join(',');

console.log(map1);

Answer 5

同时使用地图和过滤器

var array1 = [
        {
            "DepartmentId": 155,
            "DepartmentName": "Animation",
           	"Selected":true
        },
        {
            "DepartmentId": 156,
            "DepartmentName": "Software Development",
            "Selected":false
        },
        {
            "DepartmentId": 161,
            "DepartmentName": "Testing",
            "Selected":false
        },
        {
            "DepartmentId": 160,
            "DepartmentName": "Account",
            "Selected":true
        }       
    ];

// pass a function to map
const map1 = array1.filter(function(e){
return e.Selected;
}).map(function(x){return x.DepartmentId}).join(',');

console.log(map1);

JavaScript .map（）函数返回意外的输出

5 个答案: