关于react.js:React技巧之中断map循环

原文链接：https://bobbyhadz.com/blog/react-map-break

作者：Borislav Hadzhiev

注释从这开始~

总览

在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()办法传递以下两个参数：

咱们指定了起始索引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个元素，所以该数组的所有元素都被复制到新的数组中。