游牧学院

1.3 JavaScript的基本语法
1.5 运算符与表达式

JavaScript基础 1.4 数据类型与变量

在JavaScript中，数据类型和变量是构建任何应用程序的基础。理解这些概念对于编写高效、可维护的代码至关重要。本节将详细介绍JavaScript中的数据类型、变量的声明与使用，以及它们的优缺点和注意事项。

1. 数据类型

JavaScript中的数据类型可以分为两大类：原始数据类型（Primitive Types）和引用数据类型（Reference Types）。

1.1 原始数据类型

原始数据类型是不可变的，包含以下几种：

  1. Number：表示数字，包括整数和浮点数。

    • 优点：支持各种数学运算。
    • 缺点：在处理大数时可能会出现精度问题。
    • 注意事项：使用 Number.isNaN() 来判断是否为NaN。
    let num1 = 42; // 整数
let num2 = 3.14; // 浮点数
console.log(num1 + num2); // 45.14
console.log(Number.isNaN(NaN)); // true

  2. String：表示字符串，文本数据的集合。

    • 优点：可以使用多种方法进行操作，如拼接、查找等。
    • 缺点：字符串是不可变的，任何修改都会生成新的字符串。
    • 注意事项：使用反引号（`）可以创建模板字符串，支持多行和插值。
    let greeting = "Hello, ";
let name = "World!";
console.log(greeting + name); // Hello, World!
console.log(`Hello, ${name}`); // Hello, World!

  3. Boolean：表示布尔值，只有两个值：true 和 false。

    • 优点：用于条件判断，控制程序流。
    • 缺点：仅限于两个值，无法表示其他状态。
    • 注意事项：在条件语句中，任何非零数字、非空字符串和对象都被视为 true。
    let isActive = true;
if (isActive) {
    console.log("Active");
}

  4. Undefined：表示未定义的值。

    • 优点：可以用来表示变量未被赋值。
    • 缺点：可能导致错误，尤其是在未初始化的情况下。
    • 注意事项：使用 typeof 可以检查变量类型。
    let uninitialized;
console.log(uninitialized); // undefined
console.log(typeof uninitialized); // "undefined"

  5. Null：表示空值或无值。

    • 优点：可以明确表示变量的“无”状态。
    • 缺点：与 undefined 的区别可能会引起混淆。
    • 注意事项：typeof null 返回 "object"，这是一个历史遗留问题。
    let emptyValue = null;
console.log(emptyValue); // null
console.log(typeof emptyValue); // "object"

  6. Symbol（ES6引入）：表示唯一且不可变的值。

    • 优点：可以用作对象属性的唯一标识符，避免属性名冲突。
    • 缺点：不支持自动转换为字符串。
    • 注意事项：每个Symbol都是唯一的，即使它们的描述相同。
    const uniqueId = Symbol("id");
const obj = {
    [uniqueId]: 123
};
console.log(obj[uniqueId]); // 123

  7. BigInt（ES11引入）：表示任意精度的整数。

    • 优点：可以处理大于 Number.MAX_SAFE_INTEGER 的整数。
    • 缺点：不支持与 Number 类型的直接运算。
    • 注意事项：使用 n 后缀来表示 BigInt。
    const bigIntValue = BigInt(123456789012345678901234567890);
console.log(bigIntValue); // 123456789012345678901234567890n

1.2 引用数据类型

引用数据类型是可变的，主要包括：

  1. Object：表示键值对的集合。

    • 优点：可以存储复杂数据结构。
    • 缺点：在比较时，两个对象即使内容相同也不相等。
    • 注意事项：使用 Object.keys() 可以获取对象的所有键。
    const person = {
    name: "Alice",
    age: 30
};
console.log(person.name); // Alice

  2. Array：特殊类型的对象，用于存储有序集合。

    • 优点：提供丰富的方法来操作集合。
    • 缺点：数组的长度是动态的，可能导致性能问题。
    • 注意事项：数组的索引是从0开始的。
    const fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // banana

  3. Function：特殊的对象，可以被调用。

    • 优点：支持高阶函数和回调。
    • 缺点：可能导致复杂的嵌套和回调地狱。
    • 注意事项：函数也是对象，可以拥有属性和方法。
    function greet() {
    console.log("Hello!");
}
greet(); // Hello!

2. 变量的声明与使用

在JavaScript中，变量可以通过 var、let 和 const 进行声明。

2.1 var

  • 优点：可以在函数作用域内声明变量。
  • 缺点：存在变量提升（hoisting）的问题，可能导致意外的行为。
  • 注意事项：不推荐在现代JavaScript中使用。
function example() {
    console.log(x); // undefined
    var x = 5;
    console.log(x); // 5
}
example();

2.2 let

  • 优点：块级作用域，避免了变量提升的问题。
  • 缺点：在同一块作用域内不能重复声明。
  • 注意事项：推荐在现代JavaScript中使用。
{
    let y = 10;
    console.log(y); // 10
}
// console.log(y); // ReferenceError: y is not defined

2.3 const

  • 优点：声明常量，确保变量不会被重新赋值。
  • 缺点：必须在声明时初始化，且对于对象和数组，内容是可变的。
  • 注意事项：推荐用于不需要重新赋值的变量。
const z = 20;
// z = 30; // TypeError: Assignment to constant variable.
const arr = [1, 2, 3];
arr.push(4); // 允许修改内容
console.log(arr); // [1, 2, 3, 4]

3. 总结

理解JavaScript中的数据类型和变量的使用是编写高效代码的基础。原始数据类型和引用数据类型各有优缺点，选择合适的类型和变量声明方式可以提高代码的可读性和可维护性。在实际开发中，推荐使用 let 和 const 来声明变量，避免使用 var，以减少潜在的错误。

通过本节的学习，您应该能够更好地理解JavaScript的数据类型和变量的使用，为后续的学习打下坚实的基础。

1.3 JavaScript的基本语法
1.5 运算符与表达式