react 中数组的常用高级方法及基本用法带案例（forEach(), filter(), some(), map(), every(), find(), includes(), split()）

在React中，数组的高级方法如forEach(), filter(), some(), map(), every(), find(), includes(), 和 split()等都是非常有用的工具。这些方法不仅简化了代码，还提高了代码的可读性和效率。下面将逐一介绍这些方法及其基本用法，并附上案例：

1. forEach()

   • 用途：用于遍历数组的每一个元素，并对每个元素执行一次提供的函数[¹]。
   • 基本用法：

     const array1 = ['a', 'b', 'c'];
     array1.forEach(element => console.log(element));
     // 输出: a b c
     

2. filter()

   • 用途：过滤出满足条件的对象，并生成新的数组[¹]。
   • 基本用法：

     const dataSource = [{ id: '00011', name: '燃气具1' }, { id: '00012', name: '净水器1' }];
     const newData = dataSource.filter(v => v.id !== '00011');
     console.log(newData); // 输出: [{ id: '00012', name: '净水器1' }]
     

3. some()

   • 用途：测试数组中的某些元素是否至少有一个满足提供的函数条件。一旦找到符合条件的元素，循环就会停止，并返回true[¹]。
   • 基本用法：

     const qtyFlag = dataSource.some(x => x.sinQty + x.sinQtyEd <= x.qty);
     if (!qtyFlag) {
       message.warn('数量不正确');
     }
     

4. map()

   • 用途：每一个元素调用一个回调函数后，返回一个新数组[¹]。
   • 基本用法：

     levelList.map((x) => (<Checkbox value={x.id} key={x.id} style={{ marginLeft: 0 }}> {x.name}</Checkbox>));
     

5. every()

   • 用途：测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值[¹]。
   • 基本用法：

     const isFlag = (currentValue) => currentValue < 40;
     const array1 = [1, 30, 39, 29, 10, 13];
     console.log(array1.every(isFlag)); // 输出: true
     

6. find()

   • 用途：找到满足条件的数据[¹]。
   • 基本用法：

     const findItem = cancelReasonList.find(_ => _.code === cancelReason);
     

7. includes()

   • 用途：判断是否包含某值[¹]。
   • 基本用法：

     option?.value.includes(val || option?.children.includes(val))
     

8. split()

   • 用途：用于把一个字符串分割成字符串数组[¹]。
   • 基本用法：

     reasonCodeList.filter(_ => _.es1?.split(',')?.includes('SO'))
     

总的来说，以上是React中数组的一些常用高级方法及基本用法的案例。掌握这些方法可以极大地提高开发效率，使代码更加简洁和易于维护。