React技巧之中断map循环

正文从这开始~

总览

在React中,中断map()循环:

  1. 在数组上调用slice()方法,来得到数组的一部分。
  2. 在部分数组上调用map()方法。
  3. 遍历部分数组。
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方法不会修改原数组,相反,它会创建一个新数组(原始数组的浅拷贝)。

我们为slice()方法传递以下两个参数:

名称 描述
startIndex 新数组中包含第一个元素的索引
endIndex 到此为止,但不包含这个索引

我们指定了起始索引0,以及终止索引2。所以我们得到具有前两个元素的部分数组。

即使你提供给Array.slice方法的结束索引超过了数组的长度,该方法并不会抛出错误。但是会返回所有的数组元素。

const arr = ['a', 'b', 'c'];

const first100 = arr.slice(0, 100);
console.log(first100); // ️ ['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'},
  ];

  // ️ 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'},
  ];

  // ️ 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); // ️ ['d', 'e']

const last2Again = arr.slice(arr.length - 2);
console.log(last2Again); // ️ ['d', 'e']

无论哪种方式,我们告诉slice方法,复制数组的最后两个元素,并将它们放置在一个新数组中。

即使我们尝试获取更多数组包含的元素,Array.slice也不会抛错,相反它会返回一个包含所有元素的新数组。

const arr = ['a', 'b', 'c'];

const last100 = arr.slice(-100);
console.log(last100); // ️ ['a', 'b', 'c']

在这个例子中,我们试图获得一个只包含3个元素的数组的最后100个元素,所以该数组的所有元素都被复制到新的数组中。

张贴在2