前端javascript基础学习篇二（数据类型）

目录

1、变量的数据类型有哪些

2、简单数据类型和复杂数据类型

3、数字型number

4、isNaN

5、字符串型

6、boolean和undefind和null

7、typeof

8、字面量

9、数字型转换成字符串型

10、转换成数字型

11、转换为布尔值

---

1、变量的数据类型有哪些

1. 整数类型（Integer）
2. 浮点数类型（Floating-point）
3. 布尔类型（Boolean）
4. 字符类型（Character）
5. 字符串类型（String）
6. 数组类型（Array）
7. 对象类型（Object）
8. 函数类型（Function）

---

2、简单数据类型和复杂数据类型

简单数据类型：number、string、boolean、undefined、null

复杂数据类型：数组（Array）、对象（Object）、函数（Function）和类（Class）

---

3、数字型number

1. 整数字面量：直接将一个整数值写在代码中
2. 浮点数字面量：使用小数点表示带有小数部分的数值
3. 指数表示法：通过指数形式来表示很大或很小的数值

---

4、isNaN

全局函数：用于判断一个值是否是 NaN（Not-a-Number）表示一个非数值（例如未定义数学运算的结果）。isNaN() 函数用于检查一个值是否是 NaN。它接受一个参数并返回一个布尔值，如果参数是 NaN 或无法被转换为数值，则返回 true，否则返回 false。

以下是使用 isNaN() 的示例：

console.log(isNaN(42)); // false，42 是一个有效的数值 

console.log(isNaN("42")); // false，字符串 "42" 在转换为数值后仍然是有效的数值

console.log(isNaN("foo")); // true，字符串 "foo" 无法转换为有效的数值 

console.log(isNaN(true)); // false，布尔值 true 被转换为数值 1，是一个有效的数值 

console.log(isNaN(undefined)); // true，undefined 无法转换为有效的数值 

console.log(isNaN(null)); // false，null 被转换为数值 0，是一个有效的数值 

console.log(isNaN([])); // false，空数组被转换为数值 0，是一个有效的数值 

console.log(isNaN({})); // true，对象无法被转换为有效的数值

需要注意的是，isNaN() 函数的参数会首先被转换为数值，然后再进行检查。

如果参数无法被转换为数值，则会返回 true。字符串会尝试转换为等效的数值，而其他类型的值则会根据其本身的特点进行转换。

在某些情况下，可以使用更严格的 Number.isNaN() 方法来判断一个值是否是真正的 NaN，而不会尝试对参数进行转换。例如：

console.log(Number.isNaN(NaN)); // true

console.log(Number.isNaN("foo")); // false 

console.log(Number.isNaN(undefined)); // false

---

5、字符串型

表示文本的数据类型。字符串使用单引号（'）或双引号（"）括起来

字符串是不可变的，这意味着一旦创建字符串，就无法更改它的内容。但是，可以通过字符串连接操作符 + 将两个字符串连接起来生成一个新的字符串。（数值相加，字符相连）

字符串也具有一些内置方法，用于处理和操作字符串。例如，length 属性可以获取字符串的长度，indexOf() 方法可以查找子字符串在字符串中的位置，slice() 方法可以提取子字符串等等。

let str = 'Hello World'; 

console.log(str.length); // 输出字符串的长度（11） 

console.log(str.indexOf('World')); // 输出子字符串 'World' 在字符串中的位置（6） 

console.log(str.slice(6)); // 从位置 6 开始提取子字符串，输出 'World'

toUpperCase() 将字符串转换为大写

toLowerCase() 将字符串转换为小写

trim() 去除字符串两端的空格等等。

---

6、boolean和undefind和null

1. boolean

类型表示逻辑上的真或假。它只有两个可能的值：true（真）或 false（假）。boolean 类型经常用于条件判断和控制流程中的逻辑运算。

let isTrue = true; // 真 

let isFalse = false; // 假

1. undefined

类型表示未定义的值。当变量被声明但没有被赋予一个具体的值时，默认为 undefined。

let undefinedValue; 

console.log(undefinedValue); // 输出 undefined

1. null

类型表示空值或不存在的对象。它是一个特殊的值，用于指示变量不持有任何有效的对象引用。

let emptyValue = null; // 空值

需要注意的是，在条件判断中，null 和 undefined 被视为假的值，而其他值被视为真的值。

if (undefined) { 

     console.log("这段代码不会执行"); 

   } if (null) { 

     console.log("这段代码不会执行"); 
   }

在 JavaScript 中，可以使用严格相等运算符 === 来比较值和类型是否相等，以避免发生类型转换的情况。

console.log(null === undefined); // 输出 false，null 和 undefined 是不同的类型 

console.log(true === 1); // 输出 false，布尔值和数字之间的比较不相等 

console.log(true === true); // 输出 true，布尔值和布尔值之间的比较相等

---

7、typeof

用于获取一个值的数据类型。它返回一个表示数据类型的字符串。

以下是 typeof 运算符的使用示例：

console.log(typeof 42); // 输出 "number" 

console.log(typeof "Hello"); // 输出 "string"

console.log(typeof true); // 输出 "boolean" 

console.log(typeof undefined); // 输出 "undefined" 

console.log(typeof null); // 输出 "object"，这是 typeof 运算符的一个历史遗留问题 

console.log(typeof [1, 2, 3]); // 输出 "object" 

console.log(typeof {key: "value"}); // 输出 "object" 

console.log(typeof function() {}); // 输出 "function"

需要注意的是，typeof 运算符返回的结果是一个字符串。

它可以用来判断一个值的基本数据类型（如 "number"、"string"、"boolean"、"undefined"），也可以用来判断一个值是否为对象或函数（返回 "object" 或 "function"）。

另外，typeof null 返回 "object"，这是 JavaScript 中的一个历史遗留问题，实际上 null 是一个特殊的值，而非对象。要准确判断一个值是否为 null，可以使用严格相等运算符 ===：

console.log(null === null); // 输出 true 

console.log(typeof null); // 输出 "object"

---

8、字面量

通过使用字面量，可以直接表示相应类型的值，而无需使用变量或表达式进行计算或转换。

let number = 42; // 数字字面量 

let string = "Hello"; // 字符串字面量 

let boolean = true; // 布尔字面量 

let object = { name: "John", age: 25 }; // 对象字面量 

let array = [1, 2, 3]; // 数组字面量 

let regex = /^[a-z]+$/i; // 正则表达式字面量

---

9、数字型转换成字符串型

.toString()

let number = 42; 

let str = number.toString(); // 将数字转换为字符串 

console.log(str); // 输出 "42"

使用模板字面量（Template literals）：使用字符串模板语法将数字插入到字符串中，从而将其转换为字符串。

let number = 42; 

let str = `${number}`; // 将数字转换为字符串 

console.log(str); // 输出 "42"

String()

let number = 42; 

let str = String(number); // 将数字转换为字符串 

console.log(str); // 输出 "42"

使用拼接操作符（+）：将数字与空字符串相加，其中一个值为字符串，来将数字转换为字符串。

let number = 42; 

let str = number + ""; // 将数字转换为字符串 

console.log(str); // 输出 "42"

---

10、转换成数字型

parseInt()

let str = "42"; 

let num = parseInt(str); // 将字符串转换为整数 

console.log(num); // 输出 42

parseFloat()

let str = "3.14"; 

let floatNum = parseFloat(str); // 将字符串转换为浮点数 

console.log(floatNum); // 输出 3.14

Number()

let str = "42"; 

let num = Number(str); // 将字符串转换为数字 

console.log(num); // 输出 42 let str2 = "3.14"; 

let floatNum = Number(str2); // 将字符串转换为数字 

console.log(floatNum); // 输出 3.14

另外，如果要将其他数据类型转换为数字类型，可以直接使用数学运算符（如加号 +）进行隐式转换。

let str = "42"; 

let num = +str; // 将字符串转换为数字 

console.log(num); // 输出 42 

let bool = true; 

let num2 = +bool; // 将布尔值转换为数字（true 转为 1，false 转为 0） 

console.log(num2); // 输出 1

---

11、转换为布尔值

Boolean()

let num = 0; 

let bool1 = Boolean(num); // 将数字转换为布尔值 

console.log(bool1); // 输出 false 

let str = "Hello"; 

let bool2 = Boolean(str); // 将字符串转换为布尔值（非空字符串为 true） 

console.log(bool2); // 输出 true 

let arr = []; 

let bool3 = Boolean(arr); // 将数组转换为布尔值（空数组为 false） 

console.log(bool3); // 输出 false

使用双重逻辑非运算符（!!）

let num = 0; 

let bool1 = !!num; // 将数字转换为布尔值 

console.log(bool1); // 输出 false 

let str = "Hello"; 

let bool2 = !!str; // 将字符串转换为布尔值（非空字符串为 true） 

console.log(bool2); // 输出 true 

let arr = []; 

let bool3 = !!arr; // 将数组转换为布尔值（空数组为 false） 

console.log(bool3); // 输出 false

需要注意的是，对于各种数据类型到布尔值的转换规则如下：

• 空字符串、数字0、null、undefined、NaN、false      ===>     false
•  非空字符串、非零数字、非空对象、非空数组、true    ===>     true