javascript - js中for与map在返回promise时的区别？

Question

遇到一个问题：下面是拿到一个数组返回，通过遍历返回一个值，我之前习惯用map去遍历。

const getCapture=async ()=>{  let result=await ipcRenderer.invoke('goCapture-event')  for(const m of result){    if(m.name==='整个屏幕'){      let str=m.thumbnail.crop({x:0,y:0,width:1200,height:1170})      const imgSrc=str.toDataURL()      return imgSrc    }  }/*  result.map(m=>{    if(m.name==='整个屏幕'){      console.log(m)     let str=m.thumbnail.crop({x:0,y:0,width:1000,height:1000})     const imgStr=str.toDataURL()     return  imgStr    }  })*/}

这是map的遍历：

result.map(m=>{    if(m.name==='整个屏幕'){      console.log(m)     let str=m.thumbnail.crop({x:0,y:0,width:1000,height:1000})     const imgStr=str.toDataURL()     return  imgStr    }  })

这样返回的竟然是空，
但是如果用for，就可以正确返回：

for(const m of result){    if(m.name==='整个屏幕'){      let str=m.thumbnail.crop({x:0,y:0,width:1200,height:1170})      const imgSrc=str.toDataURL()      return imgSrc    }  }

js中for和map还有这区别吗？

Answer 1

你这是基础的问题，你上面的getCapture执行后会 return 一个imgSrc，你想要的结果只是result中的一个值，它本身不是数组。我搞不懂你这边为什么要用map去执行，map的结果是返回数组，跟你原本的结果不一致，而且如果你要使用map，代码应该这样写:

const getCapture=async ()=>{  let result=await ipcRenderer.invoke('goCapture-event')  return result.map(m=>{    if(m.name==='整个屏幕'){      console.log(m)     let str=m.thumbnail.crop({x:0,y:0,width:1000,height:1000})     const imgStr=str.toDataURL()     return imgStr    }  })[0] || "";  }

这样写才能有你上面代码的效果。

给你贴一个map简易的实现原理，我几年前写的，你对map的理解不够。

Array.prototype.myMap = function (fun) {    const arr = [];    for (let i = 0; i < this.length; i++) {        const val = fun.call(this, this[i], i, this)        arr.push(val);    }    return arr;}

Answer 2

你的if里面判断成功了才返回imgSrc ,如果判断不成功呢? 什么都不返回,那不就是空?
js基础不牢固啊,老弟

Answer 3

d232332

Answer 4

跟 Promise 一点儿关系都没有，甚至跟 map() 也没啥关系。这是最基本的 JS 语法问题。

const bar = (callback) => callback();const foo = () => {    bar(() => {        return 1;    });}let ret = foo(); // undefined/* ----------------- */const foo = () => {    for (;;) {        return 1;    }}let ret = foo(); // 1

看明白了吗？第一种写法里 foo 函数有返回值吗？你说你写了 return，那是 bar 的回调函数里的返回值，foo 函数自己有吗？

Answer 5

map的回调函数内部用return语句，返回给了map内部的匿名函数，外层的getCapture函数没有接到，所以返回的是空,修改成这样接收：

//getCapture函数内部const mappedResult = result.map(m => {    if (m.name === '整个屏幕') {      console.log(m)      let str = m.thumbnail.crop({x: 0, y: 0, width: 1000, height: 1000})      const imgStr = str.toDataURL()      return imgStr    }    return undefined; }); return mappedResult.find(imgStr => imgStr !== undefined);