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 相关文章推荐
js压缩利器
Feb 20 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
Vue的生命周期操作示例
Sep 17 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/18 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
picChange 图片切换特效的函数代码
2010/05/06 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
js select option对象小结
2013/12/20 Javascript
javascript类型转换示例
2014/04/29 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
Element Input组件分析小结
2018/10/11 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
python简单判断序列是否为空的方法
2015/06/30 Python
批处理与python代码混合编程的方法
2016/05/19 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python urllib.request对象案例解析
2020/05/11 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
PHP面试题附答案
2015/11/28 面试题
日语专业推荐信
2013/11/12 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
班级活动策划书
2014/02/06 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书