如何使用Array.prototype.map和Array.prototype.filter（）在javascript中映射没有未定义值的项目

Question

如何使用Array.prototype.map和Array.prototype.filter（）在javascript中映射没有未定义值的项目

码：

var testArray = [
  {
    name: "toto",
    totoNumber: "1",
  },
  {
    name: "tata",
    totoNumber: "2",
  },
  {
    mame: "error",
  },
]

var listOfToto = testArray.map(x => x.totoNumber);
var listOfToto2 = testArray.map(x => x.totoNumber ? x.totoNumber : undefined);
var listOfToto3 = testArray.filter(x => x.totoNumber).map(x => x.totoNumber);

console.log(listOfToto);  
console.log(listOfToto2);  
console.log(listOfToto3);  

值：

数组[“ 1”，“ 2”，未定义]
数组[“ 1”，“ 2”，未定义]
数组[“ 1”，“ 2”]

我想不使用Array.prototype.filter（）来获取最后一个数组（[“ 1”，“ 2”] ）
（也许除了Array.prototype.map（）以外的其他东西）

其他来源：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
为什么javascript map函数返回undefined？
https://codewithhugo.com/avoiding-falsy-values-in-javascript-arrays/

Answer 1

您可以使用reduce 。

let data = testArray.reduce((result, item) => item.totoNumber ? result.concat(item.totoNumber) : result, []);

// Or a slightly more efficient solution
// if you are worried about concat creating a new temporary array at each iteration

let data = testArray.reduce((result, item) => {
    if (item.totoNumber) {
        result.push(item.totoNumber);
    }
    return result;
}, []);

但是，为什么要避免使用filter ？ 它使代码更具可读性（在我看来），除非您处理的是大型数组或使用对时间敏感的功能，否则这将是微优化，您不应该为此而牺牲清晰度。

我认为这看起来更干净：

let data = testArray.map(item => item.totoNumber).filter(e => e);

Answer 2

如果值不存在，则可以使用Array.flatMap()并返回一个空数组[] ：

 const testArray = [{"name":"toto","totoNumber":"1"},{"name":"tata","totoNumber":"2"},{"mame":"error"}] const listOfToto2 = testArray.flatMap(x => x.totoNumber ? x.totoNumber : []); console.log(listOfToto2); 

Answer 3

您可以考虑以下一些选项，这些选项都需要一个循环。

 var arr = [ { name: "toto", totoNumber: "1", }, { name: "tata", totoNumber: "2", }, { mame: "error", }, ] // via Array.forEach let fe = [] arr.forEach(({totoNumber}) => totoNumber ? fe.push(totoNumber) : 0) // via Array.reduce let r = arr.reduce((acc,{totoNumber}) => (totoNumber ? acc.push(totoNumber) : 0, acc), []) // via Array.map acting like Array.forEach let m = [] arr.map(({totoNumber}) => (totoNumber ? m.push(totoNumber) : 0, totoNumber)) console.log(fe) console.log(r) console.log(m) 

在现实中只有Array.reduce意义和平常的方式来处理你的情况是通过Array.filter然后Array.map但既然你问如果你能做到这一点map只是......你可以，但map应该返回完全相同的数组长度，因此实际上并不是最合适的数组长度 。