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 相关文章推荐
JavaScript全局函数使用简单说明
Mar 11 Javascript
javascript的内存管理详解
Aug 07 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
原生js实现放大镜组件
Jan 22 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中取得image按钮传递的name值
2006/10/09 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
javascript的函数
2007/01/31 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
jsonp原理及使用
2013/10/28 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
VUE重点问题总结
2018/03/19 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
vue自定义指令directive的使用方法
2019/04/07 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
Python闭包思想与用法浅析
2018/12/27 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
铭万公司.net面试题笔试题
2014/07/20 面试题
优秀生推荐信范文
2013/11/28 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
商铺门前三包责任书
2014/07/25 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
清明节寄语2015
2015/03/23 职场文书
师德承诺书2015
2015/04/28 职场文书
婚宴祝酒词大全
2015/08/10 职场文书