JavaScript数据类型转换的注意事项
更新时间：2016年07月31日 11:53:19 作者：埃索达短剑
JavaScript是一种无类型语言，但同时JavaScript提供了一种灵活的自动类型转换的处理方式。基本规则是，如果某个类型的值用于需要其他类型的值的环境中，JavaScript就自动将这个值转换成所需要的类型。
1.字符串的不可变性
字符串定义了后，会一直占据内存空间，企鹅该处内存空间（栈）不可被重新赋值。
2.短路运算
||、&& 二元运算符，返回参与运算的操作数的原值（原数据类型和原数据），
运算结束后，返回导致运算结束的那个操作数。
3.三元运算符
code1？code2：code3; 与if-else 不同：
返回code2或code3的值----code2，code3 都可以空的{}代替；
不能写break，continue。
4.NaN
NaN ！=NaN，
任何NaN参与的数学运算，其结果都是NaN
有NaN参与的条件表达式: 比较运算符 >/>=/</<=/==/=== 运算结果为false
！==/！= 运算结果为true
<script>
var a;
console.log(Boolean(NaN>=4));
console.log(Boolean(NaN<4));
console.log(Boolean(NaN=4));
console.log(Boolean(NaN==4));
console.log(Boolean(a=4));
console.log(NaN);
console.log(a);
if(NaN==NaN){
a = "NaN==NaN";
}
var b;
if(NaN!==NaN){
b = "NaN!=NaN";
}
console.log(a+"\n"+b);
</script>
5. JS 简单数据类型的转换---特殊情况演示
数据：0，“”，false，null，undefined,"123abc"等
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
line-height: 24px;
margin: 0;
padding: 0;
}
.one {
width: 920px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -460px;
margin-top: -240px;
}
.all {
float: left;
border: 2px solid #000000;
}
.all-top {
font-size: 20px;
font-weight: bold;
}
.all-bottom {
line-height: 48px;
font-size: 16px;
}
.details {
float: left;
border: 2px solid #000000;
line-height: 24px;
margin-left: -2px;
}
.details:hover {
position: relative;
border: 2px solid #ff0000;
}
.line-long {
border-top: 2px solid #000000;
height: 0;
width: 908px;
}
.line-short {
border-top: 2px dashed #000000;
height: 0;
width: 742px;
margin-left: 166px;
}
</style>
<script>
document.write("<div class='one'>");
function f1() {
return typeof res[res.length - 1];
}
var arr = [0, "", false, null, undefined, NaN, 6.66, -9, "abc124", "-12.23abc23", "qwer", "s s"];
document.write("<div class='all'><div class='all-top'>" + " 原数据及类型" + "</br>" + "转换方法 </div>" + "<div class='all-bottom'>" + "+" + "</br>" + "Number()" + "</br>" + "parseInt()" + "</br>" + "parseFloat()" + "</br>" + "\"\"" + "</br>" + ".toString" + "</br>" + "String()" + "</br>" + "!!" + "</br>" + "Boolean()" + "</br>" + "</div></div>")
for (var i = 0; i < arr.length; i++) {
switch (true) {
case arr[i] === "":
{
var res = ['""'];
break;
}
default :
{
var res = [arr[i] + ""];
}
}
res[res.length] = typeof arr[i];
res[res.length] = +arr[i];
res[res.length] = f1();
res[res.length] = Number(arr[i]);
res[res.length] = f1();
res[res.length] = parseInt(arr[i]);
res[res.length] = f1();
res[res.length] = parseFloat(arr[i]);
res[res.length] = f1();
res[res.length] = arr[i] + "";
res[res.length] = f1();
if (i == 3 || i == 4) {//null 和undefined没有.toString()方法，导致报错
res[res.length] = "报错";
res[res.length] = "报错";
} else {
res[res.length] = (arr[i]).toString();
res[res.length] = f1();
}
res[res.length] = String(arr[i]);
res[res.length] = f1();
res[res.length] = !!arr[i];
res[res.length] = f1();
res[res.length] = Boolean(arr[i]);
res[res.length] = f1();
var resString = res.join("<br>");
document.write("<div class='details'>" + resString + "</br>" + "</div>");
}
var j = 22;
for (var i = 0; i < 9; i++) {
document.write("<div class='line-short' style='margin-top:" + j + "px'></div>")
document.write("<div class='line-long' style='margin-top:" + j + "px'></div>")
}
document.write("</div>");
</script>
</head>
<body>
</body>
</html>
以上就是本文给大家分享的全部内容了，希望大家能够喜欢
相关文章
放大镜大家在各大网站都能见到，下面小编给大家分享一段 ，代码是基于原生js实现的放大镜效果，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-10-10
本文主要介绍了JS电梯导航的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了JS+DIV+CSS实现仿表单下拉列表效果,涉及javascript鼠标事件及页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
现在流行面向对象,JavaScript当然要迎头赶上. 有说法JavaScript就是彻头彻尾的OO语言,但我觉得JavaScript实现面向对象的程序还是有诸多不便的.2009-05-05
下面小编就为大家了一篇判断JS对象是否拥有某属性的方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
下面小编就为大家带来一篇js获取元素的外链样式的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本文主要分享了原生JS实现图片左右不停运动的完整示例代码，可直接保存到HTML文档打开可以查看效果。下面跟着小编一起来看下吧2016-12-12
这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的记账本，文中的示例代码讲解详细，感兴趣的小伙伴可以和小编一起学习一下2023-01-01
这篇文章主要介绍了javascript代码混淆与加解密方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
Vant+postcss-pxtorem 实现浏览器适配功能
这篇文章主要介绍了Vant+postcss-pxtorem 实现浏览器适配,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
最新评论