如何在Array.map回调中优雅解构数组元素？

你之前的错误是用了对象解构去处理数组元素，而子数组是数组类型，必须用数组解构语法才能正确提取元素。下面是几种优雅的实现方式：

最简洁的写法 #

直接在map的回调参数中完成数组解构，然后拼接元素：

const arr = [['You:',2], ['Me:',4]]
console.log(arr.map(([person, number]) => person + String(number)));
// 预期输出: [ 'You:2', 'Me:4' ]

这里([person, number])会把每个子数组的第一个元素赋值给person，第二个元素赋值给number，直接完成拼接即可。

更简化的版本（利用JS自动类型转换） #

因为JavaScript会自动将数字转为字符串参与拼接，所以可以省略String()：

const arr = [['You:',2], ['Me:',4]]
console.log(arr.map(([a, b]) => a + b));
// 输出: [ 'You:2', 'Me:4' ]

适合复杂逻辑的写法 #

如果需要在回调中添加额外处理逻辑，同样可以用解构：

const arr = [['You:',2], ['Me:',4]]
console.log(arr.map(([prefix, num]) => {
  // 这里可以添加自定义逻辑，比如数字格式处理
  return prefix + num.toString();
}));

错误原因说明 #

你之前的代码arr.map(({person, number}) => person+String(number))用了对象解构语法，试图从元素中读取person和number属性，但子数组是数组而非对象，不存在这些属性，所以最终得到的都是undefined，拼接后就出现了undefinedundefined的结果。

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