Number数据类型

Number类型使用IEEE754格式来表示整数和浮点值,这也是0.2 + 0.3不等于0.5的原因,

最基本的数值类型字面量格式是十进制整数

var a = 10;

1. 浮点数值

整理中。。。

2. NaN

Not a Number:不是一个数,但它属于数值类型

NaN的特点

  • NaN和任何值进行操作都会返回NaN
  • NaN与任何值都不相等,包括NaN本身
console.log(NaN == NaN)

3. isNaN函数

用于检测一个变量不是数值(Number)类型。isNaN()接收一个参数,这个参数可以是任何类型。这个函数会尝试把传入的参数转换为数值,某些不是数值的值会直接转换成数值,例如字符串"10"Boolean值,不能转换为数值的值返回true,能转换的返回false

console.log( isNaN(NaN ) // true
console.log( isNaN(10 ) // false
console.log( isNaN('10') // false
console.log( isNaN('blue') // true
console.log(isNaN( true )) // false (true会被转换成1)

总结:

  • isNaN意思是:是不是非数值,是的话返回true,所有能被该函数转换能Number类型的值,都返回false
  • 在使用isNaN进行检测的时候,首先会验证检测的值是否为数字类型,如果不是,先基于Number()这个方法,把值转换成数字类型,然后再检测。
  • 空字符串、空数组、布尔值、null会转成数值,所以isNaN函数返回false
  • 空对象、函数、undefined不能转换成数值,返回true

4. 数值转换

把非数值值转换为数值:

  • Number()
  • parseInt() 取整
  • parseFloat() 浮点数

`Number()转换规则

  • 如果是布尔值,truefalse会被转换为10
Number(true) // 1
Number(false) // 0
  • 如果是数字,只是简单的传入和返回。
Number(1) // 1
Number(100) // 100
  • 如果是null值,返回0
Number(null) // 0

  • 如果是undefined,返回NaN
Number(undefined) // NaN

  • 如果是字符串:

    • 字符串中只包含数字(包括前面带正/负号的情况),则将其转换为十进制数值,数字前面有0的会被忽略(不管前面有几个0,全部忽略),例如"010"会转换成10
    • 字符串中包含有效的浮点格式,如"1.1",则将其转换为对应的浮点数值。
    • 字符串中包含有效的十六进制格式(一般用数字09和字母AF(或a~f)表示,其中:A~F表示10~15,这些称作十六进制数字),如"0xf",将其转换成相同大小的十进制整数值。
    • 字符串为空,转换成0
    • 字符串中包含除了以上格式之外的字符,则转换为NaN,如字符串中既有数字又有字母的情况。

// 规则一
Number("1") // 1
Number("123") // 123
Number("010") // 10 (前导的0会被忽略)
Number("-10") // -10 // 规则2
Number("1.1") // 1.1
Number("0.1") // 0.1
Number("0000.1") // 0.1 (前导的0会被忽略) // 规则3
Number(0xf) // 15 // 规则4
Number("") // 0
Number(" ") // 0
Number('') // 0 // 规则5
Number("Hello Wolrd") // NaN
Number("0ff6600") // NaN
Number("ff6600") // NaN
Number("0.1a") // NaN
Number("10a") // NaN
Number("a10.1") // NaN var goodsList = {
'pop':
} var arr = [1,2,3,4]
Number(arr)
  • 如果对象,调用对象的valueOf(),空数组返回0,空对象返回NaN。

parseInt(string,radix)

将一个字符串转换成x进制的整数。

传入的第一个参数为字符串,如果参数不是字符串,则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。

第二个参数为整数,表示按照xx进制转换,如传入参数10表示按十进制规则转换,

从左到右依次查找有效数字字符,直到遇到非有效数字字符,停止查找(不管后面是否好友数字),把找到的当做数字返回。

如果字符串中以0x开头且后跟数字字符,就会将其当做一个十六进制整数。

如果字符串以"0"开头且后跟数字字符,则会被当做一个八进制数来解析。

如果不传第二个参数,会按照八进制解析。在大多数情况下,我们要解析的都是十进制数值,因此始终将10作为第二个参数是非常必要的。

parseInt("123abc") // 123
parseInt("") // NaN
parseInt("12.5px") // 12
parseInt("0xA") // 10 (16进制)
parseInt("0xf") // 15 (16进制)
parseInt("070") // 70
parseInt("70") // 70

parseFloat(string)

解析一个参数(必要时先转换为字符串)并返回一个浮点数。默认解析十进制值。

function circumference(r) {
return parseFloat(r) * 2.0 * Math.PI;
} console.log(circumference(4.567));
// expected output: 28.695307297889173 console.log(circumference('4.567abcdefgh'));
// expected output: 28.695307297889173
  • 从左到右依次解析字符,一直解析到字符串末尾,遇到非数字字符会或遇到第二个浮点数(在这之前的字符串都会被解析)会使解析停止,如"3.14"解析成3.14"3.14.1234"解析成3.14

  • 忽略参数首尾空白符


parseFloat("3.14") // 3.14
parseFloat("-3.14") //-3.14
parseFloat("+3.14") //3.14
parseFloat("0003.14") // 3.14
parseFloat(" 3.14 ") // 3.14
parseFloat("3.14abc") // 3.14
parseFloat("3.14.5678") // 3.14
parseFloat("abc3.14") // NaN
parseFloat("abc123") // NaN
parseFloat("123abc") // 123

总结:

为什么NumberparseInt/parseFloat计算结果不一样呢?

  • Number转换规则是浏览器底层渲染规则,是浏览器的一个非常重要的方法,parseInt/parseFloat是一个单独方法的规则,就是用来处理字符串的。

  • Number走的是最底层的机制,遇到其他类型,底层机制会告诉我们哪个类型跟哪个类型应该怎么转换,这是底层机制已经规定好的,比如遇到布尔值,true转为1false转为0

    parseIntparseFloat是额外提供的方法,就是浏览器提供的方法,它们的源码处理机制很简单,会先把传入的参数转换为字符串,然后在从左到右查找数字有效字符。

JS中的Number数据类型详解的更多相关文章

  1. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  2. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  3. js中中括号,大括号使用详解

    js中中括号,大括号使用详解 一.总结 一句话总结:{ } 是一个对象,[ ] 是一个数组 1.js大括号{}表示什么意思? 对象 { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或 ...

  4. JS中的this对象详解

    JS中this关键字很常见,但是它似乎变幻莫测,让人抓狂.这篇文章就来揭示其中的奥秘. 借助阮一峰老师的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.这句话看似平常,可是要非常注意 ...

  5. JS中的this用法详解

    随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...

  6. js 中中括号,大括号使用详解

    一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen",&quo ...

  7. Vue.js中学习使用Vuex详解

    在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一 ...

  8. Js中的For循环详解

    大家好,我是逆战班的一员,今天给大家讲解一下Js循环中的For循环. For循环是JS循环中一个非常重要的部分. 我们先讲一下for循环的作用: For循环用在需要重复执行的某些代码,比如从1打印到1 ...

  9. JS中常见排序算法详解

    本文将详细介绍在JavaScript中算法的用法,配合动图生动形象的让你以最快的方法学习算法的原理以及在需求场景中的用途. 有句话怎么说来着: 雷锋推倒雷峰塔,Java implements Java ...

随机推荐

  1. 使用国外 DNS 造成国内网站访问慢的解决方法

    本文原载于 wzyboy's blog,转载请注明本文地址: https://wzyboy.im/post/874.html ,谢谢合作. 为什么要用国外 DNS 由于众所周知的问题,国内 DNS 服 ...

  2. PCB项目 X1 STC12C5A60S2-LQPF48

    单片机控制系统双层板STC51 简介: STC12C5A60S2主芯片,12MHz主频 12V电源输入,12/5/3V电源输出 4路0~12V可调10位ADC输入 4路1A大电流达林顿输出 4路INT ...

  3. 美国知名Cloudflare网络公司遭中国顶尖黑客攻击

    最近中美贸易战愈演愈烈,美国知名Cloudflare网络公司的客户的分布式拒绝服务攻击今天在恶意流量方面达到了新的高度,黑客并袭击了该公司在欧洲和美国的数据中心.根据Cloudflare首席执行官马修 ...

  4. python tkinter实时显示曲线

    from tkinter import *from tkinter import ttkimport time#画窗口root = Tk()root.geometry('1000x500')root. ...

  5. Dubbo学习-1-基础知识

    分布式基础理论 1.什么是分布式系统: 分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像是单个相关系统.分布式系统是建立在网络之上的软件系统 随着互联网发展,网站应用规模的不断扩大,常规的 ...

  6. SQL Server 中用While循环替代游标Cursor的解决方案

    在编写SQL批处理或存储过程代码的过程中,经常会碰到有些业务逻辑的处理,需要对满足条件的数据记录逐行进行处理,这个时候,大家首先想到的方案大部分是用“游标”进行处理. 举个例子,在订单管理系统中,客服 ...

  7. [CF959A]Mahmoud and Ehab and the even-odd game题解

    题意简述 一个数n,Mahmoud珂以取(即如果取\(k\),使\(n = n - k\))一个正偶数,Ehab珂以取一个正奇数,一个人如果不能取了(对于Mahmoud和Ehab \(n = 0\), ...

  8. 虚拟机CentOS7安装docker并搭建Gitlab私服

    一.下载安装虚拟机和CentOS7系统 这些流程比较简单不会有什么坑,这里不再阐述 二.安装docker 1.Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验 ...

  9. 576 C

    C. MP3 爆ll == #include<bits/stdc++.h> using namespace std; typedef long long ll; #define P pai ...

  10. 2017华南理工华为杯D bx回文

    比赛的时候队友过了,补补题XD. 题目链接:https://scut.online/p/125(赛后补题) 125. 笔芯回文     题目描述 bx有一个长度一个字符串S,bx可以对其进行若干次操作 ...