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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
终于听上了直流胆调频
2021/03/02 无线电
php $_ENV为空的原因分析
2009/06/01 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
浅谈PHP的反射机制
2016/12/15 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
python中实现控制小数点位数的方法
2019/01/24 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
保研推荐信
2014/05/09 职场文书
优秀家长事迹材料
2014/05/17 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
综治工作心得体会
2014/09/11 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
工作收入住址证明
2014/10/28 职场文书
事业单位岗位说明书
2015/10/08 职场文书
六年级作文之预言作文
2019/10/25 职场文书