鸿蒙NEXT开发浅进阶到精通06：数组处理在实际开发业务场景的主要方法foreach，contact，push，filter，map总结_鸿蒙处理数组方法

写在前面

时间过得很快，一晃从24年鸿蒙千帆起，鸿蒙原生200+APP后的华为第二批市场鸿蒙适配，我转为鸿蒙开发，到现在一年了参与华为云、终端云适配开发项目等，眼看他萌芽起，眼看他筑高楼，从API10到现在的API16，我的两个本安装和卸载再安装新版模拟器已经n次了，其更新之快比网络热瓜丝毫不逊。

哈哈说正事—这个博客主要是在实战中很多后端给我们的数据都是对象包数组或者数组包对象，那拿到数据再处理渲染与交互，其实就是前端移动端的主要工作。在这里如果数组处理的很6，方法用的很熟那你在数据联调阶段阻力就不是很大了。大家看一个我最近工作上遇到的一个需求：

比如最近，我的产品大哥提出一个需求说，购物车内不同店铺的商品不可以同时勾选上进行结算，那这怎么办呢？我收到这个需求后的思路就是，

我们要在 每个checkBox的变化中加上一个判断逻辑，就是使用find找到当前商品所在店铺的ID，

然后再去对整个购物车数组，filter过滤掉这个店铺，得到的是其他店铺的购物车数据数据，

再进行some判断 这个数组内是否有商品已经被选中，如果是的话，则return中断后边的逻辑，并给出提示文字即可**。**

这里举出我所用到的一些方法，如果有缺少或者后面介绍有误的，欢迎大家指出交流。

数组的常用方法-迭代（遍历）类

forEach map filter，他们都可以遍历数据，

forEach可以进行批量处理数组内的值的修改，如对应字段数字的计算，布尔反向等，注意这个方法会改变原数组本身。

const numbers = [1, 2, 3, 4];// forEach：对数组每个元素执行一次提供的函数numbers.forEach((num) => console.log(num)); // 输出1、2、3、4

如果元素是对象，在处理时可加上index，做更细微精确的处理,要注意不要与ForEach混淆，这个属于UI层面的，有兴趣我们再细说这个。

map：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果,注意这个方法不会改变原数组本身

const numbers = [1, 2, 3, 4];// map：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]//上面是return后仅有一行代码逻辑时的简写，详细如下，后面我们大多使用简写const doubled2 = numbers.map((num) => {return num * 2}); // [2, 4, 6, 8]

filter：创建一个新数组，其包含通过所提供函数实现的测试的所有元素，注意这个方法不会改变原数组本身

这个方法在展示有筛选条件时非常好用

const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

聚合类方法-汇总计算

reduce every some

**reduce：**对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值，，acc既是起始值，也是最终返回值值，在外部直接赋值给你的变量即可。

这里注意操作的数组只能是纯数字数组，如果不接收到的数据不是纯数字数组，可以使用map映射出来再进行求和或其他数学运算。比如在计算购物车选中商品的金额总计，等。

const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

**every：**测试一个数组内的所有元素是否都能通过某个指定函数的测试，其实就是判断是否全部符合一个布尔值，这个在判断某个数组中是否全部符合某条件，很好用，也许就是为这个设计的。如某个班成绩是否全部及格。

const allPositive = numbers.every(num => num > 0); // true

**some：**测试数组中是不是至少有1个元素通过了被提供的函数测试，与上面的every相对应，如某班成绩最高分是否超过98等场景。

const hasEven = numbers.some(num => num % 2 === 0); // true

查找类方法–找到特定元素或其下标

这个方法我最近还有用到，就是产品提出一个需求说，购物车内不同店铺的商品不可以同时勾选上进行结算，那这怎么办呢？我收到这个需求后的思路就是，第一步我们要在 每个checkBox的变化中加上一个判断逻辑，就是使用find找到当前商品所在店铺的ID，然后再去对整个购物车数组，filter过滤掉这个店铺，得到的是其他店铺的购物车数据数据，再进行some判断 这个数组内是否有商品已经被选中，如果是的话，则return中断后边的逻辑，并给出提示文字即可**。**

find：返回数组中满足提供的测试函数的第一个元素的值，注意这里返回的是数组里的元素，符合你条件的元素，所以找不到会返回undefined，与下文findindex对比记忆和区分。

const numbers = [1, 2,6,9,8, 3, 4];const numbers1 = [1, 2,6,9,8, 3, 4];const firstEven = numbers.find(num => num % 2 === 0); // 2const firstEven1 = numbers.find(num => num % 5 === 0); // undefined

findIndex：返回数组中满足提供的测试函数的第一个元素的索引，注意这里返回的是数组里的下标索引值，符合你条件的元素，找不到会返回**-1，因为下标索引值是从0开始的。**

const numbers = [1, 2,6,9,8, 3, 4];const firstEven2 = numbers.findIndex(num => num === 0); // -1const firstEven3 = numbers.findIndex(num => num === 6); // 2

操作类方法

这类方法用于对数组进行增删改等操作 concat slice splice push shift unshift pop等，而上文我们提到的map filter不同哦。注意区分。

这里我最常用的是slice，

**slice：**返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝，但他是左开右合的，end对应下标的元素是娶不到的。

const numbers = [1, 2,6,9,8, 3, 4];const subArray = numbers.slice(1, 3); // [2, 6]

**concat：**用于合并两个或多个数组，记住是合并，聚拢到一起，被合并的两个数组的公共元素都会保留。详细看例子

const numbers = [1, 2,6,9,8, 3, 4];const subArray = numbers.slice(1, 3); // const contArray = numbers.concat([1, 3,88]); // [1,2,6,9,8,3,4,1,3,88]

**splice：**通过删除或替换现有元素或者原地添加新的元素来修改数组

const numbers = [1, 2,6,9,8, 3, 4];numbers.splice(1, 2, 10, 11); // 从索引1开始删除2个元素，并插入10和11console.log(\'pkl--\',numbers); // [1,10,11,9,8,3,4]

**push：**将一个或多个元素添加到数组的末尾

**unshift：**将一个或多个元素添加到数组的开头

numbers.push(5); // numbers.unshift(0)

**pop：**从数组中删除最后一个元素，并返回该元素的值

**shift：**从数组中删除第一个元素，并返回该元素的值

// pop：从数组中删除最后一个元素，并返回该元素的值const last = numbers.pop(); // 5// shift：从数组中删除第一个元素，并返回该元素的值const first = numbers.shift(); // 1

排序与反转方法

这类方法用于对数组元素的顺序进行调整。

**sort：**对数组的元素进行排序 注意：sort会修改原数组

// sort：对数组的元素进行排序const letters = [\'b\', \'c\', \'a\'];letters.sort(); // [\'a\', \'b\', \'c\']// 注意：sort会修改原数组，且默认是按字符串比较numbers.sort((a, b) => a - b); // [0, 4, 10, 11]

**reverse：**颠倒数组中元素的顺序

numbers.reverse();

转换类方法

**join：**将一个数组（或一个类数组对象）的所有元素连接成一个字符串

split：是字符串方法，可将字符串转换为数组

const numbers = [11, 10,4,0];const str = numbers.join(\'-\'); // \"11-10-4-0\"const parts = str.split(\'-\'); // [\'11\', \'10\', \'4\', \'0\']

写在后面

总结一下，这里我们列举了很多数组相关否相关处理方法，也举出了购物车方面的一个真实需求的解决思路。在数据处理方面你还有什么好的处理方法吗？欢迎交流