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

devtools/2025/2/11 0:01:50/

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+ 新特性等。


http://www.ppmy.cn/devtools/157769.html

相关文章

轻量级服务器http-server

安装 sudo npm install http-server -g 运行 1. 直接去到要跑起来的目录&#xff0c;在终端输入 cd xxxx文件夹http-server //只输入http-server的话&#xff0c;更新了代码后&#xff0c;页面不会同步更新http-server -c-1 //同步更新页面http-server -a 127.0.0.1 -p 808…

Vue(7)

一.Vuex &#xff08;1&#xff09;概述 1.是什么 vuex是一个vue的状态管理工具&#xff0c;状态就是数据&#xff0c;可以帮助管理vue通用的数据&#xff08;多组件共享的数据&#xff09; 2.场景 ①某个状态在很多个组件来使用&#xff08;个人信息&#xff09; ②多个组…

CSS 相关知识

1、高度已知&#xff0c;三栏布局&#xff0c;左右宽度 200&#xff0c;中间自适应&#xff0c;如何实现&#xff1f; <body><div class"box"><div class"box1">高度已知</div><div class"box2">左右宽度 200&…

Redis 事务的介绍

1. Redis 事务介绍 Redis 的事务和 MySQL 的事务概念上是类似的&#xff0c;不过也有一定区别&#xff1a; 弱化的原子性&#xff1a;Redis 没有 “回滚机制”&#xff0c;只能批量执行操作&#xff0c;但如果其中一个操作失败&#xff0c;不会恢复到初始状态。不保证一致性&a…

构建高效Facebook广告矩阵:精准营销与广告投放的全新策略

随着社交媒体广告成为企业营销不可或缺的一部分&#xff0c;Facebook作为全球最大的社交平台之一&#xff0c;已成为企业营销的重要阵地。在Facebook上成功的广告投放&#xff0c;往往不只是依赖于单一广告&#xff0c;而是通过构建一个精准的广告矩阵来提升品牌曝光、增强用户…

Rust 核心语法总结

一、Rust 核心语法总结 1. 基础语法 变量绑定 let x = 5; // 不可变绑定 let mut y = 10; // 可变绑定数据类型 标量类型:i32, u32, f64, bool, char复合类型:元组 (i32, f64)、数组 [i32; 5]字符串:String(堆分配)、&str(切片)所有权系统 所有权规则…

基于RK3588/RK3576+FPGA的巡检机器人六自由度机械臂的系统设计

当今巡检机器人机械臂在管廊隧道等复杂环境的作业过程中&#xff0c;经常面临空间狭窄 且障碍物密集的问题&#xff0c;这就要求机械臂具备在狭窄空间进行避障路径规划的能力。此 外&#xff0c;一些不确定性因素如在突发或异常环境条件下&#xff0c;机械臂的全局状态信息感知…

4.2 检查k8s集群准入配置和其他准备工作

本节重点总结 : k8s集群检查操作新建项目 kube-mutating-webhook-inject-pod&#xff0c;准备工作 k8s集群检查操作 检查k8s集群否启用了准入注册 API&#xff1a; 执行kubectl api-versions |grep admission如果有下面的结果说明已启用 kubectl api-versions |grep admiss…