React技巧之中斷map循環(huán)的方法詳解
總覽
在React中，中斷map()循環(huán)：
- 在數(shù)組上調用
slice()方法，來得到數(shù)組的一部分。 - 在部分數(shù)組上調用
map()方法。 - 遍歷部分數(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方法不會修改原數(shù)組，相反，它會創(chuàng)建一個新數(shù)組（原始數(shù)組的淺拷貝）。
我們?yōu)?code>slice()方法傳遞以下兩個參數(shù)：
| 名稱 | 描述 |
|---|---|
| startIndex | 新數(shù)組中包含第一個元素的索引 |
| endIndex | 到此為止，但不包含這個索引 |
我們指定了起始索引0，以及終止索引2。所以我們得到具有前兩個元素的部分數(shù)組。
即使你提供給Array.slice方法的結束索引超過了數(shù)組的長度，該方法并不會拋出錯誤。但是會返回所有的數(shù)組元素。
const arr = ['a', 'b', 'c']; const first100 = arr.slice(0, 100); console.log(first100); // ??? ['a', 'b', 'c']
我們嘗試獲取數(shù)組的前100個元素，該數(shù)組只包含3個元素。因此新數(shù)組包含原始數(shù)組的所有3個元素。
filter
在調用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ù)會被數(shù)組中的每個元素調用。在每次迭代中，我們檢查當前對象是否有country屬性等于Belgium或者Denmark ，并返回比較的結果。
filter()方法返回一個數(shù)組，其中只包含回調函數(shù)返回真值的元素。
在本示例中，map()方法只會對id屬性值為2和4的對象調用。
負索引
如果你想在React中，對數(shù)組的最后N個元素調用map方法，可以對Array.slice()方法傳遞負索引。
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()方法傳遞負索引，表明從數(shù)組尾部開始的偏移量。-2索引意味著給我數(shù)組的最后兩個元素。這與對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方法，復制數(shù)組的最后兩個元素，并將它們放置在一個新數(shù)組中。
即使我們嘗試獲取更多數(shù)組包含的元素，Array.slice也不會拋錯，相反它會返回一個包含所有元素的新數(shù)組。
const arr = ['a', 'b', 'c']; const last100 = arr.slice(-100); console.log(last100); // ??? ['a', 'b', 'c']
在這個例子中，我們試圖獲得一個只包含3個元素的數(shù)組的最后100個元素，所以該數(shù)組的所有元素都被復制到新的數(shù)組中。
到此這篇關于React技巧之中斷map循環(huán)的方法詳解的文章就介紹到這了,更多相關React中斷map循環(huán)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了react中的ajax封裝實例詳解的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內容，需要的朋友可以參考下2017-10-10
react如何實現(xiàn)側邊欄聯(lián)動頭部導航欄效果
這篇文章主要介紹了react如何實現(xiàn)側邊欄聯(lián)動頭部導航欄效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React 高階組件HOC使用小結，一起看看吧2023-01-01
本文介紹了如何在Svelte 5項目中導入并使用React組件庫,并提供了一個示例項目地址,此外,還添加了一個React組件庫（如Ant Design）的示例,感興趣的朋友跟隨小編一起看看吧2025-01-01
本篇文章主要介紹了react-native城市列表組件的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要為大家介紹了Header組件熱門搜索欄的實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
詳解react native頁面間傳遞數(shù)據(jù)的幾種方式
這篇文章主要介紹了詳解react native頁面間傳遞數(shù)據(jù)的幾種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
react實現(xiàn)pure render時bind(this)隱患需注意!
這篇文章主要為大家詳細介紹了值得你在react實現(xiàn)pure render的時候，需要注意的bind(this)隱患，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
React?UI組件庫之快速實現(xiàn)antd的按需引入和自定義主題
react入門學習告一段路,下面這篇文章主要給大家介紹了關于React?UI組件庫之快速實現(xiàn)antd的按需引入和自定義主題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07