lodash里的toLength和toPairs方法详解

目录
  • 正文
  • toLength
  • toPairs
    • createToPairs
      • baseToParis
      • arrayMap
      • mapToArray
      • setToPairs
  • 小结

正文

本篇章我们将认识lodash里的toLength方法和toPairs方法实现,同时在实现toPairs方法的过程中也能了解到其他封装的内部方法的实现。

toLength

toLength方法主要是将参数value转换为用作类数组对象的长度整数。

使用如下:

toLength(3.2)
// => 3
toLength(Number.MIN_VALUE)
// => 0
toLength(Infinity)
// => 4294967295
toLength('3.2')
// => 3

在实现上,toLength方法借助内部封装导出的toInteger方法,在 《 lodash里to系列之如何将数据转换成数字类型 》中,我们已经了解了toInteger方法,意在将参数转换为整数。

实现上对于不存在的参数直接返回0,其次将参数转换为整数,小于0的返回0,大于最大数MAX_ARRAY_LENGTH返回最大数,该方法返回的整数范围为[0,4294967295]。

源码如下:

import toInteger from './toInteger.js'
const MAX_ARRAY_LENGTH = 4294967295
function toLength(value) {
  if (!value) {
    return 0
  }
  value = toInteger(value)
  if (value < 0) {
    return 0
  }
  if (value > MAX_ARRAY_LENGTH) {
    return MAX_ARRAY_LENGTH
  }
  return value
}

toPairs

toPairs方法主要是创建一个object对象自身可枚举属性的键值对数组。这个数组可以通过_.fromPairs撤回。如果object 是 map 或 set,将会返回其条目。

使用如下:

function Foo() {
 this.a = 1;
 this.b = 2;
}
Foo.prototype.c = 3;
_.toPairs(new Foo);
// =&gt; [['a', 1], ['b', 2]]

toPairs方法在实现上借助内部封装的createToPairs工厂函数和keys方法实现,其中keys是对外导出的方法。

源码如下:

import createToPairs from './_createToPairs.js';
import keys from './keys.js';
var toPairs = createToPairs(keys);

createToPairs

createToPairs方法是内部方法,充当对象pairs过程的工厂函数,实现上,先通过getTag获取对象的数据类型标签,对于Map对象返回mapToArray调用结果,对于Set对象返回setToPairs调用结果,其他对象类型直接返回baseToPairs调用结果。

import baseToPairs from './_baseToPairs.js';
import getTag from './_getTag.js';
import mapToArray from './_mapToArray.js';
import setToPairs from './_setToPairs.js';
var mapTag = '[object Map]',
    setTag = '[object Set]';
function createToPairs(keysFunc) {
  return function(object) {
    var tag = getTag(object);
    if (tag == mapTag) {
      return mapToArray(object);
    }
    if (tag == setTag) {
      return setToPairs(object);
    }
    return baseToPairs(object, keysFunc(object));
  };
}

baseToParis

baseToParis作为内部方法,主要处理普通对象的pairs过程,通过arrayMap方法处理参数。

import arrayMap from './_arrayMap.js';
function baseToPairs(object, props) {
  return arrayMap(props, function(key) {
    return [key, object[key]];
  });
}

arrayMap

arrayMap作为内部方法,主要处理数组的映射。

function arrayMap(array, iteratee) {
  var index = -1,
      length = array == null ? 0 : array.length,
      result = Array(length);
  while (++index < length) {
    result[index] = iteratee(array[index], index, array);
  }
  return result;
}

mapToArray

mapToArray作为内部方法,主要处理Map对象转换数组,实现上通过遍历获取。

function mapToArray(map) {
  var index = -1,
      result = Array(map.size);
  map.forEach(function(value, key) {
    result[++index] = [key, value];
  });
  return result;
}

setToPairs

setToPairs作为内部方法,主要处理Set对象转换数组,实现上通过遍历获取。

function setToPairs(set) {
  var index = -1,
      result = Array(set.size);
  set.forEach(function(value) {
    result[++index] = [value, value];
  });
  return result;
}

小结

本篇章我们通过了解toLength方法和toPairs方法的实现,同时也认识了如处理map和set向数组的转化,以及普通对象转换数组的baseToPairs方法,更多关于lodash方法toLength toPairs的资料请关注我们其它相关文章!

(0)

相关推荐

  • 在VUE中使用lodash的debounce和throttle操作

    说明: debounce和throttle在脚手架的使用,此处以防抖函数debounce为例避免按钮被重复点击 引入: import lodash from 'lodash' 使用: 直接使用debounce方法 // 审核 audit: lodash.debounce(function() { this.$refs['model'].saveTotalResult(1).then(() => { const reportId = this.activeReport.id; report.aud

  • lodash里to系列之将数据转换成数字类型实现示例

    目录 正文 toNumber toFinit toInteger toSafeInteger 小结 正文 在lodash里的to系列里,将目标数据转换为数字类型的数据的方法,包括了toNumber方法.toFinit方法.toInteger方法,toSafeInteger方法,下面来看看各个方法的使用和实现. toNumber toNumber方法主要是将参数value转换为一个数字类型. 使用如下: toNumber(3.2) // => 3.2 toNumber(Number.MIN_VAL

  • 使用JavaScript中的lodash编写双色球效果

    具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • JavaScript工具库之Lodash详解

    前言 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗?一堆看似简单的foreach,却冗长无趣,可仍还在不停的repeat it!也许你已经用上了Underscore.js,不错,你已经进步很大一步了.然而今天我希望你能更进一步,利用lodash替换掉Underscore. lodash一开始是Underscore.js库的一个fork,因为和其他(Underscore.js的)贡献者意见相左.John-David Dalton的最初目标,是提供更多"一致的跨浏览器行为--,并改善

  • lodash中pick和omit函数的用法介绍

    _.pick(object, [props]) 参数 object (Object): 来源对象. [props] (...(string|string[])): 要被忽略的属性.(注:单独指定或指定在数组中.) 返回 (Object): 返回新对象. 例子 var object = { 'a': 1, 'b': '2', 'c': 3 }; _.pick(object, ['a', 'c']); // => { 'a': 1, 'c': 3 } _.pickBy(object, [predic

  • JavaScript lodash常见用法系列小结

    lodash一开始是Underscore.js库的一个fork,因为和其他(Underscore.js的)贡献者意见相左.John-David Dalton的最初目标,是提供更多"一致的跨浏览器行为--,并改善性能".之后,该项目在现有成功的基础之上取得了更大的成果,并于一月份发布了3.0版本. 下面给大家说下javascript lodash知识,具体详情如下所示: 1 _.compact用法 _.compact([0, 1, false, 2, '', 3,'mm']); var

  • lodash里的toLength和toPairs方法详解

    目录 正文 toLength toPairs createToPairs baseToParis arrayMap mapToArray setToPairs 小结 正文 本篇章我们将认识lodash里的toLength方法和toPairs方法实现,同时在实现toPairs方法的过程中也能了解到其他封装的内部方法的实现. toLength toLength方法主要是将参数value转换为用作类数组对象的长度整数. 使用如下: toLength(3.2) // => 3 toLength(Numb

  • 对python列表里的字典元素去重方法详解

    如下所示: def list_dict_duplicate_removal(): data_list = [{"a": "123", "b": "321"}, {"a": "123", "b": "321"}, {"b": "321", "a": "123"}] run

  • 微信小程序里使用SVG矢量图标方法详解

    在微信小程序开发过程中需要在小程序里使用SVG矢量图标,至于为什么要使用SVG图标相信看到这篇文章的你应该明白,如果你不明白请百度一下 微信小程序里使用SVG矢量图标有2种引入方法: 一.SVG图标转换为BASE64编码 使用 http://tools.jb51.net/transcoding/img2base64 工具把需要引入的SVG图标转换成BASE64编码 注意:生成BASE64编码时需要把开头的 data:image/svg; 修改成 data:image/svg+xml; 这个在线工

  • BootStrap扔进Django里的方法详解

    因为django的版本差异化比较大,所以以下配置仅供学习参考. D:\www\mysite>python --version Python 2.7.5 >>> print django.__version__ 1.9.4 本记录不作细说,主要配置过程如下: 1.settings.py最后一段,关于静态文件的配置 # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.9/howto

  • 在js里怎么实现Xcode里的callFuncN方法(详解)

    本人使用的WebStorm编辑器,里面没有callFuncN, 不记得Lua是否支持callFuncN,如果不支持相信应该能用同样的方法做到. 废话不多说,贴代码: loadDown : function () { var dis = this.left_move.getPositionY() - this.left.getPositionY(); // 得到一个距离 var act1 = new cc.moveBy(0.5,cc.p(0,-dis)); var act2 = cc.callFu

  • golang实现php里的serialize()和unserialize()序列和反序列方法详解

    Golang 实现 PHP里的 serialize() . unserialize() 安装 go get -u github.com/techleeone/gophp/serialize 用法 package main import ( "fmt" "github.com/techleeone/gophp/serialize" ) func main() { str := `a:1:{s:3:"php";s:24:"世界上最好的语言&

  • JS实现数组随机排序的三种方法详解

    目录 1.利用数组方法sort实现随机排序 2.洗牌算法实现随机排序 3.洗牌算法深入分析 全部代码 1.利用数组方法sort实现随机排序 实现随机排序方法还是很多的,用for循环是可以写的,用Lodash等三方js方法库也行.但个人以为使用sort比较方便,但是他又缺点,缺点就是不够那么的随机,我看过sort运行机制后,发现他竟然是利用一个比较器两两比较出来的. var arr = [1, 2, 3, 4, 5] arr.sort(function () { return Math.rando

  • Mongodb中MapReduce实现数据聚合方法详解

    Mongodb是针对大数据量环境下诞生的用于保存大数据量的非关系型数据库,针对大量的数据,如何进行统计操作至关重要,那么如何从Mongodb中统计一些数据呢? 在Mongodb中,给我们提供了三种用于数据聚合的方式: (1)简单的用户聚合函数: (2)使用aggregate进行统计: (3)使用mapReduce进行统计: 今天我们首先来讲讲mapReduce是如何统计,在后续的文章中,将另起文章进行相关说明. MapReduce是啥呢?以我的理解,其实就是对集合中的各个满足条件的文档进行预处理

  • Angular中的$watch方法详解

    在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法. (1)$watch简介 在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发. AngularJS内部的watch实现了页面随model的及时更新. $watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件. (2)watch方法用法 $watch(watchFn,watch

  • D3.js实现折线图的方法详解

    前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

随机推荐