理解 JavaScript 变量

介绍

JavaScript 中的**变量**就像存储数据的容器。把它们想象成厨房里贴有标签的罐子——有些装糖，有些装面粉，有些甚至装饼干！🍪 它们使你的代码动态化，使你能够存储和操作信息。

⭐ **变量声明、初始化和命名约定**

1️⃣ **声明**

声明变量意味着创建变量但不赋值。

📌示例：

let name; // Declaration

2️⃣ **初始化**

初始化变量意味着第一次为其赋值。

📌示例：

let name = "Richa"; // Declaration + Initialization

您也可以先声明，然后再初始化：

📌示例：

let age; // Declaration
age = 25; // Initialization
console.log(age); // Outputs: 25

3️⃣ **命名约定**

遵循以下规则来有效地命名变量：

以字母、$ 或 _ 开头。有效：userName、_temp、$amount无效：123name、@value

避免使用保留关键字：无效：let var = 10;（不能使用 var 作为名称）

使用 camelCase 以提高可读性：例如：firstName、totalCase

描述性：不要使用 x，而要使用 userAge 或 productName。

📌示例：

let userName = "John"; // Descriptive and camelCase
const MAX_USERS = 100; // Use uppercase for constants
let _tempValue = 42; // Valid use of underscore
let $price = 99.99; // Valid use of $

⭐**变量类型**

JavaScript 提供三种声明变量的方式：“var”，“let”和“const”。

1️⃣ **var（老式）**

**范围**：函数范围或者全局范围。

**用法**：由于其怪癖，最好在现代 JavaScript 中避免使用。

2015 年之前，`var` 关键字在 JavaScript 中很流行。然而，由于其全局作用域和提升行为，现在不太推荐使用它。

📌示例：

var stuff = "Toy";
var stuff = "Book"; // Re-declaration allowed (confusing behavior).
console.log(stuff); // Outputs: Book

使用“var”，您可以多次声明同一个变量。然而，这通常会导致错误和代码混乱。

⁉️**提升**行为：

用“var”声明的变量被“提升”，这意味着你可以在声明它们之前使用它们。

📌示例：

console.log(stuff); // Outputs: undefined
var stuff = "Toy";

此行为可能会导致意外问题，因此请避免依赖“var”进行变量声明。

现实世界的例子

2️⃣ **let（灵活）**

**范围**：块范围（仅限于其声明的块）。

**用法**：当变量值需要改变时使用`let`。

📌示例：

let jar = "Tomatos";
jar = "Spices"; // Allowed
console.log(jar); // Outputs: Spices

尝试重新声明“let”变量将引发错误：

📌示例：

let jar = "Tomatos";
let jar = "Spices"; // Error: Identifier 'jar' has already been declared

与 `var` 不同，用 `let` 声明的变量不会以相同的方式提升：

📌示例：

console.log(jar); // ReferenceError: Cannot access 'jar' before initialization
let jar = "Tomatos";

现实世界的例子

3️⃣ **const（不可变）**

**范围**：块范围，如 `let`

**用法**：使用 `const` 表示初始化后不应改变的值。

`const` 非常适合声明不应重新分配的常量或变量。

📌示例：

const packet = "Milk";
packet = "Juice"; // Error: Assignment to constant variable

在声明“const”变量时必须初始化它：

📌示例：

const packet; // Error: Missing initializer in const declaration

现实世界的例子

探索变量的任务

以下有一些示例来测试您对变量的理解：

/* Task 1: */ 
let age = 4;
console.log(age); // Outputs: 4

/* Uncomment the following to see errors: */
/* const age = 10; // SyntaxError: Identifier 'age' has already been declared */

/* Task 2: */
const salary = 2000; // Correct
console.log(salary);

/* Task 3: */
/* const salary; // SyntaxError: Missing initializer in const declaration */

/* Task 4: */
/* const salary = 0;
console.log(salary);
salary = 10; // TypeError: Assignment to constant variable */

结论

掌握变量是编写干净高效的 JavaScript 代码的第一步。

尽可能使用 const 以确保稳定性。

仅当值需要改变时才使用 let。

避免使用 var 以防止难以调试的问题。

祝你编码愉快！🎉

CLIS.CC

理解 JavaScript 变量

介绍

探索变量的任务

结论