lodash里的toLength和toPairs方法详解_JavaScript

来源:脚本之家  责任编辑:小易  
目录
正文toLengthtoPairscreateToPairsbaseToParisarrayMapmapToArraysetToPairs小结

正文

本篇章我们将认识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的资料请关注真格学网其它相关文章!

您可能感兴趣的文章:lodash中pick和omit函数的用法介绍在VUE中使用lodash的debounce和throttle操作JavaScript工具库之Lodash详解使用JavaScript中的lodash编写双色球效果JavaScript lodash常见用法系列小结lodash里to系列之将数据转换成数字类型实现示例

  • 本文相关:
  • 微信小程序页面开发注意事项整理
  • 两表格传递变量
  • js代码的格式化和压缩
  • 微信小程序server端环境配置详解(ssl, nginx https,tls 1.2 升级)
  • javascript小技巧带你提升你的代码技能
  • 使用compose函数优化代码提高可读性及扩展性
  • 微信小程序 122100版本更新问题解决方案
  • 微信小程序 实现tabs选项卡效果实例代码
  • 微信小程序(十三)progress组件详细介绍
  • 微信小程序之选项卡的实现方法
  • 如何使用lodash解决数组交集的问题
  • JavaScript lodash常见用法系列小结
  • javaScript lodash源码中guard是什么意思?
  • js 中 Lodash 怎么是数组分页
  • node.js怎么使用lodash
  • nodejs自带lodash吗
  • 在 Angular中 使用 Lodash 的方法
  • 如何学习 lodash 那么多函数
  • js怎样用lodash完成在数组中删除重复元素
  • 怎么使用 Lodash /Js 进行按对象字段分组处理
  • 如何封装Node.js和前端通用的模块
  • 12个非常实用的JavaScript小技巧【推荐】
  • 生成react框架为什么会带一个git的文件
  • 检测一个函数是否是JavaScript原生函数的小技巧
  • 对wordpres将核心功能从PHP迁移到NodeJS有什么看法
  • angularjs中怎么往对象中追加属性
  • 搞定immutable.js详细说明
  • 详解webpack loader和plugin编写
  • 如何在 Vue.js 中使用第三方库
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页javascriptlodash里to系列之如何将数据转换成数字类型lodash中pick和omit函数的用法介绍在vue中使用lodash的debounce和throttle操作javascript工具库之lodash详解使用javascript中的lodash编写双色球效果javascript lodash常见用法系列小结lodash里to系列之将数据转换成数字类型实现示例微信小程序页面开发注意事项整理两表格传递变量js代码的格式化和压缩微信小程序server端环境配置详解(ssl, nginx https,tls 1.2 升级)javascript小技巧带你提升你的代码技能使用compose函数优化代码提高可读性及扩展性微信小程序 122100版本更新问题解决方案微信小程序 实现tabs选项卡效果实例代码微信小程序(十三)progress组件详细介绍微信小程序之选项卡的实现方法微信小程序 数组(增,删,改,查)等操作实例详解微信小程序 for 循环详解微信小程序 小程序制作及动画(animation样式)详解微信小程序 input输入框控件详解及实例(多种示例)微信小程序 input输入框详解及简单实例微信小程序 传值取值的几种方法总结微信小程序 时间格式化(util.formattime(ne微信小程序中使元素占满整个屏幕高度实现方法微信小程序 wx.request(接口调用方式)详解及实例微信小程序通过api接口将json数据展现到小程序示例详解微信小程序page中data数据操作和函数调用微信小程序 wx.request方法的异步封装实例详解微信小程序 textarea 详解及简单使用方法业务层hooks封装usesessionstorage实例详解typescript?学习笔记之?typescript类定义,类的继承,一个很简单的办法实现td的加亮效果.微信小程序 详解page中data数据操作和函数调用javascript number 与 math对象的介绍js实现保存文本框内容为本地文件兼容ie,chrome,火狐浏览器微信小程序上滑加载下拉刷新(onscrolllower)分批加载数据(二)
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved