唯初 · Blog
0%

变量和数据类型

发表于 更新于
变量和数据类型 学习相关笔记

变量和数据类型

引入JS,动态产生Hello world(document.write)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html><!--形成封闭标签-->
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body><!--显示相关-->
		<!--<div>Hello world</div>-->
		<script type="text/javascript">
		document.write('<div>Hello2 world</div>')
		</script>
	</body>
</html>

jS 代码引入有：页面内嵌代码、外部引入代码（结构、样式、代码，三者分离）。变量是存储信息的容器。

变量命名规则有：

  • 使用描述性的名称，比如：age,sum;
  • 变量必须以字母、$、_开头，后面可以接字母、$、_数字；
  • 变量也能以$和_符号开头（不推荐这么做）；
  • 变量不能使用关键字，保留字；
  • 变量名称对大小写敏感（Javascript 语句和 Javascript 变量都对大小写敏感）。

数据类型有：

  • 原型类型：number,string,boolean,underfined,null；
  • 引用类型：array,object,function

GPO 处理浮点数，而 CPO 处理定点数，如果处理浮点数的话速度非常慢。

进制数表示代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var iNum=86;
document.write('iNum='+iNum+'<br>');
//八进制
var oNum=070;
document.write('oNum='+oNum+'<br>');
//十六进制
var xNum=0x1f;
document.write('xNum='+xNum+'<br>');
//浮点数
var fNum=5.01;
document.write('fNum='+fNum+'<br>');
//浮点数，科学计数法
fNum=5.61e7;
document.write('fNum='+fNum+'<br>');

var INum=Number.MAX_VALUE;
document.write('INum='+INum+'<br>');
1
2
3
4
var INum=Number.MAX_VALUE;
document.write('INum='+INum+'<br>');
var INum=Number.MIN_VALUE;
document.write('INum='+INum+'<br>');

上式代码块分别表示显示出数的最大和最小。

1
2
3
INum=Number.MAX_VALUE*1.1;
document.write('INum='+INum+'<br>');
document.write('INum==Number.POSITIVE_INFINITY='+(INum==Number.POSITIVE_INFINITY)+'<br>');

运行结果为：

1
2
3
4
5
6
iNum=86
oNum=56
xNum=31
fNum=5.01
INum=Infinity
INum==Number.POSITIVE_INFINITYtrue

而如果：

1
2
3
INum=Number.MAX_VALUE*1.1;
document.write('INum='+INum+'<br>');
document.write('INum==Number.POSITIVE_INFINITY='+INum==Number.POSITIVE_INFINITY+'<br>');

则运行结果为：

1
2
3
4
5
6
iNum=86
oNum=56
xNum=31
fNum=5.01
INum=Infinity
false

通过上面例子，可以知道的是：在表达式中，+的优先级大于 ==的优先级。

Javascript中单引号和双引号可以无差别使用。

1
2
3
4
5
var sToken="Hello world";
document.write('sToken='+sToken+'<br>');

sToken='Hello world';
document.write('sToken='+sToken+'<br>');
1
2
sToken=Hello world
sToken=Hello world

转换成数字

  • typeof

  • 隐式

  • 显示

    • Number()

    • parseInt()

    • parseFloat()

    • isNaN

      首先来看 typeof:

      typeof 操作符返回一个字符串，显示计算的操作数的类型。

      代码示例：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      var x=1;
      console.log('[typeof] x ' + typeof(x));  //number

      x='abc';
      console.log('[typeof] x ' + typeof(x));  //string 

      x=true;
      console.log('[typeof] x ' + typeof(x));   //boolean

      x=null;
      console.log('[typeof] x ' + typeof(x));   //object

      x=undefined;
      console.log('[typeof] x ' + typeof(x));   //undefined

      var x2;
      console.log('[typeof] x2 ' + typeof(x2));  //undefined

      隐式类型转换，示例：

      1
      2
      3
      4
      5
      6
      7
      var sNum='2';
      var iNum=2;
      var ret=sNum + iNum;
      console.log('[隐式类型转换]' + typeof ret);//22

      ret=iNum - sNum;
      console.log('[隐式类型转换]' + typeof ret);//0

      看到上面的代码，不知道大家有没有联想到我们之前运算符那块所学的知识点，是的，隐式类型转换跟 + 号运算符的转换类型是一样的。到后面我们学习的知识点会越来越多，希望大家能够做到很好的复习，把前后所学知识点串联在一块，方便知识记忆和检查。

      接下来我们学习显示类型转换中的

      Number() 函数，示例：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      var iNum=Number(false);
      console.log('[Number()] = ' + iNum);   //0

      var iNum=Number(true);
      console.log('[Number()] = ' + iNum);   //1

      var iNum=Number(undefined);
      console.log('[Number()] = ' + iNum);  //NaN

      iNum = Number(null);
      console.log('[Number()] = ' + iNum);  //0

      iNum=Number('8');
      console.log('[Number()] = ' + iNum);   //8,在这边 Number 不分整数和小数

      iNum=Number('1.5');
      console.log('[Number()] = ' + iNum);   //1.5

      iNum=Number('3.5.8');
      console.log('[Number()] = ' + iNum);   //NaN

      iNum=Number(' ');
      console.log('[Number()] = ' + iNum);    //0

      对于这块，有个记忆口诀传授给大家，false,null,’ ‘ =>0; undefined,不是数的 =>NaN。结合上面的代码，大家就可以轻易理解这两句口诀的意义。

      parseInt()

      parse（）的作用是从字符串中非数字的位置切开，只保留数字部分,即完全按照看上去像的方法来 parse，示例：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      var iNum=parseInt('1234');
      console.log('[parseInt()] = ' + iNum); //1234

      iNum=parseInt('13234aa');
      console.log('[parseInt()] = ' + iNum);   //1234

      iNum=parseInt('1.5.5');
      console.log('[parseInt()] = ' + iNum); //1

      iNum=parseInt('100px');
      console.log('[parseInt()] = ' + iNum); //100

      iNum=parseInt('h31213');
      console.log('[parseInt()] = ' + iNum); //NaN

      //C/C++ 中以 0x 开头的表示16进制，而汇编语言中以----h表示16进制
      iNum=parseInt('0xA0');
      console.log('[parseInt()] = ' + iNum);  //160

      //C/C++ 中 0----表示八进制数，但是在 js 中是无效的
      iNum=parseInt('088');
      console.log('[parseInt()] = ' + iNum); //88，仍然以十进制数输出

      iNum=parseInt(' ');
      console.log('[parseInt()] = ' + iNum); //NaN

      iNum=parseInt('1.1E4');
      console.log('[parseInt()] = ' + iNum); //1,在这边科学计数法被当作浮点数来识别
      iNum=parseFloat('1.1E4');
      console.log('[parseInt()] = ' + iNum);   //11000

      iNum=parseInt('A0',16);//转换成 16 进制
      console.log('[parseInt()] = ' + iNum);  //160

      iNum=parseInt('70',8);//转换成 8 进制
      console.log('[parseInt()] = ' + iNum);   //560

      iNum=parseInt(undefined);
      console.log('[parseInt()] = ' + iNum);  //NaN

      iNum=parseInt(null);
      console.log('[parseInt()] = ' + iNum);   //NaN

      iNum=parseInt(false);
      console.log('[parseInt()] = ' + iNum);  //NaN

      学到这，我们已经了解了 Number() 和 parseInt() 两个函数了，那么应该如何记忆这两个函数的区别呢？

      • Number 本质上可以转化为数字，parseInt 是看上去像数字的；

      • Number 可以，parseInt 不可以，例如：false , null , ‘ ‘;

      • Number 不可以，parseInt 可以，比如：数字开头参杂其他的；

      • 都可以，undefined、字母开头的字符串。

        parseFloat()

        parseFloat 和 parseInt 有一些相似之处，大家可以看示例中的代码加以理解：

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        var fNum=parseFloat('10');
        console.log('[parseFloat()] = ' + fNum); // 10

        fNum=parseFloat('1.0');
        console.log('[parseFloat()] = ' + fNum);   //1

        fNum=parseFloat('10.7.6');
        console.log('[parseFloat()] = ' + fNum);   //10.7

        fNum=parseFloat(' 1.0 ');
        console.log('[parseFloat()] = ' + fNum);   //1,空格并不影响结果数值

        fNum=parseFloat('1.0dasf');
        console.log('[parseFloat()] = ' + fNum);   //1

        iNum=parseFloat('1.1E4');
        console.log('[parseInt()] = ' + iNum);   //11000

        fNum=parseFloat('1.1E5aaa');
        console.log('[parseFloat()] = ' + fNum);   //110000

        根据上述代码，大家是否发现其实 parseFloat 和 parseInt 的差别就在于科学计数法和小数点这块，即 parseFloat 支持科学计数法和小数点。

        isNaN()

        isNaN() 主要是调用了 Number() ,请看示例：

        1
        2
        3
        4
        5
        6
        console.log('[isNaN] = ' + isNaN(NaN));  //true
        console.log('[isNaN] = ' + isNaN('aaa'));  //true
        console.log('[isNaN] = ' + isNaN(undefined));  //true
        console.log('[isNaN] = ' + isNaN(null));  //false
        console.log('[isNaN] = ' + isNaN('12345'));  //false
        console.log('[isNaN] = ' + isNaN(' '));  //false
您的支持是对我最大的鼓励