js数据类型和转换
这是每门编程语言都要学的,每本书开头都是数据类型和变量什么的,是不是觉得我都会了,跳过。。
BUT,这次no,这是最基本最重要的地方,一定要认真看。
一、数据类型
分为两类:基本数据类型和引用数据类型。
基本数据类型:string(字符串),number(数字),boolean(布尔值),null(空),undefined(未定义)
引用数据类型:array,object
下面分别介绍:
1、string
(1)由一对单引号或者双引号表示。并且单引号和双引号一定要成对出现。
个人推荐使用单引号好一点。
(1)var str1=‘a’;
(2)那么var str2=‘’;呢?这对引号里面什么都没有,这也是一个字符串,叫做
空字符串。
(3)那么var str3=‘ ‘;呢?这对引号里是一个空格,这样是一个字符串。但
不是空字符串。
(2)、(3)的区别是什么呢?在控制台打印一下:
var str1='a'; var str2=''; var str3=' '; console.log(str1); console.log(str2); console.log(str3);
结果如下:
我们会发现空格是可以选中的,空字符串是不能被选中的。(空格的大小:半个字符大小,比如对于谷歌浏览器一个字符是16px,那么空格就是8px。)
(2)字符字面量(转义序列)
对于有强迫症的同学,希望整个字符串都用单引号表示,那如果遇到it’s me这种的字符串呢?var str=‘it’s me’;//报错那可以写成var str=“it’s me”;//不会出错但是强迫症怎么弄?var str='it\'s me’;这就是转义字符。
(3)字符串的方法
toString()方法(null和undefined没有这个方法,number,string,boolean,对象都用这个方法)一般toString()可以不传入参数,默认是按基数10传递,也可以传入参数作为基数。var num=10; alert(num.toString());// ’10' alert(num.toString(2)); //‘1010’ alert(num.toString(8)); // ’12' alert(null.toString()); //报错
如果不知道要转换的值是不是null或undefined,还可以使用转型函数String(),这个函数能够将任何类型的值转换为字符串。转换原则如下:如果值有toString()方法,则调用该方法并返回结果。如果值是null,返回’null';如果值是undefined,则返回’undefined’;例子:
var value1=10; var value2=true; var value3=null; var value4; alert(String(value1)); //“10" alert(String(value2));// "true" alert(String(value3)); //“null" alert(String(value4));// “undefined”
要把某个值转换为字符串, 还可以使用加号,比如1+"" //“1"字符串是 灰色的。无数多个。
2、number(数字)
(1)由0-9之间的任意数字组成,可以是整数也可以是小数,数字的范围在正无穷(+infinity)-负无穷(-infinity)之间
数字的最大值:Number.MAX_VALUE //1.7976931348623157e+308数字的最小值:Number.MIN_VALUE //5e-324在程序中,如果看到全部大写的变量命名,那么一般是常量。如果大于最大值,会出现Infinity。![]()
数字是 蓝色的。无穷多个。
(2)
NaN
NaN==NaN //falseNaN与任何值都不相等,包括NaN本身。isNaN()可以检测任何值是不是NaN。alert(isNaN(“blue”));//true,"blue”不能转换为数值。 alert(isNaN(true));//false alert(isNaN(“10”));//false
isNaN()也可以用于检测对象。原则:先调用对象的valueOf()方法,然后确定该方法返回的值是否可以转换为数值,如果不能,再调用toString()方法,再测试返回值。
3、boolean
truefalse
4、undefined
使用var声明但没有初始化。var a;alert(a); //undefinedalert(b);// 报错
5、null
空对象eg:var btn=document.getElementById(‘zhangsan’); //假设zhangsan不存在 alert(btn); //null
undefined和null的区别:undefine表示变量有,但值无;null表示变量没有var btn=document.getElementById(‘zhangsan’); //假设zhangsan不存在 alert(btn); //null 获取不存在的对象,就会返回null
<input id=“lisi” type=“text”/> var btn=document.getElementById(‘lisi’); alert(btn); //[object HTMLinputCollection] alert(btn.value);//空字符串,啥也没有,有value这个属性,但没有值。 alert(btn.name);//空字符串,啥也没有,有name这个属性,但没有值。 alert(btn.sex);//undefined,默认没有sex这个属性,会返回undefined
6、引用类型
对象object每个数据是由键值对组成的,数据可以是0个,也可以是多个,每个数据之间用逗号隔开,最后一个数据类型不能加逗号(加了在IE低版本下会报错)键名:不满足变量命名规则的需要加双引号或者单引号(数字除外)。采用对象字面量的定义:var obj={ name:'zhangsan’, age:18, 'background-color’:’red’, 1:3 }; var person={ name:"wang", age:30, height:’180cm’, weight:’100kg’, 'girl-friend': null };
采用构造函数声明:var o=new Object();
Object的每个实例都具有下列属性和方法:constructor:hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中欧是否存在(而不是在实例的原型里)isPrototypeOf(object):propertyIsEnumerable(propertyName):toLocaleString():toString():valueOf():
二、typeof
检测数据类型,返回这个类型对应的字符串
(全小写)
返回的结果与系统中定义的类型是有区别的,比如返回string,定义的是首字母大写的。
有什么用呢?
比如淘宝购买数量输入框中判断是否是数字。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" placeholder="请输入数字" id="text"/>
<button id="btn">点我</button>
<script>
document.getElementById("btn").οnclick=function(){
var num=document.getElementById('text').value;
console.log(num);//num是一个字符串数字,比如输入123,输出是带引号的“123”
console.info(typeof num);//‘string’
if(typeof num=='number'){
alert('is a number');
}else{
alert('not a number');
}
num=Number(num);
console.log(num);//数字,但如果输入不是一个数,这是强行转,不好
console.info(typeof num);//‘number’
if(typeof num=='number'){
alert('is a number');
}else{
alert('not a number');
}
}
</script>
</body>
</html>
这里有一个表格,表示typeof返回的数据类型。
系统定义的数据类型 | typeof返回的数据类型 |
String | string |
Number | number |
Boolean | boolean |
Undefined | undefined |
Null | object |
Object | object |
三、数据类型转换
js支持任意值转化成Number,boolean,String
1、任意类型转数字
Number(要转换的值) 把任意类型转化成数字(NaN也是数字的一种)
要转换的类型 | 例子 | 转换后的值 |
Undefined | undefined | NaN |
Null | null | 0 |
Boolean | true/false | 1/0 |
String | '' | 0 |
' ' | 0 | |
'你好' | NaN | |
‘012’ | 12 | |
‘12a’ | NaN |
总结:
空字符串,空格字符串转数字结果是0
字符串里的内容是否是纯数字,如果是个纯数字的话,就转成对应的数字;
如果不是纯数字,那结果就是NaN。
Number类型转数字还是原来的数字,没有意义
Object转数字类型,没有意义,结果不定
{} //NaN
{name:”wang”}//NaN
[]//0
[3]//3
[’nihao’]//NaN
2、字符串转数字
parseInt() 把字符串转成整数型数字
parseFloat()把字符串转成浮点型(小数)数字
传进来的字符串必须是数字或者空格加数字开头,它会从数字开始,一位一位往后找,直到找到的字符串不是数字就会停止,会把找到的数字转化成真正的数字,如果没找到那就返回NaN。
当然也有例外,如果传入的是字母,再加上基数,也是可以的。
精度问题:
0.1+0.2==0.3 //false
3、isNaN()
真正的作用不是判断一个值是不是数字,而是判断一个值是不是NaN。
在判断时,会先把参数用Number()方法转换一下。
typeof(NaN)会返回number
typeof(123)也会返回number
所以没法区分NaN,123
可以用isNaN(),
isNaN(NaN)返回true,
isNaN(123)返回false
4、任意类型转字符串
控制台中字符串是灰色的,数字是蓝色的。
要转化的类型 | 转换后的值 |
Undefined | 'undefined' |
Null | 'null' |
Number | 把数字加引号 |
Boolean | true->'true' flase->'false' |
String | 自身 |
Object | 给对象加一对引号 |
5、任意类型转布尔值
要转化的类型 | 转换后的值 |
Undefined | false |
Null | false |
Number | 0->false NaN->false Infinity->true 非零数字->true |
Boolean | 自身 |
String | ''->false ' '->true '你好'->true |
根据语义判断,语义上相当于’没有’,’无’,’空’,’零’,’非数字‘的就是false,有就是true
比如Undefined、Null类型,
6、隐式类型转换
(1)显示类型转换
通过一些方法,很明确的将某种数据类型转换为另一种数据类型
Number()、parseInt()、parseFloat()明确将数据转数字类型
String()明确将数据转化成字符串
Boolean()明确将数据转换成布尔值
(2)隐式类型转换
在进行一些操作的时候,根本目的不是做类型转换。但是如果要进行操作的话,那数据必须符合某种类型。
js会在内部对数据进行一些转换。