JS的数据类型(包含:7种数据类型的介绍、数据类型的转换、数据类型的判断)
前言
最新的 ECMAScript 标准定义了JS的 7 种数据类型,其中包括:
6 种基本类型:Boolean、Null、Undefined、Number、String、Symbol (ECMAScript 6 新定义);
1个引用类型: Object(包含狭义的对象,Array,function)。
本文主要介绍一下7种数据类型介绍及数据类型转换及数据类型判断。
目录
- JavaScript七种数据类型(Boolean、Null、Undefined、Number、String、Symbol、Object)
- JavaScript数据类型转换(任意类型转字符串,任意类型转数字,任意类型转布尔)
- JavaScript数据类型判断(Typeof()、instanceof、Object.prototype.toString.call()、constructor)
正文
1 JavaScript七种数据类型
-
Boolean
-
Bealean类型的值有两个:true、false
- 所有其他数据类型都有对应的Boolean值,使用Boolean(value)方法可以强制转换任意值为boolean类型
console.log(Boolean("Hello")); //true
-
-
Null
-
Null类型的值只有一个:null
- Typeof(null)时返回“object”:这是历史原因造成的,但是可以理解成:unll表示一个空对象(Object)的引用
typeof(null); // "object"
-
-
Undefined
-
undefined类型的值只有一个:undefined
- 只进行了声明而未初始化的变量,其值都是undefined
var m; console.log(m); //undefined
- undefined值派生自null值,两者都是表示“没有值”。两者相等,但是由于数据类型不一样,两者不全等(
==
是相等操作符会对数据类型进行转化,===
是全等操作符不会转化数据类型) -
console.log(undefined == null); //true
console.log(undefined === null); //false
- 如何区分undefined和null:表示一个还没赋值的对象用null;表示一个还没赋值的字符串、数字、布尔、symbol时用undefined
-
-
Number
- number包括:整数和小数(如:1/1.1)、科学计数法(如:1.11e2)、二进制(如:0b11)、八进制(如:011或0o11)、十六进制(如:0x11)
- 保存浮点数所需的内存空间是整数值的2倍
- 浮点数值相加结果会不准确
console.log(0.1+0.2); //0.30000000000000004
- NaN是一个特殊的Number值;它的存在是为了避免程序直接报错;NaN的任何操作都会返回NaN;NaN与任何值都不相等,包括它自身
console.log(NaN === NaN); //false;
-
String
- 字符串String类型是由引号括起来的一组由16位Unicode字符组成的字符序列。
- 用单引号(' ')或双引号(" ")皆可,但是必须双引号配双引号,单引号配单引号
- 任何字符串的长度都是可以通过length属性来取得
var a="nihao"; console.log(a.length); //5
- ECMAScript中字符串是不可变,如要改变该变量保存的字符串,首先要销毁原来的字符串,再用另一个包含新值的字符串填充该变量
-
Symbol(本节参考自neweastsun的博客)
-
- symbol是基本类型,实现唯一标识
- 通过调用symbol
(name)
创建symbol name - 我们创建一个字段,仅为知道对应symbol的人能访问,使用symbol很有用
- symbol不会出现在for..in结果中
- 使用symbol(name)创建的symbol,总是不同,即使name相同。如果希望相同名称的symbol相等,则使用全局注册
- symbol.for(name)返回给定名称的全局symbol,多次调用返回相同symbol
- Javascript有系统symbol,通过Symbol.*访问。我们能使用他们去修改一些内置行为
-
Object
- 对象由 { } 分隔,在 { } 内部,对象的属性以名称和值对的形式 (name : value) 来定义,属性由逗号分隔
var cars={ "car1" : "Volvo", "car2": "Saab", }; //或者 var cars={ car1 : "Volvo", car2: "Saab", };
- 寻找对象中的值有两种方式:
car1name=cars.car1; car1name =cars["car1"];
- 数组(Array)和函数(Function)是高级的对象
- 注意⚠️:基本类型和引用类型的区别:
- 基本类型:访问是按值访问值不可变,基本类型的比较是值的比较,数据是存放在栈内存中的
- 引用类型:拥有属性和方法且值是可变的,引用类型的比较是引用的比较,数据是存放在堆内存中的
- 对象由 { } 分隔,在 { } 内部,对象的属性以名称和值对的形式 (name : value) 来定义,属性由逗号分隔
2 JavaScript数据类型转换
-
任意转字符串
- String(thing) (thing:任何可以被转换成字符串的值)
String(1) //"1" String(true) //"true" String(null) //"null" String(undefined) //"undefined" String({}) //"[object Object]"
String(0b1100) //"12" 二进制转化为十进制 String(01100) //"576" 八进制转化为十进制 String(0o1100) //"576" 八进制转化为十进制 String(0x1100) //"4352" 十六进制转化为十进制
- thing.toString()
1.toString() //Uncaught SyntaxError: Invalid or unexpected token 1..toString() //"1" (1).toString() //"1" true.toString() //"true" null.toString() //VM285:1 Uncaught TypeError: Cannot read property 'toString' of null at <anonymous>:1:6 undefined.toString() //VM283:1 Uncaught TypeError: Cannot read property 'toString' of undefined at <anonymous>:1:11 {}.toString() //"[object Object]"
thing
+ ""1 + "" //"1" true + "" //"true" null + "" //"null" undefined + "" //"undefined" {} + "" //0 var o={} //undefined o + "" //"[object Object]"
- String(thing) (thing:任何可以被转换成字符串的值)
-
任意转数字
-
Number(value)
Number(true) //1 布尔转为数字 Number(false) //0 布尔转为数字 Number(null) //0 null转为数字 Number(undefined) //NaN undefined转为数字,结果为NaN Number("123") //123 字符串转为数字 Number(" ") //0 有空格的空字符串为0 Number("") //0 为空格的空字符串为0 Number("123a") //NaN number转数字的字符串中不能有字母,parseFloat以及parseInt的中间可以有字母,但是开头不能有 Number("true") //NaN Number("false") //NaN
- parseInt(string, radix) MDN
//⚠️string必须是一个字符串 //⚠️如果不是字符串而是一串数字(注意不能是数字+字母的格式),系统会自动把数字转为字符串,parseInt(01100)相当于是parseInt(String(01100)),由于01100是0开头,是一个八进制,String(01100)会把进制度转化为十进制再转为字符串,即相当于是parseInt("576")
parseInt("01100", 10) //1100 parseInt(01100) //576 parseInt("01100", 8) //576 8的意思是:我字符串中的值是八进制的,请把它转化为十进制 //⚠️但是0x开头(即十六进制)的除外 parseInt("0b1100") //0 二进制返回0,到字母b处即无法识别数字 parseInt("0o1100") //0 八进制返回0,到字母o处即无法识别数字 parseInt("0x1100") //4352 括号里的是字符串。十六进制返回对应的十进制 parseInt(0x1100) //4352 括号里的不是字符串。十六进制返回对应的十进制- string:必需。要被解析的字符串。
- radix:可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间,如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数,如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。
- 注意⚠️:radix参数为n 将会把第一个参数看作是一个数的n进制表示,而返回的值则是十进制的
-
- parseFloat(string) MDN
parseFloat("1.11") //1.11 字符串中是数字(0-9)以及小数点 parseFloat(".1.11") //0.1 如果首字符是.则会自动shi parseFloat("0.0111e2") //1.11 字符串中是科学计数法(e/E) parseFloat("+1.11") //1.11 字符串中有+ parseFloat("-1.11") //-1.11 字符串中有- parseFloat("1.11more") //1.11 字符串中如果有除 小数点、+/-、数字、e/E 的字符,它以及之后的字符都会被忽略 parseFloat("more1.11") //NaN 如果以字母开头直接NaN parseFloat(" 1.11") //1.11 字符串开头的空格会自动忽略
//注意⚠️
parseFloat(".1.11") //0.1 如果字符串有两个点,第二点之后的内容会被忽略掉 parseFloat("..1.11") //NaN 开头多个点会NaN- string:需要被解析成浮点数的字符串
- parseFloat是个全局函数,不属于任何对象
- parseFloat将它的字符串参数解析成为浮点数并返回,如果在解析过程中遇到了正负号(+或-)、数字(0-9)、小数点、或者科学记数法中的指数(e或E)以外的字符,则它会忽略该字符以及之后的所有字符,返回当前已经解析到的浮点数,同时参数字符串首位的空白符会被忽略
- 可以通过调用isNaN函数来判断parseFloat的返回结果是否是NaN,如果让NaN作为了任意数学运算的操作数,则运算结果必定也是NaN
- parseFloat 也可转换和返回Infinity值. 可以使用isFinite 函数来判断结果是否是一个有限的数值 (非Infinity, -Infinity, 或 NaN)
- string- 0 或 string*1 或string/1
"123"-0//123 相减 "123"*1//123 相乘 "123"/1//123 相除 //注意⚠️ "123a"-0//NaN 字符串中不能有字母
- +string 或 -string
+"123"//123 正 -"123"//-123 负
-
任意转布尔
- Boolean(value) (value:可选,是用来初始化 Boolean 对象的值。)
-
//Boolean()值为false的情况:参数值为 0、-0、null、NaN、undefined、空字符串(""),或者传入的参数为 DOM 对象的 document.all 时 Boolean(""); //false Boolean(0); //false Boolean(-0); //false Boolean(NaN); //false Boolean(null); //false Boolean(undefined); //false //Boolean()值为True的情况:除以上提到的几种情况,任何其他的值,包括值为 "false" 的字符串和任何对象,都会创建一个值为 true 的 Boolean 对象。
//⚠️空字符串中如果有空格,返回的是trueBoolean(" "); //true
- !!value
!!"" //false !!0 //false !!-0 //false !!NaN //false !!null //false !!undefined //false
3 JavaScript数据类型判断
-
Typeof()
-
判断基本数据类型(基本类型number、string、boolean、undefined,除了null。)⚠️不能区分对象、数组、null、引用类型
//typeof()输出有五种数据类型 number string boolean undefined object以及以及函数类型 function typeof("") //"string" typeof(1) //"number" typeof(true) //"boolean" typeof(undefined) //"undefined" typeof({}) //"object" typeof([]) //"object" array返回对象 typeof(function(){}) //"function" typeof(null) //"object" null返回对象
//但是怎么区分 对象、数组以及null 呢?
-
-
instanceof运算符
- 判断引用类型(引用类型,即对象类型。创建对象后可以调用这个对象下的方法有Object类型、Array类型、Date类型、RegExp类型、Function类型,包装类型(Boolean、Number、String)等。)
//nstanceof对引用类型进行判断 {} instanceof Object; //true[] instanceof Array; //truenew Date() instanceof Date; //true function(){} instanceof Function; //true
//instanceof无法对原始类型进行判断 "string" instanceof String; //false(111) instanceof Number; //false
- 判断引用类型(引用类型,即对象类型。创建对象后可以调用这个对象下的方法有Object类型、Array类型、Date类型、RegExp类型、Function类型,包装类型(Boolean、Number、String)等。)
-
Object.prototype.toString.call()
- 能准确的判断基本类型和引用类型
Object.prototype.toString.call('abc') //"[object String]" Object.prototype.toString.call(123) //"[object Number]" Object.prototype.toString.call(true) //"[object Boolean]" Object.prototype.toString.call(undefined) //"[object Undefined]" Object.prototype.toString.call(null) //"[object Null]" Object.prototype.toString.call({}) //"[object Object]" Object.prototype.toString.call([]) //"[object Array]" Object.prototype.toString.call(function(){}) //"[object Function]"
- 常用的类型判断函数集合
var valide = (function(){ // 是否是字符串 function isString(value){ return Object.prototype.toString.call(value) == "[object String]"; } // 是否是数字 function isNumber(value){ return Object.prototype.toString.call(value) == "[object Number]"; } // 是否undefined function isUndefined(value){ return Object.prototype.toString.call(value) == "[object Undefined]"; } // 是否是null function isNull(value){ return Object.prototype.toString.call(value) == "[object Null]"; } // 是否是布尔值 function isBoolean(value){ return Object.prototype.toString.call(value) == "[object Boolean]"; } // 是否是对象 function isObject(value){ return Object.prototype.toString.call(value) == "[object Object]"; } // 是否数组 function isArray(value){ return Object.prototype.toString.call(value) == "[object Array]"; } // 是否是函数 function isFunction(value){ return Object.prototype.toString.call(value) == "[object Function]"; } // 是否是正则表达式 function isRegExp(value){ return Object.prototype.toString.call(value) == "[object RegExp]"; } // 是否是日期对象 function isDate(value){ return Object.prototype.toString.call(value) == "[object Date]"; } })();
- 能准确的判断基本类型和引用类型
-
constructor属性
- constructor属性始终指向创建当前对象的构造函数
string".constructor == String //true true.constructor == Boolean //true (123).constructor == Number //true {}.constructor == Object //true [].constructor == Array //true
- 一个常用的函数
function isArray(arr){ return typeof arr == "object" && arr.constructor == Array; }
- constructor属性始终指向创建当前对象的构造函数