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)前對象是否有country屬性等于Belgium或者Denmark ，并返回比較的結(jié)果。
filter()方法返回一個(gè)數(shù)組，其中只包含回調(diào)函數(shù)返回真值的元素。
在本示例中，map()方法只會(huì)對id屬性值為2和4的對象調(diào)用。
負(fù)索引
如果你想在React中，對數(shù)組的最后N個(gè)元素調(diào)用map方法，可以對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è)元素。這與對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è)例子中，我們試圖獲得一個(gè)只包含3個(gè)元素的數(shù)組的最后100個(gè)元素，所以該數(shù)組的所有元素都被復(fù)制到新的數(shù)組中。
到此這篇關(guān)于React技巧之中斷map循環(huán)的方法詳解的文章就介紹到這了,更多相關(guān)React中斷map循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了react中的ajax封裝實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
react如何實(shí)現(xiàn)側(cè)邊欄聯(lián)動(dòng)頭部導(dǎo)航欄效果
這篇文章主要介紹了react如何實(shí)現(xiàn)側(cè)邊欄聯(lián)動(dòng)頭部導(dǎo)航欄效果，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2023-01-01
本文介紹了如何在Svelte 5項(xiàng)目中導(dǎo)入并使用React組件庫,并提供了一個(gè)示例項(xiàng)目地址,此外,還添加了一個(gè)React組件庫（如Ant Design）的示例,感興趣的朋友跟隨小編一起看看吧2025-01-01
react native帶索引的城市列表組件的實(shí)例代碼
本篇文章主要介紹了react-native城市列表組件的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要為大家介紹了Header組件熱門搜索欄的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
詳解react native頁面間傳遞數(shù)據(jù)的幾種方式
這篇文章主要介紹了詳解react native頁面間傳遞數(shù)據(jù)的幾種方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
react實(shí)現(xiàn)pure render時(shí)bind(this)隱患需注意!
這篇文章主要為大家詳細(xì)介紹了值得你在react實(shí)現(xiàn)pure render的時(shí)候，需要注意的bind(this)隱患，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
React?UI組件庫之快速實(shí)現(xiàn)antd的按需引入和自定義主題
react入門學(xué)習(xí)告一段路,下面這篇文章主要給大家介紹了關(guān)于React?UI組件庫之快速實(shí)現(xiàn)antd的按需引入和自定義主題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07