当前位置：首页 > news >正文

JavaScript 基础语法：变量、数据类型、运算符、条件语句、循环

news 来源：原创 2025/5/21 7:04:13

JavaScript 是一种动态类型的脚本语言，广泛用于前端开发。以下是 JavaScript 基础语法的核心内容，包括变量、数据类型、运算符、条件语句和循环。

---

### 1. 变量

变量用于存储数据。JavaScript 中有三种声明变量的方式：

- **`var`**：传统方式，作用域为函数级。
- **`let`**：块级作用域，推荐使用。
- **`const`**：块级作用域，用于声明常量（不可重新赋值）。

```javascript
var name = "Alice"; // 函数作用域
let age = 25; // 块级作用域
const PI = 3.14; // 常量，不可重新赋值
```

---

### 2. 数据类型

JavaScript 是一种动态类型语言，变量的数据类型可以随时改变。主要数据类型包括：

#### 基本数据类型（原始类型）
- **`number`**：数字（整数、浮点数）。
- **`string`**：字符串。
- **`boolean`**：布尔值（`true` 或 `false`）。
- **`undefined`**：未定义的值。
- **`null`**：空值。
- **`symbol`**（ES6）：唯一的、不可变的值。

#### 引用数据类型
- **`object`**：对象（包括数组、函数等）。

```javascript
let num = 42; // number
let text = "Hello"; // string
let isActive = true; // boolean
let person = { name: "Alice", age: 25 }; // object
let fruits = ["apple", "banana"]; // array
```

---

### 3. 运算符

JavaScript 支持多种运算符，用于操作变量和值。

#### 算术运算符
- `+`（加）、`-`（减）、`*`（乘）、`/`（除）、`%`（取余）、`**`（幂）。

```javascript
let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a % b); // 1
```

#### 比较运算符
- `==`（相等）、`===`（严格相等）、`!=`（不等）、`!==`（严格不等）、`>`、`<`、`>=`、`<=`。

```javascript
console.log(10 == "10"); // true（值相等）
console.log(10 === "10"); // false（值和类型都相等）
```

#### 逻辑运算符
- `&&`（与）、`||`（或）、`!`（非）。

```javascript
let x = true;
let y = false;
console.log(x && y); // false
console.log(x || y); // true
console.log(!x); // false
```

#### 赋值运算符
- `=`、`+=`、`-=`、`*=`、`/=`。

```javascript
let num = 10;
num += 5; // num = num + 5
console.log(num); // 15
```

---

### 4. 条件语句

条件语句用于根据条件执行不同的代码块。

#### `if...else`
```javascript
let age = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}
```

#### `switch`
```javascript
let day = "Monday";
switch (day) {
case "Monday":
console.log("Start of the week");
break;
case "Friday":
console.log("Weekend is near");
break;
default:
console.log("Midweek");
}
```

#### 三元运算符
```javascript
let isAdult = age >= 18 ? "Yes" : "No";
console.log(isAdult); // Yes
```

---

### 5. 循环

循环用于重复执行代码块。

#### `for` 循环
```javascript
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
```

#### `while` 循环
```javascript
let i = 0;
while (i < 5) {
console.log(i); // 0, 1, 2, 3, 4
i++;
}
```

#### `do...while` 循环
```javascript
let j = 0;
do {
console.log(j); // 0, 1, 2, 3, 4
j++;
} while (j < 5);
```

#### `for...of` 循环（ES6）
用于遍历可迭代对象（如数组、字符串）。
```javascript
let fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
console.log(fruit); // apple, banana, orange
}
```

#### `for...in` 循环
用于遍历对象的属性。
```javascript
let person = { name: "Alice", age: 25 };
for (let key in person) {
console.log(key + ": " + person[key]); // name: Alice, age: 25
}
```

---

### 6. 函数

函数用于封装可重用的代码块。

#### 函数声明
```javascript
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice")); // Hello, Alice
```

#### 函数表达式
```javascript
const greet = function(name) {
return "Hello, " + name;
};
console.log(greet("Bob")); // Hello, Bob
```

#### 箭头函数（ES6）
```javascript
const greet = (name) => "Hello, " + name;
console.log(greet("Charlie")); // Hello, Charlie
```

---

### 总结

- **变量**：使用 `let` 和 `const` 声明变量。
- **数据类型**：包括原始类型和引用类型。
- **运算符**：算术、比较、逻辑、赋值等。
- **条件语句**：`if...else`、`switch`、三元运算符。
- **循环**：`for`、`while`、`do...while`、`for...of`、`for...in`。
- **函数**：函数声明、函数表达式、箭头函数。

掌握这些基础语法是学习 JavaScript 的第一步，后续可以深入学习 DOM 操作、异步编程、ES6+ 新特性等。

相关文章：