`for` 循环 vs `.map` 来迭代数组

Question

为什么在 React 中使用循环.map比使用for循环更好？

我正在开发一个项目，其中所有数组都使用for循环进行迭代，但我相信这是更好的好做法，.map因为它创建了数组的副本，据我所知，这是更好的做法，但我找不到一个特定的原因。

Answer 1

为什么在 React 中使用 .map 比 for 循环更好？

如果您只是在迭代，map则是错误的工具。map用于映射数组：根据前一个数组中的值生成一个新数组。某处有人将教学map作为迭代工具，不幸的是，这对他们的学生造成了伤害。（我希望我知道这是谁，所以我可以说一句话。）永远不要这样做：

// Don't do this
myArray.map(entry => {
    // ...do something with `entry`...
});

对于迭代，它是for循环、for-of循环和forEach方法之间的选择。（好吧，还有其他一些事情；请在此处查看我的答案以了解详细信息。）

例如，使用 forEach

myArray.forEach(entry => {
    // ...do something with `entry`...
});

与使用for-of：

for (const entry of myArray) {
    // ...do something with `entry`...
}

（那些并不完全等效。前者必须是一个数组。后者可以是任何可迭代对象。）

你可能map在 React 中看到很多的原因是你经常在 React 中映射事物，至少有两种方式：

1. 从原始数据映射到 JSX 元素，如下所示：

   return (
       <div>
       {myData.map(({id, name}) => <div key={id}>{name}</div>)}
       </div>
   );
   

   由于这是一个映射操作，与由所创建的阵列map被用于提供外部的内容div，map是有正确的选择。

2. 从旧状态映射到新状态，如下所示：

   const [myArray, setMyArray] = useState([]);
   // ...
   setMyArray(myArray.map(obj => {...obj, update: "updated value"}));
   

   由于这又是一个映射操作，因此创建一个新数组以设置为myArray状态成员map是正确的选择。

...但我确信使用 .map 是更好和好的做法，因为它创建了数组的副本......

如果您想要阵列的副本/更新版本，是的，这map是一个不错的选择。它比等效for循环（甚至for-of）更简洁：

const newArray = oldArray.map(entry => /*...update...*/);

对比

// Probably not best practice unless you have conditional logic
// in the loop body that may or may not `push` (or similar)
const newArray = [];
for (const entry of oldArray) {
    newArray.push(/*...update...*/);
}