React技巧之中斷map循環(huán)

正文從這開始~

總覽

在React中，中斷map()循環(huán)：

1. 在數(shù)組上調用slice()方法，來得到數(shù)組的一部分。
2. 在部分數(shù)組上調用map()方法。
3. 遍歷部分數(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 style="font-size: 14px;word-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin: 0 2px;background-color: rgba(27,31,35,.05);font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;word-break: break-all;color: #916dd5;font-weight: bolder;background: none;">slice()方法傳遞以下兩個參數(shù)：

我們指定了起始索引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ù)組中。

參考資料