JavaScript基础（三） （数据类型）

一、数据类型

JS将数据类型分为基本数据类型和复杂数据类型
基本数据类型：
数字型(number)、字符串型(string)、布尔型(boolean)、未定义型(undefined)、空型(null)
复杂数据类型：
object

1、 数字型

JavaScript中的数字型可以用来保存整数或浮点数（小数）

var age = 18;   // 整数
var pi = 3.14;    // 浮点数（小数）

1.1 常见的进制

• 八进制数：在数字开头加上0，八进制数由0~7组成，逢8进位
• 十进制数：是组成以10为基础的数字系统，有0~9组成，逢10进位
• 十六进制数：在数字开头加上0x，十六进制数由0-9，a-f组成

1.2 范围：数字型的最大值和最小值

• 最大值：Number.MAX_VALUE，输出结果：1.7976931348623157e+308
• 最小值：Number.MIN_VALUE，输出结果：5e-324

1.3 特殊值

数字型的3个特殊值：Infinity和- Infinity 和NaN：

• Infinity（无穷大） ：如Number.MAX_VALUE*2

• Infinity（无穷小） ：如-Number.MAX_VALUE*2

• NaN（非数值）： 如’abc’ – 100

2、字符串型

字符串是指计算机中用于表示文本的一系列字符，在JavaScript中使用单引号或双引号来包裹字符串。

var str1 = '单引号字符串';
var str2 = "双引号字符串";

2.1单、双引号嵌套：

在单引号字符串中可以直接书写双引号
在双引号字符串中也可以直接书写单引号

var str1 = 'I am a "girl"';	// I am a "programmer"
var str2 = "I'm a 'girl'";	// I'm a 'programmer'
var str1 = 'I'm a girl';	// 单引号错误用法
var str2 = "I'm a "girl"";	// 双引号错误用法
var str3 = 'I am a girl";	// 单双引号混用

2.2 转义符

转义符：在字符串中使用换行、Tab等特殊符号时，可以用转义符来进行转义，转义符以“\”开始。
常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n是newline的意思
’	单引号
"	双引号
\t	tab缩进

2.3 字符串长度

字符串长度：字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

var str1 = 'I\'m a girl';
console.log(str1.length);

输出结果为：

2.4 访问字符串中的字符

访问字符串中的字符：字符串可以使用“[index]”语法按照index（索引）访问字符，index从0开始，一直到字符串的长度减1，如果超过了index最大值，会返回undefined。

var str = 'I\'m a girl';
console.log(str[0]);     // 输出结果：I
console.log(str[1]);     // 输出结果：'
console.log(str[9]);   // 输出结果：l
console.log(str[10]);   // 输出结果：undefined

输出结果如图所示：

2.5 字符串拼接

字符串拼接：多个字符串之间可以使用“+”进行拼接，如果数据类型不同，拼接前会把其他类型转成字符串，再拼接成一个新的字符串。

var str = 'I\'m a girl';
console.log('a' + 'b');      // 字符串相加
console.log('a' + 18);      // 字符串+数值
console.log('_' + true);   // 字符串+布尔值
console.log('12' + 14);   // 字符串+数值
console.log(12 + 14);     // 数值相加

结果如何所示：

2.6 “显示年龄”案例

弹出一个输入框，让用户输入年龄。输入后，单击“确定”按钮，程序弹出来一个警告框，显示内容为“您今年x岁了”，x表示刚才输入的年龄。

	var age = prompt('请输入您的年龄'); // 弹出一个输入框，让用户输入年龄
	var msg = '您今年' + age + '岁了';    // 将年龄与输出的字符串拼接
	alert(msg);                                        // 弹出警告框，输出程序的处理结果

3、布尔型

布尔型通常用于逻辑判断，它有两个值：true和false，表示事物的“真”和“假”。

console.log(true);		// 输出结果：true
console.log(false);	// 输出结果：false
console.log(true + 1);	// 输出结果：2  
console.log(false + 1);	// 输出结果：1

当布尔型和数字型相加的时候， true 的值为1 ，false 的值为 0。

4、undefined和null

4.1 如果一个变量声明后没有赋值，则变量的值就是undefined。下面通过代码演示undefined的使用。

// 演示undefined的使用
console.log(true);		// 输出结果：true
var a;
console.log(a);		// 输出结果：undefined
console.log(a + '_');	// 输出结果：undefined_（字符串型）
console.log(a + 1);	// 输出结果：NaN

4.2 当然给一个变量赋一个null值，下面通过代码演示null值的使用。

var b = null;
console.log(b + '_');	 // 输出结果：null_（字符串型）
console.log(b + 1);             // 输出结果：1（b转换为0）
console.log(b + true);        // 输出结果：1（b转换为0，true转换为1）

二、数据类型转换

1、转换为字符串型

• 利用“+”拼接字符串（最常用的一种方式）
• 利用toString()转换成字符串
• 利用String()转换成字符串
  注意：null和undefined无法使用toSting()方式进行转换；对于数字型的变量，可以在toString()的小括号中传入参数，来进行进制转换。

<script>  
       var num3 = 20;
       var str3 = console.log(num3 + '');  //  +号拼接字符串
       var num1 = 18;
       var str1 = num1.toString();    //  toString()方法
         console.log(str1);
         console.log(typeof(str1));
       var num2 = 19;
       str2 = String(num2);        //  String()方法
         console.log(str2);
         console.log(typeof(str2));   
  
  </script>

2、转换为数字型

• 使用parseInt()将字符串转为整数
• 使用parseFloat()将字符串转为浮点数
• 使用Number()将字符串转为数字型
• 利用算术运算符（-、*、/）隐式转换

<script>  
  var str1 = '12';
  var num1 = parseInt(str1);      //  parsetInt()
  console.log(typeof(num1));
  console.log(num1); 

  var str2 = '12.34';
  var num2 = parseFloat(str2);      //  parseFloat()
  console.log(typeof(num2));
  console.log(num2);

  var str3 = '12';
  var num3 = Number(str3);    //  Number强制转换函数
  console.log(typeof(num3));
  console.log(num3);

  var str4 = '12';
  var num4 = '12'-0;
  console.log(typeof(num4));   //  隐式转换
  console.log(num4);
 
 </script>

打印结果如图所示：

3、转换为布尔型

转换为布尔型使用Boolean()，在转换时，代表空、否定的值会被转换为false，如空字符串、0、NaN、null和undefined，其余的值转换为true。

<script>
    console.log(Boolean(NaN));
    console.log(Boolean(null));
    console.log(Boolean(undefined));
</script>

打印结果为：

三、运算符

1、算术运算符

算术运算符用于对两个变量或值进行算术运算，与数学上的加、减、乘、除类似，常用的算术运算符如下。

运算符	运算	示例	解释说明
+	加	1+5	6
-	减	2-1	1
*	乘	2*3	6
/	除	6/2	3
%	取余数	7%5	2

算术运算符的注意事项：

• 进行四则混合运算时，运算顺序要遵循数学中“先乘除后加减”的原则
• 在进行取模运算时，运算结果的正负取决于被模数（%左边的数）的符号，与模数（%右边的数）的符号无关
• 在开发中尽量避免利用浮点数进行运算，因为有可能会因JavaScript的精度导致结果的偏差
• 使用“+”和“-”可以表示正数或负数

表达式是各种类型的数据、变量和运算符的集合，最简单的表达式可以是一个变量或字面量。
注意：表达式最终都会有一个返回值。

2、递增和递减运算符

使用递增（++）、递减（–）运算符可以快速地对变量的值进行递增和递减操作，它属于一元运算符，只对一个表达式进行操作。

• 前置递增（递减）运算符：递增和递减运算符写在变量前面，返回的是计算后的结果
• 后置递增（递减）运算符：递增和递减运算符写在变量后面，返回的是计算前的结果
• 递增和递减运算符的优先级高于“+”“-”等运算符

3、比较运算符

比较运算符用于对两个数据进行比较，其结果是一个布尔值，即true或false ，常用的比较运算符及用法见下表。

强调一下"="运算符的使用

4、 逻辑运算符

逻辑运算符用于对布尔值进行运算，其返回值也是布尔值。在实际开发中，逻辑运算符经常用于多个条件的判断，常用的逻辑运算符见下表。

逻辑运算符	说明	案例
&&	‘逻辑与’	true && false
II	‘逻辑或’	true II false
！	‘逻辑非’	!true

5、赋值运算符

赋值运算符用于将运算符右边的值赋给左边的变量，常用的逻辑运算符及示例如下。

console.log(Boolean('')) // false
var age = 10;
age += 5;	  // 相当于age = age + 5;
console.log(age);	  // 输出结果：15
age -= 5;	  // 相当于age = age - 5;
console.log(age);	  // 输出结果：10
age *= 10;	  // 相当于age = age * 10;
console.log(age);	  // 输出结果：100

6、 三元运算符

三元运算符是一种需要三个操作数的运算符，运算的结果根据给定条件决定。

语法格式：条件表达式 ? 表达式1 : 表达式2

语法说明：先求条件表达式的值，如果为true，则返回表达式1的执行结果；如果条件表达式的值为false，则返回表达式2的执行结果。

7、运算符优先级

运算符优先级：是指表达式中所有运算符参与运算的先后顺序，优先级如下表。

完结！！