美文网首页
lodash源码解析

lodash源码解析

作者: Chaos_YM | 来源:发表于2019-11-20 12:07 被阅读0次
前言:

虽然现在前端生态越来越丰富,三大框架鼎足而立,但是,原生的JS编码能力还是很重要的,所以决定学一下lodash的源码。

方式:

简单粗暴一点,按照字母顺序a-z,先对照API,挑选,自己手写,然后看源码,取长补短。
如果有特别好的点,会在下面记录我的实现和源码的对比。
差异不大或者没有难度的API,会简单描述带过。
欢迎留言沟通,持续更新中~

一,Array

  • _.chunk:

差异:源码多了对两个参数的校验
收获:编写函数一定要校验参数,减少错误。(TS是不是就好在这里了?)

// 我的实现
function chunk (arr, number) {
    var b = [];
     for (var i=0;i < Math.ceil(arr.length/number);i++) {
        b.push(arr.slice(i*number, (i+1)*number));
    }
    return b;
}
// 源码
function chunk(array, size = 1) {
  size = Math.max(toInteger(size), 0)
  const length = array == null ? 0 : array.length
  if (!length || size < 1) {
    return []
  }
  let index = 0
  let resIndex = 0
  const result = new Array(Math.ceil(length / size))

  while (index < length) {
    result[resIndex++] = slice(array, index, (index += size))
  }
  return result
}
  • _.compact: 用filter很简单就可以实现,源码没什么特殊;相比filter,兼容性更强。(filter只支持IE9以上)
  • _.difference: 我是以filter和include实现过滤,用object.prototype.toString校验参数是否是数组,相比lodash,他的兼容性更好,更复杂,是和differenceBy,differenceWith写在一起的。
// 我的实现
var arr1 = [1,2,3], arr2 = [4,2];
function diff (arr1, arr2) {
    if (Object.prototype.toString.call(arr1) !== '[object Array]') {
        return [];
    }
    return arr1.filter(item => !arr2.includes(item));
}
var brr = diff(arr1, arr2);
  • _.drop dropRight dropRightWhile dropWhile: 相当于手写了array.slice,亮点还是在于参数处理和位运算 >>> 的运用。

位运算:转自掘金

  • toInteger & toNumber:
    收获是优先运算符(),和转换整数 n%1
function toInteger(value) {
  const result = toFinite(value)
  const remainder = result % 1

  return remainder ? result - remainder : result
}

export default toInteger

function toNumber(value) {
  if (typeof value === 'number') {
    return value
  }
  if (isSymbol(value)) {
    return NAN
  }
  if (isObject(value)) {
    const other = typeof value.valueOf === 'function' ? value.valueOf() : value
    value = isObject(other) ? `${other}` : other
  }
  if (typeof value !== 'string') {
    return value === 0 ? value : +value
  }
  value = value.replace(reTrim, '')
  const isBinary = reIsBinary.test(value)
  return (isBinary || reIsOctal.test(value))
    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
    : (reIsBadHex.test(value) ? NAN : +value)
}

export default toNumber

相关文章

网友评论

      本文标题:lodash源码解析

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