如何使用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應該返回完全相同的數組長度，因此實際上並不是最合適的數組長度 。