javascript - js遍历的一个问题？

Question

dataList是一个数组，我想遍历找到返回条件的数据，我下面写的为什么不行？

const getParentIdTxt = (parentid) => {  if (parentid === null) {    return '无'  }  dataList.value.map((m) => {    if (m.id === parentid) {      console.log(m.meta.title)      return m.meta.title    }  })}

但改成下面的就可以：

const getParentIdTxt = (parentid) => {  if (parentid === null) {    return '无'  }  const okItem = dataList.value.find((m) => m.id === parentid)  if (okItem) {    return okItem.meta.title  }  return '未找到'}

Answer 1

这位仁兄什么水平啊，最基本的map用法都不知道，如果是学生有情可原，如果是已经参加工作的还问这种问题，未免有点太lou了

Answer 2

// mapconst arr = ["1", "2"]const arr1 = arr.map((item) => {    // 做一些转换，比如拼接一个 _test    return item + "_test"})// 相当于const arr = ["1", "2"]const arr1 = []for (let i = 0; i < arr.length; i++) {    arr1.push(arr[i] + "_test")}

要找到返回条件的数据，可以用 filter

const arr = ["1", "2"]const arr1 = arr.filter((item) => item === "2")

相当于

const arr = ["1", "2"]const arr1 = []for (let i = 0; i < arr.length; i++) {    if (arr[i] === "2") {        arr1.push(arr[i])    }}

Answer 3

你的第一个函数使用 map 方法来遍历 dataList.value，但 map 方法并不返回匹配项，而是返回一个新的数组，该数组中的每个元素都是原始数组中的元素经过一个函数处理后的结果。在你的代码中，你并没有处理那些不匹配 m.id === parentid 的元素，所以你得到的新数组将包含原始数组中的所有元素，并且没有任何更改。

此外，你的 map 函数内部没有 return 语句，所以它会返回 undefined，这也会成为新数组的元素。

而你的第二个函数使用了 find 方法，它会返回数组中第一个满足测试函数的元素。如果没有找到满足条件的元素，它会返回 undefined。在你的代码中，你首先检查 okItem 是否存在，如果存在，就返回它的 meta.title，否则返回 '未找到'。

所以，如果你想使用 map 方法来达到你想要的效果，你可以修改你的代码如下：

const getParentIdTxt = (parentid) => {  if (parentid === null) {    return '无'  }  const result = dataList.value.map((m) => {    if (m.id === parentid) {      console.log(m.meta.title)      return m.meta.title    }    return null;  // 对于不匹配的元素，返回null或其他占位符  }).filter(Boolean);  // 使用filter方法移除null或占位符  return result.length > 0 ? result[0] : '未找到';  // 如果找到匹配项，返回第一个，否则返回'未找到'}

但请注意，这种使用 map 的方式并不常见，因为 map 的主要目的是将数组中的每个元素转换为一个新的值，而不是查找满足特定条件的元素。在这种情况下，使用 find 方法是更合适的选择。