JavaScript 变量与数据类型详解

JavaScript 变量与数据类型详解

1. 变量：存储数据的小容器

变量是用来存储数据的容器。在程序中，变量类似于一个盒子，可以用来存储和操作各种类型的数据。变量本身并不包含数据，它只是一个指向数据的引用。我们可以通过给变量起名字，来方便地访问和操作数据。

1.1 声明变量

要使用变量，首先需要声明它。声明变量是告诉 JavaScript 我们将要使用一个名字为 variableName 的变量。声明变量的基本语法是：

let variableName;

其中，let 是声明变量的关键字，variableName 是变量的名字。例如：

let age;

在上面的例子中，我们声明了一个名为 age 的变量，但并没有给它赋值。此时 age 变量的值是 undefined。

1.2 赋值

声明变量后，我们可以给它赋值。赋值是将一个数据存储到变量中。基本的赋值语法是：

variableName = value;

例如：

age = 25; // 现在 `age` 变量存储了值 25
console.log(age); // 输出 25

你也可以在声明的时候直接给变量赋值：

let age = 25;

1.3 更新变量

变量的值可以随时更新，但在同一个作用域中，变量只能被声明一次。如果你再次使用 let 声明同一个名字的变量，JavaScript 会报错。

let age = 25;
age = 30; // 更新 `age` 变量的值为 30

1.4 变量命名规则

• 规则:

  • 变量名不能使用 JavaScript 的保留关键字（如 let、if、for 等）。
  • 变量名只能包含字母、数字、下划线 _ 和美元符号 $，但不能以数字开头。
  • 变量名是区分大小写的，例如 Age 和 age 是两个不同的变量。

• 规范:

  • 变量名应该具有描述性，能清晰地表达变量的用途。
  • 使用小驼峰命名法（第一个单词首字母小写，后续单词首字母大写），如 userName 和 totalAmount。

2. 常量

常量是那些值不会改变的数据。在 JavaScript 中，常量用 const 关键字声明。一旦声明了常量并赋值，就不能再修改它的值。常量通常用于存储那些在整个程序中不会改变的值，比如数学常数或配置项。

const PI = 3.14159;

• 常量的特点:
  • 必须在声明时初始化赋值。
  • 不能重新赋值，尝试重新赋值会导致错误。
  • 常量在声明时就必须赋值，不能只声明而不赋值。

3. 数据类型

JavaScript 中的变量可以存储不同类型的数据，这些数据类型主要分为两类：基本数据类型和引用数据类型。

3.1 基本数据类型

• number: 表示数字，包括整数和浮点数。

  let age = 25; // 整数
  let temperature = 23.5; // 浮点数
  

• string: 表示文本字符串，可以用单引号、双引号或反引号包裹。

  let name = '张三';
  let greeting = "你好，世界！";
  let message = `欢迎，${name}！`;
  

• boolean: 表示布尔值，只有两个可能的值：true 和 false。

  let isActive = true;
  let isLoggedIn = false;
  

• undefined: 表示变量声明了但没有赋值。未初始化的变量的默认值是 undefined。

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

• null: 表示空值或无值。null 是一个显式的空值，与 undefined 不同，它表示一个已知的空值。

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

3.2 引用数据类型

• object: 表示对象，是存储多种数据类型的复合数据类型。对象由键值对组成，可以包含不同的数据类型，包括其他对象。

  let person = {
    name: '李四',
    age: 30,
    isMarried: true
  };
  

4. 字符串的使用

字符串是由字符组成的文本。你可以使用单引号 '、双引号 " 或反引号 ` 包裹字符串。反引号支持多行字符串和内嵌表达式。

4.1 单引号和双引号

let singleQuoted = '你好，世界！';
let doubleQuoted = "你好，世界！";

• 单引号和双引号在功能上是等价的，可以根据需要选择使用。
• 如果字符串中包含引号，应该选择另一种引号来避免冲突，例如 '我很高兴' 是合法的，而 '我很高兴' 是非法的。

4.2 模板字符串

模板字符串使用反引号 ` 包裹，可以在其中插入变量和表达式：

let name = '王五';
let age = 25;
let message = `我的名字是 ${name}，我今年 ${age} 岁。`;
console.log(message); // 输出 "我的名字是 王五，我今年 25 岁。"

• 模板字符串支持多行文本和内嵌表达式，可以使字符串操作更加方便。

5. 数字运算

JavaScript 支持常见的算术运算符：+（加）、-（减）、*（乘）、/（除）和 %（取模）。

5.1 基本算术运算

let a = 10;
let b = 5;

let sum = a + b; // 加法
let difference = a - b; // 减法
let product = a * b; // 乘法
let quotient = a / b; // 除法
let remainder = a % b; // 取模

5.2 运算优先级

• 算术运算符的优先级决定了它们在表达式中被计算的顺序。例如，乘法和除法的优先级高于加法和减法。

• 可以使用圆括号 () 来改变运算顺序。

  let result = (a + b) * 2; // 先计算 a + b，然后乘以 2
  

6. 模板字符串

模板字符串是一种更强大的字符串格式化工具。它使用反引号 ` 包裹，可以直接在字符串中插入变量和表达式。

6.1 内嵌表达式

let price = 29.99;
let message = `商品的价格是 ￥${price}。`;
console.log(message); // 输出 "商品的价格是 ￥29.99。"

6.2 多行字符串

let multiline = `这是一个
可以跨越多行的
字符串。`;
console.log(multiline);

7. 检测数据类型

使用 typeof 运算符可以检测数据的类型。它返回一个表示数据类型的字符串。

console.log(typeof 42); // 输出 "number"
console.log(typeof '你好'); // 输出 "string"
console.log(typeof true); // 输出 "boolean"
console.log(typeof undefined); // 输出 "undefined"
console.log(typeof null); // 输出 "object" （这是一个历史遗留的错误）

8. 类型转换

JavaScript 提供了多种方法来将不同类型的数据进行转换，例如将字符串转换为数字，或者将其他类型的值转换为字符串。

8.1 将字符串转换为数字

• Number(): 将字符串转换为数字，如果字符串无法转换，则返回 NaN。

  let str = "123";
  let num = Number(str);
  console.log(num); // 输出 123
  

• parseInt(): 将字符串转换为整数，可以指定进制，忽略其他非数字字符。

  let str = "123abc";
  let num = parseInt(str);
  console.log(num); // 输出 123
  

• **parseFloat()

**: 将字符串转换为浮点数，忽略其他非数字字符。

let str = "123.45abc";
let num = parseFloat(str);
console.log(num); // 输出 123.45

8.2 将其他类型转换为字符串

• String(): 将其他数据类型转换为字符串。

  let num = 123;
  let str = String(num);
  console.log(str); // 输出 "123"
  

• 使用 toString() 方法: 许多对象都有 toString() 方法，可以将其转换为字符串。

  let bool = true;
  let str = bool.toString();
  console.log(str); // 输出 "true"
  

9. 常见错误和 NaN

在进行数学运算时，有些操作可能导致计算错误，结果为 NaN（Not a Number）。NaN 表示计算结果不是有效的数字。

9.1 产生 NaN 的情况

• 非法的数学运算: 例如，尝试将字符串与数字进行运算。

  let result = 'hello' - 2;
  console.log(result); // 输出 NaN
  

• 未定义的操作: 例如，对负数取平方根。

  let result = Math.sqrt(-1);
  console.log(result); // 输出 NaN
  

9.2 检测 NaN

• 使用 isNaN(): 检测一个值是否为 NaN。注意，isNaN() 会将非数值类型转换为数字，这可能导致意外结果。为了准确检测 NaN，可以使用 Number.isNaN()。

  let value = NaN;
  console.log(isNaN(value)); // 输出 true
  
  let value2 = 'hello';
  console.log(isNaN(value2)); // 输出 true, 因为 'hello' 转换为 NaN
  
  console.log(Number.isNaN(value)); // 输出 true
  

10. 常用方法和运算符

10.1 字符串方法

• length: 获取字符串的长度。

  let str = "你好";
  console.log(str.length); // 输出 2
  

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

  let str = "hello";
  console.log(str.toUpperCase()); // 输出 "HELLO"
  

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

  let str = "HELLO";
  console.log(str.toLowerCase()); // 输出 "hello"
  

• trim(): 去除字符串首尾的空格。

  let str = "  hello  ";
  console.log(str.trim()); // 输出 "hello"
  

10.2 数学方法

• Math.round(): 对数字进行四舍五入。

  let num = 2.5;
  console.log(Math.round(num)); // 输出 3
  

• Math.ceil(): 向上取整。

  let num = 2.1;
  console.log(Math.ceil(num)); // 输出 3
  

• Math.floor(): 向下取整。

  let num = 2.9;
  console.log(Math.floor(num)); // 输出 2
  

• Math.max() 和 Math.min(): 返回一组数中的最大值或最小值。

  let max = Math.max(1, 5, 7, 3);
  let min = Math.min(1, 5, 7, 3);
  console.log(max); // 输出 7
  console.log(min); // 输出 1