JavaScript中array.map()返回undefined数组的问题求助

你的问题出在箭头函数的语法上，导致map回调没有返回预期的对象，最终得到全是undefined的数组。

错误原因 #

你写的箭头函数用大括号{}包裹了函数体，但里面的test:"asdf"并不是创建对象的写法——这其实是标签语句（给asdf加了一个名为test的标签），而且整个回调函数没有显式的return语句，所以每次迭代都默认返回undefined，映射后的自然就是全undefined的数组。

修正方案 #

有两种方式可以解决这个问题：

方案1：省略大括号，用括号包裹对象字面量

当箭头函数直接返回对象时，需要用括号()把对象包起来，避免被解析为代码块：

get azOptions() {
    return this.arr?.map(az => ({
        test: "asdf"
    }));
}

方案2：保留大括号，显式添加return语句

如果要保留大括号，必须明确用return返回创建的对象：

get azOptions() {
    return this.arr?.map(az => {
        return { test: "asdf" };
    });
}

两种方式都能让map正确返回包含{test: "asdf"}对象的数组，解决你遇到的问题。

内容的提问来源于stack exchange，提问作者Maxim