JS 中类型和类型转换
类型
首先明确一点,Js中的类型是针对值来说,而不是针对变量,值就是所谓的42, 'abc', false 等能用js 操作的数据。在js 中说某某某是什么数据类型,其实是说的这些值是什么类型。值呢?有7种数据类型: number, string, boolean, null, undefined, object, symbol. 42 就是number 类型了。怎么判断出来的,最简单的办法就是typeof 操作符了,它返回一个字符串来表示类型
console.log(typeof ); // 'number'
这时,你可能想到,不对啊,以前也用typeof 操作过变量啊?也返回类型了啊。
let a = 42
console.log(typeof a); // 'number'
其实这里仍然是对值进行的类型判断,因为你不能说变量a就是number 类型,因为 js 是弱类型语言,完全可以把重新赋值为一个变量。
let a = 42
console.log(typeof a); // 'number'
a = 'str';
console.log(typeof a); // 'string'
这时,你就说不出变量a 是什么类型了。在js 中,如果对一个变量进行typeof 操作,一定是对当时变量所指向或所包含的值进行typeof 操作,变量没有类型,值有。
但使用typeof 进行类型判断的时候,它有一个bug, typeof null 返回的是'object' 而不是'null'. null 值是'null' 类型的唯一值,它竟然返回了'object'. 这时,如果你就想用typeof 操作符来判断一个值是不是null, 你就要再加一个判断了。只有对象和null 执行typeof 操作时候,才返回'object', 只要找出二者的不同就可以了,很简单,所有对象都是真值,null 是假值,!a 是true 就可以区分了。所以使用typeof 判断null的时候,如下
let a = null;
(!a && typeof a === 'object') // true
其时 typeof 还一个小问题,就是typeof 一个函数的时候,返回的是一个'funciton',
let a = () => {};
console.log(typeof a); // 'function'
这可能让人产生误会,误以为'funciton' 也是一种数据类型,其实并不是,所有的函数都是对象,不过这也提供了一个判断函数的简便方法。
当然,typeof 操作符还有一个好处,就是如果一个变量没有声明的话,执行typeof 操作,不会报错,而是返回undefined, 这就是提供了一个安全的操作,因为,如果你直接引用一个没有声明的变量就会报错。有时,你想判断一个变量存不存在,如要写a == undefined, 完了,报错了,引用了一个没有声明的变量a. 如果使用 typeof a == undefined, 没有问题。
Number类型
Js 中,只有一种数字类型,就是Number, 实际上它是双精度的浮点型,在其它语言中称为double,也就是说Js 中没有整数类型, 所谓的整数只不过是没有小数,或小数后面全是0,如42 或42.00。 默认情况下, 数值的输出方式,都是10进制,并且会把末尾的0 去掉。
var a = 42.300;
var b = 42.0;
console.log(a); // '42.3'
console.log(b) //
但是如果一个数特别大或特别小的话,它会以指数形式进行输出,在chrome 浏览器中,只要整数大于20次方,它就会转化为指向,小数的话,只要后面有7位,就会转化为指数
var a = 5000000000000000000000;
var b = 0.0000005;
console.log(a); // 5e+21
console.log(b) // 5e-7
使用浮点数来表示数值时,它有一个问题, 就是0.1 + 0.2 === 0.3 为false. 计算整数的时候,没有问题,计算小数就有可能出问题,那怎么办法?怎么才能让0.1 + 0.2 和0. 3 进行比较的时候,表示相等呢?一种是办法是设置一个容错的边界, 当小于这个值 的时候,就表示这两个值相等了,这个值在js 中是2的-52 次方Math.pow(2,-52),Es6 专门定义了这个常量Number.EPSILON, 只要两者进行比较小于这个数,就证明这两个值相等。
// 无限接近相等
function isCloseEnoughToEqual(n1,n2) {
return Math.abs( n1 - n2 ) < Number.EPSILON;
}
let a = 0.1 + 0.2;
let b = 0.3
console.log(isCloseEnoughToEqual(a, b)) // true
计算整数没有问题,这个整数也是有边界的, 对于double双精度浮点数,用 1 位表示符号,用 11 位表示指数,52 位表示尾数,所以浮点数表示的最大整数是2的53次方-1(Math.pow(2, 53))最小整数是-2的53次方, 即[-2^53, 2^53 - 1], 超出了这个边界,计算也是不准确
let a = 9007199254740992; // 2^53
let b = a + 1;
console.log(a == b) // true
a + 1 和a 是相等的,所以出现了问题了。为些,Es6 定义了安全数值 的字面量和判断安全数值的方法 Number.MAX_SAFE_INTEGER, Number.MIN_SFTE_INTEGER
以及Number.isSafeInteger(); 当然也提供了判断整数的方法Number.isInteger();
let a = ; // 2^53 -1
let b = a + ;
console.log(Number.isSafeInteger(a)) // true
console.log(Number.isSafeInteger(b)) // false
console.log(Number.isInteger(a)) // true
console.log(Number.isInteger(b)) // true
a 和 b 都是整数,但a 是安全整数,b 不是
Number 类型中的特殊值--- NaN。当我们执行算术操作的时候,这个操作并没有成功,按理说,它应该报错,但是Js 并不会,而是返回特殊的值NaN。
let a = / 'foo';
console.log(a ) // NaN
我们怎么判断值是NaN, 可能最简单的就是 它=== NaN, 但是很不幸,NaN 和它本身并不相等,NaN === NaN 返回的是false. 其次还有一个isNaN 的函数来判断NaN, 但是它也有点问题,传给isNaN的参数,首先会进行自动类型转化,看能不能转化成数字,如能就是返回true, 如果不能返回false.
let a = / 'foo';
console.log(isNaN(a)) // true
let b = 'foo';
console.log(isNaN(b)) // true
可以看到 b 不是NaN, 但是isNaN 仍然返回了true, 也就是说,即使isNaN() 返回了true, 我们也不能确定这个值是不是NaN。为了解决这个问题,ES6增加了Number.isNaN(), 如果值为NaN, 它返回ture ,否则返回false.
let a = / 'foo';
console.log(Number.isNaN(a)) // true
let b = 'foo';
console.log(Number.isNaN(b)) // false
Number.isNaN() 是怎么判断的呢?首先它判断这个值是不是number 类型,NaN 作为值,它其实是number 类型
let a = / 'foo';
console.log(typeof a === 'number') // true
其次才是调用isNaN 方法来判断。
Number 类型中的特殊值--- +0 和-0. Js 中的0 有两个,+0 和-0. 除了字面量的方式可以得到-0 外,使用* 或 / 操作符,也可以得到,但+ - 操作符不能。
let a = - * ;
let b = / -;
console.log(a, b) // -0
有两个0 也不要紧,但是它有几个奇怪的行为
1, +0 和 -0 使用== 或=== 比较的时候,是相等。
let a = -;
let b =
console.log(a === b) // true
其实它两个是不相等,所以ES6 增加了Object.is() 方法,来判断它两个并不相等。
2, -0 转化成字符串的时候,输出的结果是‘0’ ,而是不-0. JSON.stringify(-0) 也是得到'0'
let a = -;
console.log(a.toString()) // '0'
console.log(JSON.stringify(a)) // '0'
然而当一个'-0' 字符串转化数字的时候,它返回的是-0, 正常的。
+"-0"; // -0
Number( "-0" ); // -0
JSON.parse( "-0" ); // -0
null 和undefined
null 是一个关键字,不能用它作为变量名,更不能给它赋值,但undefined 不是,它可以是一个标示符,可以给它赋值,当然,这仅限在非严格模式,如果是严格模式的话,会报错。
var undefined = ;
"use strict";
var undefined = ; // 报错
由于undefined 可以被改写,有一个void 操作符,它后面可以是任何表达式,返回的值是undefined, 不过一般使用 void 0, 这样undefined 就不会被改写了。
console.log(void === undefined) // true
对象(引用类型)
如果一个值执行typeof 操作返回 ‘object’,那么它就是引用类型,其实,还可以进行细分,它具体是对象下面的哪一个类型,数组,还是函数,使用的是Object.prototype.toString.call(值)
let a = [,];
let b = function(){};
let c = new Date(); console.log(Object.prototype.toString.call(a)) // '[object Array]' Array 类型
console.log(Object.prototype.toString.call(b)) // '[object Function]' Function 类型
console.log(Object.prototype.toString.call(c)) // '[object Date]' Date 类型
那对基本数据类型调用toString() 方法呢?它返回基本类型的包装类型,甚至对null, undefined 都可以调用, 返回值如下
console.log(Object.prototype.toString.call()) // '[object Number]'
console.log(Object.prototype.toString.call('abc')) // '[object String]'
console.log(Object.prototype.toString.call(false)) // '[object Boolean]'
console.log(Object.prototype.toString.call(null)) // '[object Null]'
console.log(Object.prototype.toString.call(undefined)) // '[object Undefined]'
console.log(Object.prototype.toString.call(Symbol())) // '[object Symbol]'
数组类型
1, 删除数组元素的时候,不要用delete, 使用delete 可以把数组中的元素及元素在数组中的位置(slot)删除掉, 但不用更新数组的length 长度。
let a = [1, 2];
delete a[0];
console.log(a);
console.log(a.length)
下图是chrome 浏览器的返回值。
可以使用splice() 进行删除
2, 不要创建稀疏数组。当创建稀疏数组的时候,两个不相邻元素之间的slot 是不存在的,a[0] 和a[2] 之间并没有slot, 尽管获取到它的值是undefined
var a = [ ];
a[0] = 1;
// 没有 a[1] slot
a[2] = 3;
a[1]; // undefined
a.length; //
当我们使用构造函数创建数组时, 给它传递一个数字,它就会创建length 为参数的数组,这个数组其实也是一个稀疏数组. 比如,你传递了一个3,那么创建的数组的length 为3,我们以为这个数组有了3个slot, 值为undefined, 其实它没有任何的slot. 当你使用forEach 的时候,什么都没有输出
arr.forEach((item, index) => {
console.log(item);
console.log(index);
})
3, 尽管数组是对象,但千万不要作为对象进行使用,比如 a["name"] = 'Sam', 尤其是属性是数字字符串的时候,这时它会把字符串转化为数字,作为数组的元素
let a = [];
a['5'] = 5;
console.log(a.length) //
类型转化
首先要记住的是,Js中的类型转化,它得到的结果永远是基本类型,也就可以分为两种情况,基本类型和基本类型之间的转化,引用类型转化为基本类型,不可能出现基本类型转化为引用类型。类型转化出现最多就是转化成number, string, 和boolean. 这就是说,我们在学习类型转化的时候,也要分为两种情况去学,比如转化成string, 基本类型是怎么转化string的,引用类型是怎么转化成string的。
JS 中类型和类型转换的更多相关文章
- JS中String类型转换Date类型 并 计算时间差
JS中String类型转换Date类型 1.比较常用的方法,但繁琐,参考如下:主要使用Date的构造方法:Date(int year , int month , int day)<script& ...
- JS 数据类型转换-转换函数、强制类型转换、利用js变量弱类型转换
1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型 ...
- JS的数据类型转换
JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
- js课程 2-6 js如何进行类型转换及js运算符有哪些
js课程 2-6 js如何进行类型转换及js运算符有哪些 一.总结 一句话总结: 1.所有类型->布尔类型(为假的情况)有哪些(6种)? 1)字符串('')2)整型(0)3)浮点型(0.0)4) ...
- js字符串转换为数字的三种方法。(转换函数)(强制类型转换)(利用js变量弱类型转换)
js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...
- JS中数据类型转换
JS中数据类型转换汇总 JS中的数据类型分为 [基本数据类型] 数字 number 字符串 string 布尔 boolean 空 null 未定义 undefined [引用数据类型] 对象 obj ...
- JS中类或对象的定义说明
本篇文章主要是对JS中类或对象的定义进行说明介绍.我们知道,JS是面向对象的.谈到面向对象,就不可避免的要涉及类的概念.一般像c#,java这些强类型语言都有固定的定义类的语法.而JS的不同之处在于它 ...
- js 的数据类型转换
一直对js的类型转换一直半解,今天理一下思路,首先说一下几个特殊的数值 null null是特殊的object,故 typeof null 返回object, null派生于undefined ,故 ...
- JS基本类型和引用类型的值
JS中可以把变量分成两部分,基本类型和引用类型. 基本类型比较简单,包括:Undefined.Null.Boolean.Number和String,基本类型值就是简单的数据段:引用类型值可能由多个值构 ...
随机推荐
- nginx 常用的中间件
1.--with-http_stub_status_module nginx客户端状态 # 打开default.conf文件 vim /etc/nginx/conf.d/default.conf # ...
- springboot 整合 mybatis 入门
springboot整合mybatis 0.yml 配置文件 1.创建数据库表. 2.创建实体类. 3.创建 Mapper 接口 ,添加 @Mapper 注解. 4.创建 Mapper 映射文件. & ...
- c3p0参数
<c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> < ...
- ESA2GJK1DH1K升级篇: IAP详解
前言: 源码下载链接: https://gitee.com/yang456/STM32_IAP_Learn.git 后期所有出售的升级程序皆在此代码之上进行优化和开发 请必须把此文章各个的地方的说明看 ...
- django命名url与url反向解析
1.在urls.py路由中指定别名 2.在views.py视图文件中导入from django.shortcuts import render, redirect, reverse 3.也可从这里导入 ...
- docker 部署 jenkins
建议使用的Docker映像是jenkinsci/blueocean image(来自 the Docker Hub repository). 该镜像包含当前的长期支持 (LTS) 的Jenkins版本 ...
- SCAN----Redis检索键值对
转载地址:http://redis.readthedocs.org/en/latest/key/scan.html SCAN SCAN cursor [MATCH pattern] [COUNT co ...
- udev规则(转)
Writing udev rules by Daniel Drake (dsd)Version 0.74 The most recent version of this document can al ...
- docker:轻量级图形页面管理工具Portainer
1.介绍 docker 图形化管理提供了很多工具,有Portainer.Docker UI.Shipyard等等,本文主要介绍Portainer. Portainer是一个开源.轻量级Docker管理 ...
- [C++基础] 数组、指针、内存篇
一.数组 2.1 int a[2][2]= { {1}, {2,3} },则 a[0][1] 的值是多少? 二维数组的初始化一般有两种方式: 第一种方式是按行来执行,如int array\[2][3] ...