JS基本数据类型

前言

JavaScript的基本数据类型是这门语言的基石，就像元素周期表中的元素一样，它们构成了JavaScript中所有数据的基础。在编写代码的过程中，理解这些基本数据类型的特性和用法至关重要。让我们以一种轻松有趣的方式，探索这个数据的世界，理解它们是如何互相交织，形成我们编程大厦的坚实结构。

数据类型简介和检测

typeof运算符

使用typeof运算符可以检测值或者变量的类型

在REPL环境中检测：

typeof 5;  //number
typeof '姓名'   // string

5种基本数据类型的typeof检测结果

特殊的数值 NAN

在 JavaScript 中，NaN 表示 “Not a Number”，它是一个特殊的数值，用于表示一个非数字的结果或错误。当数学运算无法产生有效的数值时，就会得到 NaN。以下是关于 NaN 的详细介绍：

1. 产生 NaN 的情况：

• 非数学运算： 当试图将非数字字符串转换为数字时，或者进行无效的数学运算时，结果可能为 NaN。

console.log(parseInt("Hello")); // 尝试将非数字字符串转换为数字，输出 NaN
console.log(0 / 0); // 无效的数学运算，输出 NaN

• 非有限数值： 当进行超出 JavaScript 数值范围的计算时，结果可能为 Infinity 或 -Infinity，而不是 NaN。但在某些情况下，JavaScript 可能会产生 NaN。

console.log(Math.sqrt(-1)); // 尝试对负数取平方根，输出 NaN

1. 检测 NaN：

• isNaN() 函数： 可以使用 isNaN() 函数来检测一个值是否为 NaN。

console.log(isNaN(NaN)); // 输出 true
console.log(isNaN(123)); // 输出 false

• Number.isNaN() 函数： Number.isNaN() 函数是一种更严格的检测方式，仅当传入的值是 NaN 时才返回 true。

console.log(Number.isNaN(NaN)); // 输出 true
console.log(Number.isNaN(123)); // 输出 false

1. 注意事项：

• 不等于自身： NaN 与任何值，包括它自己，都不相等。这意味着使用普通的相等运算符（==）无法检测一个值是否为 NaN。

console.log(NaN == NaN); // 输出 false

• 全局函数 isNaN() 的陷阱： isNaN() 函数在检测之前会尝试将参数转换为数字。如果参数是字符串，它会尝试将字符串转换为数字，而可能产生意外的结果。

console.log(isNaN("123")); // 输出 false，因为 "123" 可以转换为数字 123

总体而言，NaN 是 JavaScript 中用于表示非数字结果的特殊值，经常用于检测数学运算的有效性。在使用 isNaN() 时需要注意其转换行为，而 Number.isNaN() 则提供了更为严格的检测方式。

基本数据类型

数字类型 Number

所有数字不分大小、不分整浮、不分正负，都是数字类型

JavaScript 中的数字类型是 Number，它用于表示数值数据。在 JavaScript 中，所有数字都是浮点数。这意味着无论是整数还是小数，都被表示为浮点数。以下是关于 JavaScript 中数字类型的详细介绍：

1. 整数和浮点数： JavaScript 中的数字可以是整数或浮点数。例如，5 是一个整数，而 5.2 是一个浮点数。
   
2. 浮点数精度： 由于 JavaScript 中使用的是 IEEE 754 标准的浮点数表示，因此在进行浮点数运算时可能存在精度问题。例如，0.1 + 0.2 可能并不等于 0.3，这是由于浮点数的二进制表示方式引起的。

console.log(0.1 + 0.2); // 可能输出 0.30000000000000004

1. 数值范围： JavaScript 的数字范围大约为 -2^53 到 2^53 之间，超出这个范围的整数可能无法精确表示。
   
2. 特殊值： JavaScript 中有一些特殊的数值表示，如 Infinity（正无穷大）和 -Infinity（负无穷大）。还有 NaN（Not a Number），它用于表示不是有效数字的结果，例如 0/0 或者一个无效的数学运算。

console.log(1 / 0); // 输出 Infinity
console.log(-1 / 0); // 输出 -Infinity
console.log(0 / 0); // 输出 NaN

1. NaN： NaN 是一种特殊的数字，用于表示不是数字的值。当执行非法的数学运算时，结果通常为 NaN。

console.log("Hello" / 2); // 输出 NaN

1. 数学运算： JavaScript 提供了一系列的数学运算方法，可以对数字进行加减乘除等操作。还有一些内置的数学函数，如 Math.sqrt（计算平方根）、Math.sin（计算正弦值）等。

let x = 5;
let y = 2;
console.log(x + y); // 加法
console.log(x - y); // 减法
console.log(x * y); // 乘法
console.log(x / y); // 除法

1. 类型转换： JavaScript 中数字类型可以与字符串相互转换。可以使用 parseInt 和 parseFloat 将字符串转换为数字，也可以使用 toString 将数字转换为字符串。

let strNum = "123";
let num = parseInt(strNum); // 将字符串转换为整数
console.log(num + 1); // 输出 124
let floatStr = "3.14";
let floatNum = parseFloat(floatStr); // 将字符串转换为浮点数
console.log(floatNum + 1); // 输出 4.14

总体而言，JavaScript 中的数字类型提供了灵活的数值表示和计算功能，但在处理浮点数时，开发者需要注意处理精度问题。此外，了解数学运算和类型转换的方法对于有效地使用 JavaScript 中的数字类型至关重要。

字符串类型 string

JavaScript 中的字符串类型是 String，用于表示文本数据。字符串是由字符组成的序列，可以包含字母、数字、符号以及其他 Unicode 字符。以下是关于 JavaScript 中字符串类型的详细介绍：

1. 创建字符串： 字符串可以使用单引号 (')、双引号 (") 或反引号/backticks（``）来创建。单引号和双引号在语法上没有区别，但反引号支持多行字符串和模板字符串。

let singleQuotes = 'Hello, world!';
let doubleQuotes = "JavaScript is fun!";
let backticks = `This is a multiline
string with ${variable} interpolation.`;

1. 字符串方法： JavaScript 提供了许多内置的字符串方法，允许对字符串进行各种操作，比如连接、截取、查找等。

let str = 'JavaScript';
console.log(str.length); // 获取字符串长度
console.log(str.charAt(0)); // 获取指定位置的字符
console.log(str.charCodeAt(0)); // 获取指定位置的字符的 Unicode 编码
console.log(str.concat(' is', ' awesome')); // 字符串连接
console.log(str.indexOf('Script')); // 查找子字符串的位置
console.log(str.slice(0, 4)); // 截取字符串的一部分
console.log(str.toUpperCase()); // 转换为大写
console.log(str.toLowerCase()); // 转换为小写
console.log(str.replace('Java', 'Type')); // 替换字符串中的子字符串

1. 字符串与数组： 字符串的每个字符可以像数组一样通过索引访问，但字符串是不可变的，意味着一旦创建，就不能直接修改其中的字符。可以通过一些方法来操作字符串，例如使用 slice 创建新的字符串。

let str = 'Hello';
console.log(str[0]); // 访问第一个字符
console.log(str.charAt(1)); // 也可以使用 charAt 方法
// 字符串是不可变的
// str[0] = 'h'; // 这是无效的
// 使用 slice 创建新的字符串
let newStr = str.slice(0, 3); // 创建 'Hel'

1. 转义字符： 字符串中可以包含转义字符，用于表示一些特殊字符，如换行符 (\n)、制表符 (\t) 等。

let stringWithEscape = 'This is a line\nwith a newline character.';

1. 模板字符串： 使用反引号/backticks（``）创建的字符串支持模板字符串，可以在字符串中插入变量或执行表达式。

let name = 'Alice';
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, Alice!"

总体而言，JavaScript 的字符串类型提供了丰富的方法和特性，使得处理文本数据变得更加灵活。开发者可以利用字符串方法进行各种字符串操作，同时模板字符串也为动态构建字符串提供了便利的语法。

布尔类型 boolean

JavaScript 中的布尔类型是 boolean，用于表示逻辑值，即真（true）或假（false）。布尔类型通常用于控制程序的流程，进行条件判断等。以下是关于 JavaScript 中布尔类型的详细介绍：

1. 创建布尔值： 布尔类型的变量可以直接赋值为 true 或 false。

let isTrue = true;
let isFalse = false;

1. 布尔表达式： 布尔类型常常与比较运算符、逻辑运算符等结合使用，形成布尔表达式，用于进行条件判断。

let age = 20;
let isAdult = age >= 18; // 布尔表达式，判断是否成年
let isTeenager = age >= 13 && age <= 19; // 使用逻辑运算符 && 判断是否是十几岁的青少年

1. 逻辑运算符： 布尔类型支持逻辑运算符，包括与（&&）、或（||）、非（!）等。

let hasMoney = true;
let hasTime = false;
let canBuySomething = hasMoney && hasTime; // 与运算，需要两个条件都为 true
let canDoSomething = hasMoney || hasTime; // 或运算，只需要其中一个条件为 true
let cannotDoSomething = !hasTime; // 非运算，取反

1. 布尔转换：JavaScript 中的其他数据类型可以通过布尔转换成为布尔值。在条件判断中，除了true和false，JavaScript 还会将一些值视为“假值”（Falsy）和“真值”（Truthy）。例如，以下值被视为“假值”：

• false
• 0
• ''（空字符串）
• null
• undefined
• NaN

2. 所有其他值被视为“真值”。

let hasValue = 'Hello'; // 非空字符串，视为真值
if (hasValue) {
    console.log('The value is truthy.');
} else {
    console.log('The value is falsy.');
}

1. 严格相等运算符： 在比较布尔值时，最好使用严格相等运算符 === 或 !==，以避免类型转换带来的不确定性。

let a = true;
let b = 'true';
console.log(a == b); // 不严格相等，会进行类型转换，可能产生不符合预期的结果
console.log(a === b); // 严格相等，不进行类型转换，推荐使用

总体而言，布尔类型在 JavaScript 中用于表示逻辑值，是进行条件判断和控制程序流程的基础。逻辑运算符、布尔表达式以及布尔转换等特性使得 JavaScript 在处理逻辑和条件判断时非常灵活。

undefined类型

在 JavaScript 中，undefined 是一种特殊的数据类型，表示一个未定义或不存在的值。当一个变量声明但未赋值时，或者访问对象的属性值不存在时，JavaScript 会返回 undefined。以下是关于 undefined 的详细介绍：

1. 变量声明但未赋值： 如果一个变量被声明但未被显式赋值，那么它的值就是 undefined。

let x;
console.log(x); // 输出 undefined

1. 访问不存在的属性： 当你尝试访问对象的属性，而该属性不存在时，也会返回 undefined。

let obj = {};
console.log(obj.property); // 输出 undefined

1. 函数调用时缺少参数： 如果你调用一个函数时，但没有提供函数所期望的参数，那么函数中对应的参数将是 undefined。

function exampleFunc(param) {
    console.log(param);
}
exampleFunc(); // 输出 undefined

1. 返回值缺失： 如果一个函数没有明确返回值，那么它的返回值将是 undefined。

function noReturnValue() {
    // 没有 return 语句，返回 undefined
}
let result = noReturnValue();
console.log(result); // 输出 undefined

1. 比较 undefined： 在 JavaScript 中，可以使用 === 运算符来比较值和类型，以判断一个值是否为 undefined。

let x;
console.log(x === undefined); // 输出 true

1. void 操作符： void 操作符可以用来获取 undefined 的原始值，通常用于在 JavaScript 中创建一个返回 undefined 的 IIFE（立即执行函数表达式）。

let undefinedValue = void 0;
console.log(undefinedValue === undefined); // 输出 true

总体而言，undefined 表示缺失或未定义的值，在编写代码时，我们经常使用它来检查变量是否已经初始化，或者检测某个属性是否存在。在避免错误和优化代码时，了解和正确处理 undefined 是很重要的。

null

在 JavaScript 中，null 是一种特殊的数据类型，表示一个空对象指针或者没有对象值。它是一个关键字，不是标识符或变量，可以用来显式地指定一个变量不引用任何对象。以下是关于 null 的详细介绍：

1. 显式赋值为 null： 可以显式地将一个变量赋值为 null，表示该变量不引用任何对象。

let myVar = null;
console.log(myVar); // 输出 null

1. 与 undefined 的区别： null 和 undefined 在 JavaScript 中有着不同的含义。undefined 表示一个变量已声明但尚未被赋值，而 null 表示一个变量已经赋值为一个空对象指针。

let undefinedVar;
let nullVar = null;
console.log(undefinedVar); // 输出 undefined
console.log(nullVar);      // 输出 null

1. 与对象关联： 将对象的变量设置为 null，可以释放对象占用的内存，并告诉 JavaScript 垃圾回收器可以回收这个对象。

let obj = { key: 'value' };
// 将对象变量设置为 null，释放内存
obj = null;

1. typeof 操作符： 使用 typeof 操作符检测 null 时，返回的是字符串 "object"。这是因为在 JavaScript 的早期版本中，null 被错误地认为是对象。

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

1. 严格相等运算符： null 与 undefined 在严格相等运算符 === 中是相等的，但它们的类型不同。

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

1. 应用场景： 在编写代码时，可以使用 null 来表示一个变量或对象属性的初始状态，或者在需要释放对象内存时将其赋值为 null。

let user = null; // 初始状态，表示尚未有用户信息
// ...
// 用户登录后，将 user 赋值为包含用户信息的对象
user = { username: 'john_doe', email: 'john@example.com' };
// ...
// 用户注销时，释放内存
user = null;

总体而言，null 是 JavaScript 中用于表示空对象指针或者缺少对象值的特殊值。了解 null 的特性有助于正确处理变量和对象在不同状态下的情况。

数据类型的转换

在 JavaScript 中，数据类型的转换是常见的操作，因为 JavaScript 是一门弱类型语言，允许在不同类型之间相互转换。数据类型的转换可以分为两种：隐式转换和显式转换。

1. 隐式转换（Implicit Conversion）

隐式转换是 JavaScript 在执行运算或比较时自动进行的类型转换，不需要程序员显式地进行操作。这种转换通常发生在不同数据类型之间的操作中。

let num = 5; // 数字类型
let str = "10"; // 字符串类型
let result = num + str; // 隐式转换为字符串
console.log(result); // 输出 "510"

在上面的例子中，num 是一个数字，str 是一个字符串，当它们进行加法运算时，JavaScript 将数字转换为字符串，然后连接两个字符串。

2. 显式转换（Explicit Conversion）

显式转换是由程序员明确进行的类型转换，使用一些内置函数或操作符来改变数据类型。

2.1. 转为字符串

• String() 函数： 使用 String() 函数可以将其他类型的值转换为字符串。

let num = 123;
let str = String(num); // 显式转换为字符串
console.log(str); // 输出 "123"

2.2. 转为数字

• Number() 函数： 使用 Number() 函数可以将其他类型的值转换为数字。

let str = "456";
let num = Number(str); // 显式转换为数字
console.log(num); // 输出 456

• 如果字符串无法转换为有效的数字，结果将为 NaN（Not a Number）。
• parseInt() 和 parseFloat() 函数： 用于将字符串解析为整数或浮点数。

let str = "123.45";
let num = parseFloat(str); // 解析为浮点数
console.log(num); // 输出 123.45

2.3. 转为布尔值

• Boolean() 函数：使用Boolean()函数可以将其他类型的值转换为布尔值。

let num = 0;
let boolValue = Boolean(num); // 显式转换为布尔值
console.log(boolValue); // 输出 false

• 通常，只有以下情况会转换为false，其他值都会转换为true：

• false
• 0
• ""（空字符串）
• null
• undefined
• NaN

显式转换可以确保在程序中对数据类型的处理更加明确和准确，但需要注意可能引发的类型错误。合理使用类型转换可以有效避免一些潜在的问题。

面试经典题型，经常出错

<script>
        let str = 'abc123';
        let num = parseInt(str);
        console.log(typeof num);   // number
        console.log(typeof str);   // string
        if (num == NaN) {
            alert(NaN);
        } else if (num == 123) {
            alert(123);
        } else if (typeof num == 'number') {
            alert('number');
        } else {
            alert('str');
        }
        // 会弹出一个 number
    </script>

小案例：小小加法计算器

<script>
        // 让用户输入两个数字
        var a = Number(prompt('请输入第一个数字'));
        var b = Number(prompt('请输入第二个数字'));
        // 计算两个数字的和
        var sum = a + b;
        // 弹出结果
        alert('数字' + a + '加上数字' + b + '的结果是' + sum);
    </script>

复杂数据类型简介

在 JavaScript 中，复杂数据类型主要包括对象（Object）、数组（Array）、函数（Function）和其他派生自对象的数据类型。这些数据类型允许我们组织和存储大量数据，执行复杂的操作，并在程序中构建更为复杂的结构。以下是对 JavaScript 中复杂数据类型的简要介绍：

1. 对象（Object）

JavaScript 的对象是一种无序的键值对集合，每个键值对称为对象的属性。对象可以包含基本数据类型、其他对象，甚至是函数。对象是 JavaScript 中最重要的数据类型之一，用于表示复杂的数据结构。

let person = {
    name: "John",
    age: 30,
    isStudent: false,
    sayHello: function() {
        console.log("Hello, I'm " + this.name);
    }
};
console.log(person.name); // 访问对象属性
person.sayHello(); // 调用对象方法

2. 数组（Array）

数组是一种有序的、可变的集合，用于存储一组数据。数组的元素可以是任意类型的数据，包括基本数据类型和复杂数据类型。

let numbers = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "orange"];
console.log(numbers[2]); // 访问数组元素
fruits.push("grape"); // 在数组末尾添加元素

3. 函数（Function）

函数是一种可调用的对象，可以包含可执行的代码块。函数可以接受参数，执行一些操作，并返回一个值。函数也可以作为对象的属性存在，称为方法。

function add(a, b) {
    return a + b;
}
let result = add(3, 5); // 调用函数
console.log(result); // 输出 8

4. 派生自对象的复杂数据类型

在 JavaScript 中还有一些派生自对象的复杂数据类型，比如日期（Date）、正则表达式（RegExp）等。这些数据类型有特定的行为和方法，用于处理与其相关的数据。

let currentDate = new Date();
let regexPattern = /[a-z]+/i;
console.log(currentDate.getFullYear()); // 获取当前年份
console.log(regexPattern.test("Hello")); // 检查字符串是否匹配正则表达式

5. Map 和 Set

ES6 引入了 Map 和 Set 这两种新的数据结构。Map 是一种键值对的集合，其中键和值可以是任意类型。Set 是一种无重复元素的有序集合。

let myMap = new Map();
myMap.set("name", "Alice");
myMap.set("age", 25);
let mySet = new Set([1, 2, 3, 3, 4, 5]);

这些复杂数据类型提供了丰富的功能和灵活性，使得 JavaScript 开发者可以更好地组织和操作数据。不同的数据类型适用于不同的场景，了解它们的特性和用法有助于编写更加清晰、灵活的 JavaScript 代码。

结语

基本数据类型是JavaScript编程中的基石，对于每一位开发者来说都是必须深入理解的概念。通过本文，你不仅将对数字、字符串、布尔值等基础概念有更清晰的认识，同时也将学到如何使用对象和数组等更为复杂的数据结构。愿这篇文章为你在JavaScript的学习之路上点亮一盏明灯，使你更加游刃有余地应对编码的挑战。