###1. JS数据类型及相关操作
ECMAScript:标准、核心
HTML标签类型:block,inline,inline-block,table…
javascript数据类型: Number, String, Boolean, Undefined, Symbol Null Object(obj/[]/{}/null)
typeof判断数据类型: “number”,“string”,“boolean”,“undefined”,“symbol” “function” “object”(obj/[]/{}/null)
###注意事项
1)找出所有的数字
const a = ‘200px’ - 1;
console.log(a); // NaN
因为typeof(NaN) // ‘number’
所以typeof(a) // ‘number’
所以要判断数字的话1.typeof(num) === ‘number’ 2.isNaN(NaN)//true
typeof(num) === ‘number’ && !isNaN(NaN)
2)找出可以转换成数字的
使用parseFloat()
parseFloat() 也是从第一个字符(位置 0)开始解析每个字符。而且
也是一直解析到字符串末尾,或者解析到遇见一个无效的浮点数字字符为止。
parseFloat() 与 parseInt() 的第二个区别在于它始终都会忽略前导
的零。
因为parseFloat(0) // 0
所以判断可以转化成数字:
if(parseFloat(arr[i]) || parseFloat(arr[i]) === 0)
3)找出所有的NaN
还可以通过下面的方式判断(是数字类型又是isNaN)
if(typeof(arr[i]) === ‘number’ && isNaN(arr[i]))
###2. 数据类型转换-Number
Number():可以将类似于数字的字符串转换成数字
var a='100';
alert(Number(a)+100)://200
注意:
var a=‘0000100’//会转成100
var a=’+100’//会转成100
var a=’’;//会转成0
var a=’ ‘;//会转成0
var a=‘true;//会转成1 false会转成0
var a=function(){alert(1);};//会转成NaN
var a=[];//会转成0
var a=[’’];//会转成0
var a=[123];//会转成123
var a=[‘123’];//会转成123
var a=[1,2,3];//会转成NaN
var json=[abc:123];//会转成NaN
var json={};//会转成NaN
var a=null;//会转成0
var a;//会转成NaN
var a=‘100px’;//会转成NaN
###3. parseInt与parseFloat的区别及小技巧
parseInt:提取出来前面是数字的部分
var b='200px1223';
alert(parsrInt(b));//200
注意
var a=’+200px’ //会转成200
var a=‘12.34元’ //会转成12
parseFloat:提取出来前面是小数的部分
var a=‘12.34.1元’ //会转成12.34
小技巧
###4. JS中稀奇古怪的隐式类型转换
显示类型转换(强制类型转换)
Number()
parseInt()
parseFloat()
隐式类型转换
+ //'200'+3 变成字符串
- * / % // '200'-3 变成数字
++ -- //变成数字
> < //数字的比较还是字符串的比较。其中一个是数字,两个都是数字,两个都是字符串,那就是字符串的比较
!取反 //把右边的数据类型转成布尔值
== //判断值
=== //判断类型和值,这个不算强制类型转换
数字的比较和字符串的比较不同,字符串是一位一位的比较
###5. isNaN应用实例
1)NaN
//NaN是false
//NaN和自己都不相等
2)isNaN
isNaN和Number()是好兄弟
alert(isNaN(‘我爱你’)); //true
alert(isNaN(1)); //false
alert(isNaN(function(){alert(1);})); //false
alert(isNaN(‘1’)); //false Number() ‘250’=>250=>false
alert(isNaN(true)); //false
alert(isNaN([])); //false
###6. 测试题
HTML部分:
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 ];
<br>
---------------------------------------------------------------------------------------
<br>
1、找到arr里所有的数字:-98765, 34, -2, 0, 5 <br>
2、找到可以转成数字的:'100px', -98765, 34, -2, 0, '300', '23.45元', 5 <br>
3、把转成数字以后,最大值判断出来:300 <br>
4、把 NaN 所在的位置找出来:1 14 17 19 <br>
<br>
--------------------------------------------------------------------------------------
<br>
<input type="button" value="找出所有数字"/>
<input type="button" value="找出所有可以转换成数字的"/>
<input type="button" value="把转换成数字的最大值找粗来" />
<input type="button" value="把NaN所在位置弹出来" />
<div id="div1"></div>
JS部分:
window.onload = function(){
var aBtn = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');
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 str = '';
var arrMax = [];
//找出所有的数字
aBtn[0].onclick = function(){
for(var i=0; i<arr.length; i++){
//首先 判断数字类型 排除布尔类型 然后!isNaN把过滤后的数字都搞出来
if(typeof(arr[i]) === 'number' && !isNaN(arr[i])){
str += arr[i] + ',';
}
}
oDiv.innerHTML = str;
//防止点击当前按钮,重复生成
str = '';
};
//找出可以转成数字的
aBtn[1].onclick = function(){
for(var i=0; i<arr.length; i++){
//parseFloat会干掉0 所以要加上
if(parseFloat(arr[i]) || parseFloat(arr[i]) === 0){
str += arr[i] + ',';
}
}
oDiv.innerHTML = str;
str = '';
};
//找出转成数字的,并从中找出最大值
aBtn[2].onclick = function(){
for(var i=0; i<arr.length; i++){
//parseFloat会干掉0 所以要加上
if(parseFloat(arr[i]) || parseFloat(arr[i]) === 0){
arrMax.push(arr[i]);
}
}
//把arrMax的第一个值赋给iMax变量,以便后面跟arrMax数组比较,匹配出最大值
var iMax = arrMax[0];
for(var i=0; i<arrMax.length; i++){
//通过iMax一一比较arrMax数组中的数字,然后把比较大的值赋给iMax,从而找出最大值
if(iMax<arrMax[i]){
iMax = arrMax[i];
}
}
oDiv.innerHTML = iMax;
iMax = '';
};
//找出数组arr中NaN所在的位置
aBtn[3].onclick = function(){
for(var i=0; i<arr.length; i++){
//NaN是数字类型 不是数字; 即把不是数字的数字类型筛选出来(字符串和数字的表达式等)
if(typeof(arr[i]) === 'number' && isNaN(arr[i])){
str += i +',';
}
}
oDiv.innerHTML = str;
str = '';
};
};