美文网首页程序员
lodash-array-chunk函数实现

lodash-array-chunk函数实现

作者: 心尘_ee7a | 来源:发表于2018-03-15 13:49 被阅读0次

    简介

    lodas包作为npm应用量最多的一个package,本人很好奇它有什么魅力,自己抽空用自己的逻辑写它的方法,并与它对比一下,收货蛮多的。

    今天讲的是chunk函数。

    将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。

    我的实现是

    
    function chunk(array,size=1){
    
        if(!array||!Array.isArray(array)||array.length<=0){
    
            return [];
    
        }else{
    
            var result=[];
    
            var i=0;
    
            while(true){
    
                result.push(array.slice(i,size+i));
    
                i+=size;
    
                if(i>=array.length){
    
                    break;
    
                }
    
            }
    
            return result;
    
        }
    
    }
    
    

    lodash的实现是:

    
    function chunk(array, size, guard) {
    
      if ((guard ? isIterateeCall(array, size, guard) : size === undefined)) {
    
        size = 1;
    
      } else {
    
        size = nativeMax(toInteger(size), 0);
    
      }
    
      var length = array == null ? 0 : array.length;
    
      if (!length || size < 1) {
    
        return [];
    
      }
    
      var index = 0,
    
          resIndex = 0,
    
          result = Array(nativeCeil(length / size));
    
      while (index < length) {
    
        result[resIndex++] = baseSlice(array, index, (index += size));
    
      }
    
      return result;
    
    }
    
    

    分析

    大体思路差不多,只不过我用了es6语法的默认参数,size默认为1

    而lodash多传一个guard参数,中文翻译为守卫的意思,具体是什么含义呢?

    如果不传guard,那就做 size===undefined 这个判断,如果size没传,size=1,如果传了size,那就把size转成整型,与0比较取最大值。

    如果传了guard呢,那就会调用isIterateeCall(array, size, guard),这个方法是干嘛的?

    
    function isIterateeCall(value, index, object) {
    
      //object不是对象就返回false
    
      if (!isObject(object)) {
    
        return false;
    
      }
    
      var type = typeof index;
    
    
    
      if (type == 'number'
    
            ? (isArrayLike(object) && isIndex(index, object.length))
    
            : (type == 'string' && index in object)
    
          ) {
    
        //index如果是数字的话,object是类数组对象并且index小于object的长度, 就返回eq(object[index], value)。如果index是字符串的话,index是object的属性,也返回eq(object[index], value)。
    
        return eq(object[index], value);
    
      }
    
      //其他情况一律返回false
    
      return false;
    
    }
    
    

    这个函数官方注释是Checks if the given arguments are from an iteratee call.,也就说检查给的参数是否是来自一个迭代调用。

    这就有意思了,验证下array是否是guard的一个成员变量。只有当guard[size]===array才把size=1,否则那就把size转成整型,与0比较取最大值。

    后面的逻辑呢,都是首先验证下array,是否是空呀,长度是否为0呀,不合法的一律返回[];接着就是循环的调用slice函数,我用的是原生的方法,而lodash是自己写的slice方法:

    
    function baseSlice(array, start, end) {
    
      var index = -1,
    
          length = array.length;
    
      if (start < 0) {
    
        start = -start > length ? 0 : (length + start);
    
      }
    
      end = end > length ? length : end;
    
      if (end < 0) {
    
        end += length;
    
      }
    
      length = start > end ? 0 : ((end - start) >>> 0);
    
      start >>>= 0;
    
      var result = Array(length);
    
      while (++index < length) {
    
        result[index] = array[index + start];
    
      }
    
      return result;
    
    }
    
    

    可以看出,lodash的哲学是一切都自己实现。

    相关文章

      网友评论

        本文标题:lodash-array-chunk函数实现

        本文链接:https://www.haomeiwen.com/subject/gkkhqftx.html