JavaScript数据类型转换的注意事项


Posted in Javascript onJuly 31, 2016

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>

以上就是本文给大家分享的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 #Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 #Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 #Javascript
Javascript中级语法快速入手
Jul 30 #Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 #Javascript
AngularJS ng-bind-template 指令详解
Jul 30 #Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 #Javascript
You might like
PHP实现用户认证及管理完全源码
2007/03/11 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
YII中assets的使用示例
2014/07/31 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
如何在PHP中读写文件
2020/09/07 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
JS常用算法实现代码
2016/11/14 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python 项目转化为so文件实例
2019/12/23 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
Python descriptor(描述符)的实现
2020/11/15 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
音乐教学反思
2014/02/02 职场文书
忠诚教育心得体会
2014/09/03 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
小学少先队活动总结
2015/05/08 职场文书
机械生产实习心得体会
2016/01/22 职场文书