React技巧之中斷map迴圈

語言: CN / TW / HK

正文從這開始~

總覽

在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個元素,所以該陣列的所有元素都被複制到新的陣列中。