JS中这几种数组的操作方法你知道吗？

草帽海贼团001
163 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 11 天，点击查看活动详情

大家好，我是爱吃鱼的桶哥Z，在我们日常的开发中，经常跟我们的数据打交道的就是数组，对象，字符串等等。而后端跟我们进行数据交互，一般都是数组或者对象，而数组中的操作又有很多方法，今天我们就一起来学习一下数组中常用的数据处理方法。

数组扁平化

在数组的操作中，我们经常会遇到一些多层嵌套的数据，如果我们用多次的循环去处理数组中的值，那么操作就会很慢，在前面的文章中讲到过时间复杂度和空间复杂度，如果多次循环一个数组，每循环一次就是O(n)，多次循环就是O(n^n)，操作起来会非常慢，下面我们看一下相关的代码，代码如下：

// 例如我们的数组是这样的
const arr = [
    {
        id: 1,
        children: [
            {
                id: 2,
                children: [
                    {
                        id: 3,
                        children: []
                    },
                    {
                        id: 4,
                        children: []
                    }
                ]
            },
            {
                id: 5,
                children: []
            }
        ] 
    },
    {
        id: 6,
        children: []
    }
];

类似这样的数据，在日常的开发中，我们其实也会遇到，如果要直接操作这个数组，是非常复杂和麻烦的，这时候我们就可以将这个数据打平成一维数组，操作起来就会很方便，下面我们一起看一下怎么将这个数组打平成一维数组，代码如下:

...other code
function flatten(array) {
    return [].concat(...array.map(item => [].concat(item, ...flatten(item.children))));
}

我们通过ES6中提供的解构运算符(...)来对数组进行解构，然后循环这个数组，再用一个空数组合并这个解构出来的数组，最后我们就能得到一个一维的数组，如下如所示:

image.png

通过上图我们可以看到，这个复杂的数据被我们打平成了一维数组，其实操作的方法很简单，通过数组的concat将解构出来的数据递归合并在一起，组成一个新的数组，这样就降低了数据的操作难度，下次在遇到这样的问题，记得可以试试上面的方法。

flat

在数组中也提供了一个flat方法，这个方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。具体的API文档在这里，可以点击进行查看。这个方法只能对数组进行扁平化，如果是数组对象，则还是需要通过递归才能处理。

我们可以看一下flat的基本操作，代码如下：

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat()); // [0, 1, 2, 3, 4];

flat会将嵌套的数组扁平化成为一维数组，这样我们操作会更简单一些。

every

在数组中，我们如果要操作它里面的每个值，一般我们可以使用map或者forEach，当然也可以使用every。every方法能够测试一个数组内的所有元素是否都能通过某个指定函数的测试，它返回一个布尔值。简单来说，如果我们要判断数组中某个值是否大于一个值，我们可以用map来循环这个数组，然后在循环中进行操作，但是有了every后，我们不需要自己去进行map，它内部会帮我们来循环这个数组，然后返回我们需要的操作结果，我们一起来看一下代码，如下：

const isBelowThreshold = (currentValue) => currentValue < 120;

const arr = [100, 30, 80, 50, 200, 300];

console.log(arr.every(isBelowThreshold));  // false

我们判断这个数组中的值是否都小于120，结果返回false，因为这个数组中还包含200和300，所以最终的结果就是false。在日常的开发中，我们经常会用到这个方法，如果你还没用过，那么下次就用起来吧。

最后

我们简单的介绍了数组中的两个方法，这两个方法可以帮我们更简单的操作数据。当然，数组中还有很多好用的方法，我们后续再给大家进行分享，如果你还没有用过上述分析的方法，一定要多多的在实际开发中用起来。

最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家

avatar
文章
阅读
粉丝