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操纵OGNL标签示例代码
Jun 16 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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 array_merge函数
2014/08/31 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
python的mysqldb安装步骤详解
2017/08/14 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python实现对输入的密文加密
2019/03/20 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
应聘教师自荐信
2013/10/12 职场文书
高级方案规划工程师岗位职责
2013/11/29 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
测量工程专业求职信
2014/02/24 职场文书
参观接待方案
2014/03/17 职场文书
六一儿童节主持词
2014/03/21 职场文书
学校文明单位申报材料
2014/05/06 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
六年级学生期末评语
2014/12/26 职场文书
民事二审代理词
2015/05/25 职场文书
单位接收证明格式
2015/06/18 职场文书
创业计划书之书店
2019/09/10 职场文书