React技巧之中斷map循環(huán)的方法詳解
總覽
在React中，中斷map()循環(huán)：
- 在數(shù)組上調(diào)用
slice()方法，來得到數(shù)組的一部分。 - 在部分?jǐn)?shù)組上調(diào)用
map()方法。 - 遍歷部分?jǐn)?shù)組。
export default function App() {
const employees = [
{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Bob', country: 'Belgium'},
{id: 3, name: 'Carl', country: 'Canada'},
{id: 4, name: 'Delilah', country: 'Denmark'},
{id: 5, name: 'Ethan', country: 'Egypt'},
];
// ??? map() first 2 elements of array
return (
<div>
{employees.slice(0, 2).map((employee, index) => {
return (
<div key={index}>
<h2>name: {employee.name}</h2>
<h2>country: {employee.country}</h2>
<hr />
</div>
);
})}
</div>
);
}slice
Array.slice方法不會(huì)修改原數(shù)組，相反，它會(huì)創(chuàng)建一個(gè)新數(shù)組（原始數(shù)組的淺拷貝）。
我們?yōu)?code>slice()方法傳遞以下兩個(gè)參數(shù)：
| 名稱 | 描述 |
|---|---|
| startIndex | 新數(shù)組中包含第一個(gè)元素的索引 |
| endIndex | 到此為止，但不包含這個(gè)索引 |
我們指定了起始索引0，以及終止索引2。所以我們得到具有前兩個(gè)元素的部分?jǐn)?shù)組。
即使你提供給Array.slice方法的結(jié)束索引超過了數(shù)組的長度，該方法并不會(huì)拋出錯(cuò)誤。但是會(huì)返回所有的數(shù)組元素。
const arr = ['a', 'b', 'c']; const first100 = arr.slice(0, 100); console.log(first100); // ??? ['a', 'b', 'c']
我們嘗試獲取數(shù)組的前100個(gè)元素，該數(shù)組只包含3個(gè)元素。因此新數(shù)組包含原始數(shù)組的所有3個(gè)元素。
filter
在調(diào)用map()之前，也可以使用Array.filter方法。
export default function App() {
const employees = [
{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Bob', country: 'Belgium'},
{id: 3, name: 'Carl', country: 'Canada'},
{id: 4, name: 'Delilah', country: 'Denmark'},
{id: 5, name: 'Ethan', country: 'Egypt'},
];
// ??? map() LAST 2 elements of array
return (
<div>
{employees
.filter(employee => {
return (
employee.country === 'Belgium' || employee.country === 'Denmark'
);
})
.map((employee, index) => {
return (
<div key={index}>
<h2>name: {employee.name}</h2>
<h2>country: {employee.country}</h2>
<hr />
</div>
);
})}
</div>
);
}我們傳遞給filter()方法的函數(shù)會(huì)被數(shù)組中的每個(gè)元素調(diào)用。在每次迭代中，我們檢查當(dāng)前對(duì)象是否有country屬性等于Belgium或者Denmark ，并返回比較的結(jié)果。
filter()方法返回一個(gè)數(shù)組，其中只包含回調(diào)函數(shù)返回真值的元素。
在本示例中，map()方法只會(huì)對(duì)id屬性值為2和4的對(duì)象調(diào)用。
負(fù)索引
如果你想在React中，對(duì)數(shù)組的最后N個(gè)元素調(diào)用map方法，可以對(duì)Array.slice()方法傳遞負(fù)索引。
export default function App() {
const employees = [
{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Bob', country: 'Belgium'},
{id: 3, name: 'Carl', country: 'Canada'},
{id: 4, name: 'Delilah', country: 'Denmark'},
{id: 5, name: 'Ethan', country: 'Egypt'},
];
// ??? map() LAST 2 elements of array
return (
<div>
{employees.slice(-2).map((employee, index) => {
return (
<div key={index}>
<h2>name: {employee.name}</h2>
<h2>country: {employee.country}</h2>
<hr />
</div>
);
})}
</div>
);
}為slice()方法傳遞負(fù)索引，表明從數(shù)組尾部開始的偏移量。-2索引意味著給我數(shù)組的最后兩個(gè)元素。這與對(duì)slice方法傳遞array.length - 2參數(shù)作用相同。
const arr = ['a', 'b', 'c', 'd', 'e']; const last2 = arr.slice(-2); console.log(last2); // ??? ['d', 'e'] const last2Again = arr.slice(arr.length - 2); console.log(last2Again); // ??? ['d', 'e']
無論哪種方式，我們告訴slice方法，復(fù)制數(shù)組的最后兩個(gè)元素，并將它們放置在一個(gè)新數(shù)組中。
即使我們嘗試獲取更多數(shù)組包含的元素，Array.slice也不會(huì)拋錯(cuò)，相反它會(huì)返回一個(gè)包含所有元素的新數(shù)組。
const arr = ['a', 'b', 'c']; const last100 = arr.slice(-100); console.log(last100); // ??? ['a', 'b', 'c']
在這個(gè)例子中，我們?cè)噲D獲得一個(gè)只包含3個(gè)元素的數(shù)組的最后100個(gè)元素，所以該數(shù)組的所有元素都被復(fù)制到新的數(shù)組中。
到此這篇關(guān)于React技巧之中斷map循環(huán)的方法詳解的文章就介紹到這了,更多相關(guān)React中斷map循環(huán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了對(duì)于React各種狀態(tài)管理器的解讀,文中給大家提到了狀態(tài)管理器是如何使用的，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
這篇文章主要跟大家介紹了關(guān)于React-Native中一些常用組件的用法的相關(guān)資料，其中詳細(xì)介紹了關(guān)于ScrollView組件、ListView組件、Navigator組件、TableBarIOS組件以及網(wǎng)絡(luò)請(qǐng)求等相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
react antd-design Select全選功能實(shí)例
這篇文章主要介紹了react antd-design Select全選功能實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
用react實(shí)現(xiàn)一個(gè)簡單的scrollView組件
這篇文章主要給大家介紹一下如何用 react 實(shí)現(xiàn)一個(gè)簡單的 scrollView組件，文中有詳細(xì)的代碼示例，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
React 最為核心的就是 Virtual DOM 和 Diff 算法，diff算法的基礎(chǔ)是Virtual DOM，接下來通過本文給大家介紹React中diff算法的相關(guān)知識(shí)，對(duì)React中diff算法感興趣的朋友跟隨小編一起學(xué)習(xí)下吧2021-05-05
react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-09-09
React?Hooks使用startTransition與useTransition教程示例
這篇文章主要為大家介紹了React?Hooks使用startTransition與useTransition教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了淺談react路由傳參的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01