JavaScript（JS）的基础语法总结

JavaScript（JS）作为一种脚本语言，具有简洁易用的语法，是前端开发的基础。以下是 JS 的基础语法总结：

---

### 1. **变量和常量**
```javascript
// 定义变量
let x = 5; // 块作用域变量，可重新赋值
var y = 10; // 全局/函数作用域变量，可重新赋值
const z = 15; // 常量，定义后不能重新赋值
```

---

### 2. **数据类型**
#### 2.1 原始类型（Primitive Types）
- **Number**: 如 `10`, `3.14`
- **String**: 如 `'hello'`, `"world"`
- **Boolean**: `true`, `false`
- **Null**: 空值，表示变量不存在
- **Undefined**: 声明但未赋值
- **Symbol**: 独一无二的值（ES6）
- **BigInt**: 用于表示大整数（ES11）

#### 2.2 引用类型
- **Object**: 如数组、函数、日期等

---

### 3. **操作符**
#### 3.1 算术操作符
```javascript
let a = 10 + 5; // 加法：15
let b = 10 - 5; // 减法：5
let c = 10 * 2; // 乘法：20
let d = 10 / 2; // 除法：5
let e = 10 % 3; // 取余：1
let f = 2 ** 3; // 指数：8
```

#### 3.2 比较操作符
```javascript
console.log(10 > 5); // true
console.log(10 === 5); // false（全等：值和类型都相等）
console.log(10 == "10"); // true（宽松相等：仅比较值）
```

#### 3.3 逻辑操作符
```javascript
console.log(true && false); // false（与）
console.log(true || false); // true（或）
console.log(!true); // false（非）
```

---

### 4. **条件语句**
```javascript
let age = 18;
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}

// 三元运算符
let result = age >= 18 ? "成年人" : "未成年人";
```

---

### 5. **循环语句**
```javascript
// for 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}

// while 循环
let i = 0;
while (i < 5) {
console.log(i);
i++;
}

// do-while 循环
let j = 0;
do {
console.log(j);
j++;
} while (j < 5);
```

---

### 6. **函数**
```javascript
// 函数声明
function add(a, b) {
return a + b;
}

// 函数表达式
const subtract = function (a, b) {
return a - b;
};

// 箭头函数（ES6）
const multiply = (a, b) => a * b;

console.log(add(5, 10)); // 15
console.log(subtract(10, 5)); // 5
console.log(multiply(2, 3)); // 6
```

---

### 7. **数组**
```javascript
const arr = [1, 2, 3];
arr.push(4); // 添加元素
arr.pop(); // 删除最后一个元素
console.log(arr); // [1, 2, 3]
```

---

### 8. **对象**
```javascript
const person = {
name: "Alice",
age: 25,
greet: function () {
console.log(`Hello, my name is ${this.name}`);
},
};

person.greet(); // Hello, my name is Alice
```

---

### 9. **作用域和闭包**
#### 9.1 作用域
```javascript
// 块作用域
{
let x = 10;
console.log(x); // 10
}
// console.log(x); // 报错

// 函数作用域
function test() {
var y = 20;
}
// console.log(y); // 报错
```

#### 9.2 闭包
```javascript
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}

const counter = outer();
counter(); // 1
counter(); // 2
```

---

### 10. **异步**
#### 10.1 回调函数
```javascript
setTimeout(() => {
console.log("1秒后执行");
}, 1000);
```

#### 10.2 Promise
```javascript
const promise = new Promise((resolve, reject) => {
let success = true;
if (success) resolve("成功");
else reject("失败");
});

promise
.then((res) => console.log(res))
.catch((err) => console.log(err));
```

#### 10.3 async/await
```javascript
async function fetchData() {
try {
const result = await promise;
console.log(result);
} catch (error) {
console.log(error);
}
}
fetchData();
```

------------------------------------------------------------------------------------------------------------------------
既然你已经有基础，我会更具体，给出完整的代码示例，同时解释常用的核心功能。以下内容让你快速掌握 JavaScript 的基础及其应用。

---

## **1. 变量与作用域**

### **`let`、`const` 和 `var` 的区别**
```javascript
// let 的块级作用域
{
let a = 10;
console.log(a); // 10
}
// console.log(a); // 报错，a 在块外不可访问

// const 的不可变性
const PI = 3.14;
// PI = 3.15; // 报错，const 不允许重新赋值

// var 的函数作用域
function testVar() {
var x = 100;
if (true) {
var x = 200; // 这里覆盖了外层 x
console.log(x); // 200
}
console.log(x); // 200
}
testVar();
```

### **立即执行函数表达式 (IIFE)**
```javascript
(function () {
console.log("这是立即执行的函数");
})();
```

---

## **2. 数据类型与类型判断**

### **数据类型**
```javascript
let num = 42; // Number
let str = "Hello World"; // String
let bool = true; // Boolean
let undef; // Undefined
let nul = null; // Null
let obj = { key: "value" }; // Object
let arr = [1, 2, 3]; // Array (其实是对象的子类型)
let sym = Symbol("id"); // Symbol
```

### **类型判断**
```javascript
console.log(typeof 42); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof null); // "object" (JavaScript 的一个 bug)
console.log(Array.isArray([1])); // true
console.log(obj instanceof Object); // true
```

---

## **3. 条件与循环**

### **条件语句**
```javascript
let age = 25;
if (age >= 18) {
console.log("成年人");
} else if (age > 12) {
console.log("青少年");
} else {
console.log("儿童");
}

// 三元运算符
let category = age >= 18 ? "成年人" : "未成年人";
console.log(category);
```

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

// for...of (遍历数组或类数组)
const arr = ["A", "B", "C"];
for (const item of arr) {
console.log(item);
}

// for...in (遍历对象的键)
const obj = { name: "Alice", age: 25 };
for (const key in obj) {
console.log(key, obj[key]);
}

// while 循环
let i = 0;
while (i < 3) {
console.log(i);
i++;
}

// do...while
let j = 0;
do {
console.log(j);
j++;
} while (j < 3);
```

---

## **4. 函数**

### **普通函数与箭头函数**
```javascript
// 普通函数
function add(a, b) {
return a + b;
}

// 匿名函数（赋值给变量）
const multiply = function (a, b) {
return a * b;
};

// 箭头函数
const subtract = (a, b) => a - b;

console.log(add(3, 4)); // 7
console.log(multiply(3, 4)); // 12
console.log(subtract(7, 4)); // 3
```

### **默认参数**
```javascript
function greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Alice"); // Hello, Alice!
```

---

## **5. 数组**

### **常见操作**
```javascript
const arr = [1, 2, 3];

// 添加元素
arr.push(4); // [1, 2, 3, 4]
arr.unshift(0); // [0, 1, 2, 3, 4]

// 删除元素
arr.pop(); // 删除最后一个元素，返回 4
arr.shift(); // 删除第一个元素，返回 0

// 数组长度
console.log(arr.length); // 3

// 遍历数组
arr.forEach((item) => console.log(item)); // 1, 2, 3
```

### **数组高级操作**
```javascript
const numbers = [1, 2, 3, 4, 5];

// map
const doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10]

// filter
const even = numbers.filter((n) => n % 2 === 0); // [2, 4]

// reduce
const sum = numbers.reduce((total, n) => total + n, 0); // 15

console.log(doubled, even, sum);
```

---

## **6. 对象**

### **对象操作**
```javascript
const person = { name: "Alice", age: 25 };

// 添加或修改属性
person.gender = "female";

// 删除属性
delete person.age;

// 遍历对象
for (let key in person) {
console.log(key, person[key]);
}

// 解构赋值
const { name, gender } = person;
console.log(name, gender); // Alice female
```

---

## **7. 异步操作**

### **回调**
```javascript
function fetchData(callback) {
setTimeout(() => {
callback("数据已加载");
}, 1000);
}
fetchData((data) => console.log(data)); // 数据已加载
```

### **Promise**
```javascript
const promise = new Promise((resolve, reject) => {
const success = true;
if (success) {
resolve("成功");
} else {
reject("失败");
}
});

promise
.then((res) => console.log(res)) // 成功
.catch((err) => console.log(err));
```

### **Async/Await**
```javascript
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => resolve("数据已加载"), 1000);
});
}

async function load() {
const data = await fetchData();
console.log(data); // 数据已加载
}
load();
```

---

## **8. DOM 操作**
```javascript
// 获取元素
const button = document.getElementById("myButton");

// 修改内容
button.innerHTML = "点击我";

// 添加事件
button.addEventListener("click", () => {
alert("按钮被点击了！");
});

// 动态创建元素
const div = document.createElement("div");
div.textContent = "Hello, DOM!";
document.body.appendChild(div);
```

------------------------------------------------------------------------------------------------------------------------

如果你想针对某个具体问题或功能，深入了解更多内容，可以告诉我！