javascript - `for` 循环 vs `.map` 迭代数组

Question

为什么在 React 中使用 .map 比 for 循环更好？有什么具体原因吗？

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

Answer 1

Is there a specific reason why is better to use .map than for loops in React?

如果您只是迭代，map 是错误的工具。 map 用于映射 数组:根据先前数组的值生成新 数组。不幸的是，有人在某处教授 map 作为迭代工具，这对他们的学生造成了伤害。 (我希望我知道那是谁，这样我就可以说句话了。)永远不要这样做:

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

对于迭代，可以在for 循环、for-of 循环和forEach 之间进行选择> 方法。 (好吧，还有其他一些事情；请参阅 my answer here 以了解详细信息。)

例如，使用forEach

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

对比使用 for-of:

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

(它们并不完全等价。前者必须是数组。后者可以是任何可迭代对象。)

你可能在 React 中经常看到 map 的原因是你经常在 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是正确的选择。

...but I'm convinced that is better and good practice to use .map because it creates a copy of the array...

如果您想要数组的副本/更新版本，是的，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...*/);
}