js数据类型转换 & 数据类型判断

2019-09-12 admin

数据类型

js的数据类型有七种,其中有六种基本类型:null,undefined,boolean,string,number,symbol;以及一种引用类型:object

数据类型的转换

显式转换

一. 将非数值转换为数值类型的函数 :Number(); parseInt(), parseFloat() Number() 函数转换规则:

  • boolean:true转换为1,false转换为0
  • number:原样输出
  • undefined:输出NaN
  • null:输出0
  • 字符串: 字符串中只包含数字(可带正负号,可为整数或小数):转为十进制数,且忽略前导0; 字符串为十六进制,转为十进制; 空字符串:0; 其他:NaN
  • 对象:根据不同的对象用继承的valueOf()转成字符串,数字或本身,而对象用toString就一定转为字符串。一般对象默认调用valueOf()。
0 == []; // true, 0 == [].toString(); ---> 0 == 0;
'0' == []; // false, '0' == [].toString(); ---> '0' == '';
2 == ['2']; // true, 2 == ['2'].valueOf(); ---> 2 == '2' ---> 2 == 2;
'2' == [2]; // true, '2' == [2].toString(); ---> '2' =='2';

[] == ![]; //true, [].valueOf() == !Boolean([]) -> 0 == false ---> 0 == 0;

parseInt(string [,radix])

parseInt不遵循四舍五入,radix的取值可为2-32
对于非字符串类型,先转换为字符串 
从左向右遍历字符串,直到碰到非数字字符进行“截断”;如果第一个字符就是非数字字符,转换为NaN
var num = ["123" , "124.4" , "234asd" , "asf456"] ;
  for (i = 0; i < num.length; i++) {
   console.log(parseInt(num[i]));   
  }     //123 , 124 , 234 , NaN 

二. 将其它类型的数据转换为字符串类型的函数 2.1 String(mix):将mix转换成字符串类型。该函数可以将任何数据类型的值转换为字符串。 2.2 toString():

    num.toString([radix]) :可以将数值(或其他除null,undefined外的数据类型)转换为字符类型,radix可选;
    例:把一个二进制的数10001000转换成十六进制的数。
var num1 = parseInt('10001000',2);  //136
var num2 = num1.toString(16);  //'88'

三. 将值转换成布尔值类型:Boolean() 只有这七个值会返回false:undefined, null, -0, +0, NaN, ‘’(空字符), false; 其他情况都会返回true

Boolean(1) ;//返回true
Boolean("0");//返回true
Boolean("abc");//返回true
Boolean([]); // true
Boolean({}); // true
Boolean(new Boolean(false))// true
Boolean(false);//返回false
Boolean('');//返回false
Boolean(0);//返回false

隐式转换

这里说的隐性类型转换,是==引起的转换。

如果存在NaN,一律返回false 再看有没有布尔,有布尔就将布尔转换为数字 接着看有没有字符串, 有三种情况,对方是对象,对象使用toString进行转换;对方是数字,字符串转数字;对方是字符串,直接比较;其他返回false 如果是数字,对方是对象,对象取valueOf进行比较, 其他一律返回false null, undefined不会进行类型转换, 但它们俩相等 这个顺序一定要死记,这是面试时经常问到的。

0 == undefined    //false
1 == true        //true
2 == {valueOf: function(){return 2}}        //true
NaN == NaN    //false
 8 == undefined    //false
1 == undefined    //false
 null == {toString: function(){return 2}}        //false
 0 == null        //false
 null == 1        //false
 1 == { toString:function(){ return 1 } , valueOf:function(){ return [] }}         //true

//undefined不发生类型转换
 console.log(undefined == undefined);  //true
 console.log(undefined == 0);       //false
 console.log(undefined > 0);        //false
 console.log(undefined < 0);        //false

//null不发生类型转换
 console.log(null == null);        //true
 console.log(null >= 0);          //true
 console.log(null == 0);          //false
 console.log(null > 0);          //false
 console.log(null < 0);          //false
 console.log(undefined == null);    //true 

隐式转换为字符

     var a;
        var b = a + "";
        console.log(typeof b + " " + b);

        a = null;
        b = a + "";
        console.log(typeof b + " " + b);

        a = 123;
        b = a + "";
        console.log(typeof b + " " + b);

        a = true;
        b = a + "";
        console.log(typeof b + " " + b);

        null+"3"        //"null3"

隐式转换为数值

+‘3’ //     3
‘10’-20  // -10
10-‘one’  //   NaN

隐式转换为boolean

!!num 相当于调用 Boolean(num)

关于null == 0

要比较相等性之前,不能将null和undefined转换成其他任何值。就是undefined和null与其他数在进行相等判断时不进行类型转换。 null == undefined,这个是true

null>0 //null转化为number,为0,所以0>0结果为false。 null>=0 //null转化为number,为0>=0,所以结果为true。 null==0// null在做相等判断时,不进行转型,所以null和0为不同类型数据,结果为false

关于NaN

NaN属于number类型,NaN与任何值都不相等 方法 parseInt() 和 parseFloat() 在不能解析指定的字符串时就返回这个值。

typeof(NaN)        //number
NaN === NaN   //false

注意Number.isNaN()和isNaN的区别:

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(Math.sqrt(-2))); // true
console.log(Number.isNaN('hello')); // false
console.log(Number.isNaN(['x'])); // false
console.log(Number.isNaN({})); // false

console.log(isNaN('hello')); // true
console.log(isNaN(['x'])); // true
console.log(isNaN({})); // true

数据类型判断的四种方法

  1. typeof typeof的返回值有6种:“number”、”string”、”boolean”、”object”、”function”、”undefined" typeof对于基本数据类型判断是没有问题的,但是遇到引用数据类型(如:Array)是不起作用的,返回object
typeof [] ; //object
  1. instanceof

instanceof 是用来判断 A 是否为 B 的实例,表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。 在这里需要特别注意的是:instanceof 检测的是原型,我们用一段伪代码来模拟其内部执行过程:

instanceof (A,B) = {
    var L = A.__proto__;
    var R = B.prototype;
    if(L === R) {
        // A的内部属性 __proto__ 指向 B 的原型对象
        return true;
    }
    return false;
}

从上述过程可以看出,当 A 的 proto 指向 B 的 prototype 时,就认为 A 就是 B 的实例,我们再来看几个例子

[] instanceof Array; // true
{} instanceof Object;// true
new Date() instanceof Date;// true

function Person(){};
new Person() instanceof Person;

[] instanceof Object; // true
new Date() instanceof Object;// true
new Person instanceof Object;// true

instanceof 只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型。

instanceof 操作符的问题在于,它假定只有一个全局执行环境。如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[0].Array;
var arr = new xArray(1,2,3); // [1,2,3]
arr instanceof Array; // false

针对数组的这个问题,ES5 提供了 Array.isArray() 方法 。该方法用以确认某个对象本身是否为 Array 类型,而不区分该对象在哪个环境中创建。

注意:

console.log("1" instanceof String);  //false
console.log(1 instanceof Number);  //false
console.log(true instanceof Boolean);  //false

new Number(1) instanceof Number;  //true
new String('1') instanceof Number;  //true
new Boolean(false) instanceof Number;  //true
  1. constructor

null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。

函数的 constructor 是不稳定的,这个主要体现在自定义对象上,当开发者重写 prototype 后,原有的 constructor 引用会丢失,constructor 会默认为 Object

function Fn(){};

Fn.prototype=new Array();

var f=new Fn();
console.log(f.constructor===Fn);  //false
console.log(f.constructor===Array);  //true
  1. Object.prototype.toString.call(true)
Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用

参考链接

数据类型转换
    https://www.javascriptcn.com/article/136520.htm
    https://www.javascriptcn.com/article/136521.htm
    https://blog.csdn.net/qq2071114140/article/details/92478526
    https://blog.csdn.net/luckydie/article/details/77948097
    https://blog.csdn.net/Doulvme/article/details/83104683
判断数据类型
    https://www.cnblogs.com/onepixel/p/5126046.html
    https://www.cnblogs.com/zt123123/p/7623409.html

[转载]原文链接:https://segmentfault.com/a/1190000020365731

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74911.html

文章标题:js数据类型转换 & 数据类型判断

相关文章
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
回到顶部