React技巧之中斷map迴圈
正文從這開始~
總覽
在React中,中斷 map()
迴圈:
slice() map()
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'}, ]; // :point_down:️ 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
方法不會修改原陣列,相反,它會建立一個新陣列(原始陣列的淺拷貝)。
我們為 slice()
方法傳遞以下兩個引數:
名稱 | 描述 |
---|---|
startIndex | 新陣列中包含第一個元素的索引 |
endIndex | 到此為止,但不包含這個索引 |
我們指定了起始索引0,以及終止索引2。所以我們得到具有前兩個元素的部分陣列。
即使你提供給 Array.slice
方法的結束索引超過了陣列的長度,該方法並不會丟擲錯誤。但是會返回所有的陣列元素。
const arr = ['a', 'b', 'c']; const first100 = arr.slice(0, 100); console.log(first100); // :point_right:️ ['a', 'b', 'c']
我們嘗試獲取陣列的前100個元素,該陣列只包含3個元素。因此新陣列包含原始陣列的所有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'}, ]; // :point_down:️ 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()
方法的函式會被陣列中的每個元素呼叫。在每次迭代中,我們檢查當前物件是否有 country
屬性等於 Belgium
或者 Denmark
,並返回比較的結果。
filter()
方法返回一個數組,其中只包含回撥函式返回真值的元素。
在本示例中, map()
方法只會對id屬性值為2和4的物件呼叫。
負索引
如果你想在React中,對陣列的最後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'}, ]; // :point_down:️ 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()
方法傳遞負索引,表明從陣列尾部開始的偏移量。 -2
索引意味著給我陣列的最後兩個元素。這與對 slice
方法傳遞 array.length - 2
引數作用相同。
const arr = ['a', 'b', 'c', 'd', 'e']; const last2 = arr.slice(-2); console.log(last2); // :point_right:️ ['d', 'e'] const last2Again = arr.slice(arr.length - 2); console.log(last2Again); // :point_right:️ ['d', 'e']
無論哪種方式,我們告訴 slice
方法,複製陣列的最後兩個元素,並將它們放置在一個新陣列中。
即使我們嘗試獲取更多陣列包含的元素, Array.slice
也不會拋錯,相反它會返回一個包含所有元素的新陣列。
const arr = ['a', 'b', 'c']; const last100 = arr.slice(-100); console.log(last100); // :point_right:️ ['a', 'b', 'c']
在這個例子中,我們試圖獲得一個只包含3個元素的陣列的最後100個元素,所以該陣列的所有元素都被複制到新的陣列中。
- Docker映象管理基礎
- OpenCV4之C 入門詳解
- k8s暴露叢集內和叢集外服務的方法
- React報錯之react component changing uncontrolled input
- 使用jmh框架進行benchmark測試
- Python-基礎學習-第二輪
- 如果Controller裡有私有的方法,能成功訪問嗎?
- Chapter 02 - Let's Get Started(C#篇)
- 【springcloud】環境搭建與Rest使快速上手
- mybatis 01: 靜態代理 jdk動態代理
- ETCD快速入門-01 ETCD概述
- 面向物件——封裝
- gitpod.io,雲端開發除錯工具。
- postgresql邏輯備份工具pg_dump和pg_resotre學習
- MYSQL的Java操作器——JDBC
- 有趣的特性:CHECK約束
- FutureTask原始碼深度剖析
- JUC原始碼學習筆記4——原子類,CAS,Volatile記憶體屏障,快取偽共享與UnSafe相關方法
- day15--Java常用類之日期相關類
- Java面試題(六)--Redis