JavaScript数组方法的应用

前言：今天突然想起两年没更新的博客，心血来潮更一篇！

那就来一起看一道关于js数组的题目

补全函数 getMaxArrays 中的代码，最终实现根据不同的传参情况，返回预期数组的需求。具体需求如下：

（1）传入的参数列表中，所有参数皆为数组的情况下：

1.若长度最大的数组有一到多个，则最终返回这些数组的集合（即二维数组）。

例如：

1
2
3
4
5
6
7
var a1 = [12, 2];
var a3 = [32, 2, 3];
var a3 = [24, 56, 12];
var newArr = getMaxArrays(a1, a2, a3);
console.log(newArr);// => [[32, 2, 3],[24, 56, 12]]
var newArr = getMaxArrays(a3);
console.log(newArr); // => [[24, 56, 12]]

2.若所有数组长度相同，则返回空数组（即: []）。

例如：

1
2
3
4
var a2 = [34, 2, 3];
var a3 = [23, 12, 3];
var newA = getMaxArrays(a2, a3);
console.log(newA); // => [];

(2) 其他情况则返回空数组（即：[]）

题目要求就是以上这些了（理解透彻题目要求很关键）

分析所要完成的函数：

  1. 根据题目要求第一步先判断传入的参数是否每一个都是数组

    • 判断一个里的所有元素是否都为数组类型用什么判断？下面列出两种方法来判断参数是否为数组类型

      1
      2
      3
      4
      let arr = [1, 2, 3];
      Array.isArray(arr) // true ES6方法

      arr instanceof Array // true

    • 如何遍历每个元素？这里是要判断那么肯定想到用数组的every()方法

      1
      2
      3

      arrays.every(item => Array.isArray(item)) // 返回值为布尔值

  2. 对传入的数组集合迭代找出其中最长的数组并记录最大值

    • 数组迭代方法那当然是用reduce()了，非常丝滑，用在这里是不二之选

      1
      2
      let max = arrays.reduce((a,b) => a.length>b.length?a:b,[]) //这里用箭头函数和逗号操作符简化了代码
      let maxlength = max.length;

  3. 最后一步过滤掉数组长度小于集合内数组最大长度的数组，产生一个新数组

    • 没啥好说的过滤直接用filter()

      1
      let newArr = arrays.filter(e => e.length === maxlength) //newArr直接得到的是过滤后的数组集合

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const getMaxArrays = (...arrays) => {
    if(arrays.every(item => Array.isArray(item))){
        let maxlength;
        let max = arrays.reduce((a,b) => a.length>b.length?a:b,[])
        maxlength = max.length;
        let newArr = arrays.filter(e => e.length === maxlength)
        if (arrays.every(e => e.length === maxlength)) {
            return []
        }else{
            return newArr
        }
    }else{
        return []
    }
};

搞定

这里用到很多原生js的数组方法，之后有时间会发一篇专门重构底层js数组方法的文章。

对了！对于不传参数时，打印函数的 arguments 会返回一个相当于是数组的东西，所以上面判断是否为数组时，当参数为空时判断值为true，并且返回的就是一个空数组([])。对于这个不知道是不是坑，反正符合题目要求，感兴趣的可以去研究研究。好了，today is here。下次 see