lodash之chunk源码解析

1:作用

对一个数组进行指定length的分隔

const arr = [1,2,3,4,5];
_.chunk(arr,2); //[[1,2],[3,4],[5]];

2:源码分析

//array 需要操作的数组  分节长度为number
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)); // 用length/size 在调用Math.ceil函数获取分隔的数组
    
  while (index < length) {
    // baseSlice  函数在操作数组中会经常看到,我们需要看一下他的源码

    result[resIndex++] = baseSlice(array, index, (index += size));
  }
  return result;
}

baseSlice 函数源码

//array:要操作的数组 start 截取的开始位置, end: 截取的结束位置
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;
  }
    //细节: >>> 位运算符 无视符号(+,-) 主要数把任何的值转为数字 'a'>>> = 0 在一个就是把负数转为正值
  length = start > end ? 0 : ((end - start) >>> 0);
  start >>>= 0;
   
  //创建一个数组,进行浅克隆的操作
  var result = Array(length);
  while (++index < length) {
    result[index] = array[index + start];
  }
  return result;
}

3: 总结

1. chunk 函数本质上使用的是浅克隆操作,在实际开发中需要注意这点
2. >>> 运算符的实际使用,在上述代码中他的作用 : 把其他类型转换number,缺省值为0; 把负数转为正值; 代码的健壮性