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

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

正文

在lodash里的to系列里,将目标数据转换为数字类型的数据的方法,包括了toNumber方法、toFinit方法、toInteger方法,toSafeInteger方法,下面来看看各个方法的使用和实现。

toNumber

toNumber方法主要是将参数value转换为一个数字类型。

使用如下:

toNumber(3.2)
// => 3.2
toNumber(Number.MIN_VALUE)
// => 5e-324
toNumber(Infinity)
// => Infinity
toNumber('3.2')
 // => 3.2

toNumber方法在实现上借助了内部封装的is系列方法,主要是isObject方法和isSymbol方法。

实现上借助typeof,具体处理如下:

对于数据类型直接返回参数。对于symbol类型直接返回NaN。对于对象类型,分两种情况处理。如果参数原型链上存在valueOf方法,直接调用其返回结果供后续处理。如果参数原型链上不存在valueOf方法,直接转换成字符串类型供后续处理。对于非字符串类型的,调用隐式转换。对于其他类型的,会进行正则匹配处理数据格式,reTrim是去除空格,reIsBadHex是去除十六进制,reIsBinary是去除二进制,reIsOctal是去除八进制。对于二进制和八进制的字符串会调用原生的parseInt方法将参数转换为相应的进制数。而对于十六进制则返回NaN,否则调用隐式转换。

源码如下:

import isObject from './isObject.js'
import isSymbol from './isSymbol.js'
const NAN = 0 / 0
const reTrim = /^\s+|\s+$/g
const reIsBadHex = /^[-+]0x[0-9a-f]+$/i
const reIsBinary = /^0b[01]+$/i
const reIsOctal = /^0o[0-7]+$/i
const freeParseInt = parseInt
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)
}

toFinit

toFinit方法主要是将参数value转换为一个有限的数字。

使用如下:

toFinite(3.2)
// => 3.2
toFinite(Number.MIN_VALUE)
// => 5e-324
toFinite(Infinity)
// => 1.7976931348623157e+308
toFinite('3.2')
// => 3.2

toFinit方法实现上借助toNumber方法,具体处理如下:

对于不存在的参数会直接返回参数,0的话返回0。其次调用toNumber方法转换参数,再通过if判断匹配INFINITY值,将其返回对应的MAX_INTEGER。

源码如下:

import toNumber from './toNumber.js'
const INFINITY = 1 / 0
const MAX_INTEGER = 1.7976931348623157e+308
function toFinite(value) {
  if (!value) {
    return value === 0 ? value : 0
  }
  value = toNumber(value)
  if (value === INFINITY || value === -INFINITY) {
    const sign = (value < 0 ? -1 : 1)
    return sign * MAX_INTEGER
  }
  return value === value ? value : 0
}

toInteger

toInteger方法主要是将参数value转换为一个整数。

使用如下:

toInteger(3.2)
// =&gt; 3
toInteger(Number.MIN_VALUE)
// =&gt; 0
toInteger(Infinity)
// =&gt; 1.7976931348623157e+308
toInteger('3.2')
// =&gt; 3

实现上借助toFinite方法,首先调用toInteger方法将参数转换为有限的值,然后通过取模操作获取小数部分,然后取差值。

源码如下:

import toFinite from './toFinite.js'
function toInteger(value) {
  const result = toFinite(value)
  const remainder = result % 1
  return remainder ? result - remainder : result
}
export default toInteger

toSafeInteger

toSafeInteger方法主要是将参数value转换为安全整数,安全整数可以用于比较和准确的表示。

使用如下:

 toSafeInteger(3.2)
 // => 3
 toSafeInteger(Number.MIN_VALUE)
 // => 0
 toSafeInteger(Infinity)
 // => 9007199254740991
 toSafeInteger('3.2')
 // => 3

toSafeInteger方法在实现上主要通过toInteger方法,同样的,对于不存在的参数直接返回参数,而0则返回0。对于小于最小安全数MAX_SAFE_INTEGER则返回MAX_SAFE_INTEGER,值都将限制在[-MAX_SAFE_INTEGER,MAX_SAFE_INTEGER]的区间。

源码如下:

import toInteger from './toInteger.js'
const MAX_SAFE_INTEGER = 9007199254740991
function toSafeInteger(value) {
  if (!value) {
    return value === 0 ? value : 0
  }
  value = toInteger(value)
  if (value < -MAX_SAFE_INTEGER) {
    return -MAX_SAFE_INTEGER
  }
  if (value > MAX_SAFE_INTEGER) {
    return MAX_SAFE_INTEGER
  }
  return value
}
export default toSafeInteger

小结

本篇章我们了解了toNumber、toFinit、toInteger以及toSafeInteger四个方法,在实现上依次借助调用实现。

toNumber方法是其他方法的核心,其他方法是toNumber方法的拓展。toNumber方法的核心是isObject和isSymbol两个判断方法。

更多关于lodash to数据转换数字类型的资料请关注真格学网其它相关文章!

您可能感兴趣的文章:lodash里的toLength和toPairs方法详解lodash中pick和omit函数的用法介绍在VUE中使用lodash的debounce和throttle操作JavaScript工具库之Lodash详解使用JavaScript中的lodash编写双色球效果JavaScript lodash常见用法系列小结

  • 本文相关:
  • 详解微信小程序设置底部导航栏目方法
  • 详解微信小程序radio选中样式切换
  • 解决react中的re-render问题
  • js跨域(access-control-allow-origin)前后端解决方案详解
  • 微信小程序--组件(swiper)详细介绍
  • 前端javascript中的class类
  • 微信小程序 devtool隐藏的秘密
  • 微信小程序 检查接口状态实例详解
  • 微信小程序 template模板详解及实例
  • php:微信小程序 微信支付服务端集成实例详解及源码下载
  • ES6小技巧之代替lodash
  • Lodash 中 assign,extend 和 merge 的区别
  • js 中 Lodash 怎么是数组分页
  • 如何使用lodash解决数组交集的问题
  • javaScript lodash源码中guard是什么意思?
  • 在 Angular中 使用 Lodash 的方法
  • node.js怎么使用lodash
  • nodejs自带lodash吗
  • 如何学习 lodash 那么多函数
  • js怎样用lodash完成在数组中删除重复元素
  • 怎么使用 Lodash /Js 进行按对象字段分组处理
  • angularjs中怎么往对象中追加属性
  • 12个非常实用的JavaScript小技巧【推荐】
  • 分享Javascript实用方法二
  • 在ES6 大行其道的今天,还有必要使用 lodash 之类的库吗
  • 在ES6 大行其道的今天,还有必要使用 lodash 之类的库吗
  • 搞定immutable.js详细说明
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页javascriptlodash里的tolength和topairs方法详解lodash中pick和omit函数的用法介绍在vue中使用lodash的debounce和throttle操作javascript工具库之lodash详解使用javascript中的lodash编写双色球效果javascript lodash常见用法系列小结详解微信小程序设置底部导航栏目方法详解微信小程序radio选中样式切换解决react中的re-render问题js跨域(access-control-allow-origin)前后端解决方案详解微信小程序--组件(swiper)详细介绍前端javascript中的class类微信小程序 devtool隐藏的秘密微信小程序 检查接口状态实例详解微信小程序 template模板详解及实例php:微信小程序 微信支付服务端集成实例详解及源码下载微信小程序 数组(增,删,改,查)等操作实例详解微信小程序 for 循环详解微信小程序 小程序制作及动画(animation样式)详解微信小程序 input输入框控件详解及实例(多种示例)微信小程序 input输入框详解及简单实例微信小程序 传值取值的几种方法总结微信小程序 时间格式化(util.formattime(ne微信小程序中使元素占满整个屏幕高度实现方法微信小程序 wx.request(接口调用方式)详解及实例微信小程序通过api接口将json数据展现到小程序示例微信小程序 支付后台java实现实例js递归遍历查询是否有权限示例详解rollup打包引发对js模块循环引用思考微信小程序(十二)text组件详细介绍前端取消请求及取消重复请求方式iframe跨窗口通信原理详解javascript设计模式之原型模式详细微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码javascript 解构赋值详情微信小程序 tabs选项卡效果的实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved