一.JS的数据类型:
1.判断数据类型的的方法:typeof(数据)
;
2.数据类型详细介绍:
a.数字类型number
:如,var i=100;
b.字符串类型(这里主要说数字字符串)string
:如,var s="100px"
s.length
统计字符串中字符的总个数
s.charAt(下标值)
获得()里下标处的字符
c.函数类型function
:如,var fn=function(){};
d.对象类型object
:如,var obj=document;
对象类型的补充:
A.object可以像我们页面元素一样添加自定义属性 obj.abc = 123;用obj.abc或者document.abc都可以访问到它
B.还可以obj.fn1 = function(){alert(1)};把一个函数起个名并赋给了obj,通过obj.fn1()可以访问到它
C.数组也是obj,数组添加的方法(arr.push(x,y,z))
,向arr数组里添加x,y,z,因此也可以加自定义属性和函数 (不推荐)
D.var json = {num:1,name:'会长',age:28}
,利用json.name的方式操作属性
例如,alert(“第”+json.num+”人”+json.name+”今年”+json.age+”啦”)
e.布尔值boolean
:其值有ture和false两个;
f.空对象null
:如,var n=null
。空对象也属于object类型,只是空对象不能添加自定义属性等内容
g.未定义undefined
:如,var n;
定义变量不初值,会导致该变量的状态显示为undefined,一般出现这个提示的时候都是出错的时候。
二.数据类型的转换
1.显式的转换方法
a.Number(a);
这是一种将数据转换为数字类型的方法。例如,空鹤空格会被转为0;布尔值会被转为1和0;null会被转为0;函数、json、未定义的对象会被转为NaN;特殊的数组如果为空或者只有一个数据时,会根据里面的数据像转化数字字符串的方法一样转换,多个数据时会变成 NaN…
注:Number()方法的缺点:例如Number(‘100’),它会将数字字符‘100’转为数字100;而当字符串是‘100px’这种时,它无法转换,最终转为NaN。就是说在转换字符串时存在bug,一般用得比较少
b.parseInt(a)
方法:从字符串的左到右依次转换,当遇到非数字字符后将前面的内容全部输出。
注:会识别一些特殊的符号(+ - 空格);遇到非字符串会变成NaN;只能将结果转换为整数,会自动舍去小数点后面的部分;parseInt(10,10)
表示将10转换为十进制的数;
c.parseFloat(a)
方法:用法同parseInt(a)
但是该方法会保留小数;
2.隐式的转换方法
a.- * / %
会让数字字符串和数字的运算结果转换成数字类型;
b.++ --
可以让数字字符串转换成数字
c.而+会让任意字符串和数字的运算变成字符串类型
d.> <
会让字符串和数字的比较正确显示,但是两个字符串不行,如:’10’>9和’10’>’9’,字符串的比较是一位一位的比较,第一位如果比出来后面就不会再比较了
e.!
取反,一个字符串或数字放在if判断里为真,所以取反会变成false,最后结果一定是布尔值
f.==
如果两边相同(即使不同类型,如:’2’和2),就相等
3.无论是哪种转换方法,如果无法正常转换就会返回NaN
,接下来介绍一下NaN
:
a.NaN
:(not a number)是number
类型。不过就是转换数字类型的过程中失败的产物,但是最终还是变成了number类型。因此一旦出现了NaN
代表代码中进行了非法的操作。
b.NaN
转换成布尔类型值为false;
c.NaN
与其他所有类型都相等,就是于自己不相等,相当诡异。
4.判断是否为数字的方法isNaN(a)
a.如果函数值返回false,证明是数字;
b.如果函数值返回ture,证明不是数字;
总结:首先number是数字类型,该类型下有两种数字的表示形式:一是正常的数字形式(如1,2,3…),二是NaN形式;在用isNaN(a)
判断一个变量是否为数字时,该函数内部先执行内部函数Number()
,即先把变量转换为数字类型。若转换成功(转为1,2,3这种)则证明是数字,返回false;若转换失败(转为NaN)则证明不是数字,返回ture
三.JS中的&&和 ||
1.&&
逻辑与。遇到一个false就返回(返回该“假”值得值),其余的不再判断;如果都是ture就返回最后一个值,例如
var n=4&&5&&null&&0;
alert(n);
结果如下:
2.||
逻辑或。遇到一个ture就返回(返回该“真”值的值),后面不再判断;如果都是false则返回最后一个值,例如:
var n=''||null||3||4;
alert(n);
结果如图:
3.&&
的优先级高于||
,例如:
var n=''||null||3||4&&5&&0;
alert(n);
最后,针对今天所学内容给出如下两个例子:
1.代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];
var arr1=[];
var arr2=[];
var arr3=[];
for(var i=0;i<arr.length;i++)
{
if(typeof(arr[i])=='number'&&isNaN(arr[i])==false){
arr1.push(arr[i]);
}
if(parseInt(arr[i])){
arr2.push(arr[i]);
}
if(typeof(arr[i])=='number'&&isNaN(arr[i])){
arr3.push(i);
}
}
var biggest=arr2[0];
for(var i=0;i<arr2.length;i++)
{
if(arr2[i]>biggest){
biggest=arr2[i];
}
}
alert("所有的数字:"+arr1);
document.write("所有的数字:"+arr1+'</br>');
alert("所有可以转成数字的:"+arr2);
document.write("所有可以转成数字的:"+arr2+'</br>');
alert("可以转成数字的最大值:"+biggest);
document.write("可以转成数字的最大值:"+biggest+'</br>');
alert("NaN的位置:"+arr3);
document.write("NaN的位置:"+arr3+'</br>');
/*
1、找到arr里所有的数字:-98765, 34, -2, 0, 5
2、找到可以转成数字的:'100px', -98765, 34, -2, 0, '300', '23.45元', 5
3、把转成数字以后,最大值判断出来:300
4、把 NaN 所在的位置找出来:1 14 17 19
*/
</script>
</head>
<body>
</body>
</html>
2.代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="text" id="input" placeholder="请输入QQ号码" />
<input type="button" value="判断" id="btn" />
<script>
var oInput=document.getElementById("input");
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
if(oInput.value==""){
alert("内容不能为空!");
}else{
if(isNaN(oInput.value)){
alert("QQ号为数字,请输入数字!");
}else if(oInput.value.charAt(0)==0){
alert("QQ号第一位不为零!");
}else if(parseFloat(oInput.value)-parseInt(oInput.value)){
alert("QQ号不能为小数!")
}else if(oInput.value.length<5||oInput.value.length>10){
alert("输入的QQ号必须在5位以上、10位以内!");
}else{
alert("QQ号输入格式正确!");
}
}
}
</script>
<br />
1、有没有输入<br />
2、输入的是不是数字<br />
3、不能有0在前面<br />
4、不能是小数<br />
5、输入的数字必须在5位以上、10位以内<br />
</body>
</html>