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利用div背景,做一个竖线的效果。
Nov 22 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 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获取操作系统语言代码
2013/11/04 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
详解YII关联查询
2016/01/10 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python 解析html之BeautifulSoup
2009/07/07 Python
python使用递归解决全排列数字示例
2014/02/11 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
python可视化text()函数使用详解
2020/02/11 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
通过自学python能找到工作吗
2020/06/21 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
高中数学教师求职信
2013/10/30 职场文书
校园活动策划书范文
2014/01/10 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
初中家长评语和期望
2014/12/26 职场文书
年终工作总结范文
2019/06/20 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS