React技巧之循环遍历对象
<p>原文链接：https://bobbyhadz.com/blog/react-loop-through-object</p><p>作者：Borislav Hadzhiev</p>
<p>正文从这开始~</p>
<h2 id="遍历对象的键">遍历对象的键</h2>
<p>在React中循环遍历对象：</p>
<ol>
<li>使用<code>Object.keys()</code> 方法得到对象的键组成的数组。</li>
<li>使用<code>map()</code>方法来迭代键组成的数组。</li>
</ol>
<pre><code class="language-jsx">export default function App() {
const employee = {
id: 1,
name: 'Bob',
salary: 123,
};
return (
<div>
{/* 👇️ iterate object KEYS */}
{Object.keys(employee).map((key, index) => {
return (
<div key={index}>
<h2>
{key}: {employee}
</h2>
<hr />
</div>
);
})}
<br />
<br />
<br />
{/* 👇️ iterate object VALUES */}
{Object.values(employee).map((value, index) => {
return (
<div key={index}>
<h2>{value}</h2>
<hr />
</div>
);
})}
</div>
);
}
</code></pre>
<p>我们使用<code>Object.keys</code>方法得到对象的键组成的数组。</p>
<pre><code class="language-jsx">const employee = {
id: 1,
name: 'Bob',
salary: 123,
};
// 👇️ ['id', 'name', 'salary']
console.log(Object.keys(employee));
// 👇️
console.log(Object.values(employee));
</code></pre>
<p>我们只可以在数组上调用<code>map()</code>方法。所以我们需要得到对象的键组成的数组，或者值组成的数组。</p>
<p>我们传递给<code>Array.map</code>方法的函数被调用，其中包含数组中的每个元素和当前迭代的索引。在上面的例子中，我们使用<code>index</code>作为元素上的<code>key</code>属性，如果可以的话，更好的方式是使用更加稳定的、独一无二的标识符。</p>
<p>当遍历对象的键时，使用对象的键作为<code>key</code>属性是安全可靠的，因为对象中的键保证是唯一的。</p>
<pre><code class="language-jsx">export default function App() {
const employee = {
id: 1,
name: 'Bob',
salary: 123,
};
return (
<div>
{/* 👇️ iterate object KEYS */}
{Object.keys(employee).map(key => {
return (
<div key={key}>
<h2>
{key}: {employee}
</h2>
<hr />
</div>
);
})}
</div>
);
}
</code></pre>
<p>然而，如果遍历对象的值，那么使用对象的值作为<code>key</code>属性是不安全的，除非你可以确保所有的值在对象中都是独一无二的。</p>
<p>由于性能的原因，React需要在内部使用<code>key</code>属性。这有助于库确保只重新渲染已经改变的数组元素。说到这里，你不会看到使用索引和一个稳定的、唯一的标识符之间有任何明显的区别，除非你要处理成千上万的数组元素。</p>
<h2 id="遍历对象的值">遍历对象的值</h2>
<p>在React中，循环遍历对象的值：</p>
<ol>
<li>使用<code>Object.values()</code> 方法得到对象的值组成的数组。</li>
<li>使用<code>map()</code>方法迭代对象值组成的数组。</li>
</ol>
<pre><code class="language-jsx">export default function App() {
const employee = {
id: 1,
name: 'Bob',
salary: 123,
};
return (
<div>
{/* 👇️ iterate object VALUES */}
{Object.values(employee).map((value, index) => {
return (
<div key={index}>
<h2>{value}</h2>
<hr />
</div>
);
})}
</div>
);
}
</code></pre>
<h3 id="objectvalues">Object.values</h3>
<p>我们使用<code>Object.values</code> 方法得到对象的值组成的数组。</p>
<pre><code class="language-jsx">const employee = {
id: 1,
name: 'Bob',
salary: 123,
};
// 👇️
console.log(Object.values(employee));
</code></pre>
<p>如果你只想渲染对象的值，你可以使用此方法直接访问它们。</p>
<h3 id="objectentries"><strong>Object.entries</strong></h3>
<p>你也可以使用<code>Object.entries</code> 方法来返回对象的键值对数组。</p>
<pre><code class="language-jsx">export default function App() {
const employee = {
id: 1,
name: 'Bob',
salary: 123,
};
console.log(Object.entries(employee));
return (
<div>
{Object.entries(employee).map(() => {
return (
<div key={key}>
<h2>
{key}: {employee}
</h2>
<hr />
</div>
);
})}
</div>
);
}
</code></pre>
<p>下面是<code>Object.entries()</code>方法的输出。</p>
<pre><code class="language-jsx">const employee = {
id: 1,
name: 'Bob',
salary: 123,
};
// 👇️ [
// ['id', 1],
// ['name', 'Bob'],
// ['salary', 123],
// ]
const result = Object.entries(employee);
console.log(result);
</code></pre>
<p>该方法返回一个包含键值对子数组的数组。</p>
<h3 id="arrayforeach">Array.forEach()</h3>
<p>另一种方法是使用<code>Array.forEach()</code>方法来迭代对象的键，并将JSX元素推送到一个数组中，然后我们进行渲染。</p>
<pre><code class="language-jsx">export default function App() {
const employee = {
id: 1,
name: 'Bob',
salary: 123,
};
const results = [];
Object.keys(employee).forEach(key => {
results.push(
<h2 key={key}>
{key}: {employee}
</h2>,
);
});
return (
<div>
{results}
</div>
);
}
</code></pre>
<p><code>Array.forEach()</code>方法在每个键上都会被调用，然而<code>forEach()</code>方法返回<code>undefined</code>，所以我们不能直接在JSX代码中使用它。相反，我们把JSX元素推到一个数组中，然后再进行渲染。</p>
<p>需要注意的是，这是一个比较间接的方法，你不会在React应用程序中经常看到它的使用。</p><br><br>
来源：https://www.cnblogs.com/chuckQu/p/16403628.html
頁:
[1]