美文网首页
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