【JavaScript】JavaScript 常见概念 - 变量与数据类型 - 运算符 - 条件语句 - 循环 - 函数 - 数组操作 - 对象

1. 变量与数据类型

变量声明

JavaScript 提供了三种方式来声明变量：

• var（全局或函数作用域，不推荐）
• let（块级作用域，推荐）
• const（常量，块级作用域，推荐）

var a = 10;  // 可重新赋值，函数作用域
let b = 20;  // 可重新赋值，块级作用域
const c = 30; // 不能重新赋值，块级作用域

数据类型

• 基本数据类型（值类型）：
  • Number（数字）
  • String（字符串）
  • Boolean（布尔值）
  • Undefined（未定义）
  • Null（空值）
  • Symbol（独特值）
  • BigInt（大整数）

let num = 42; // Number
let str = "Hello"; // String
let bool = true; // Boolean
let notDefined; // Undefined
let emptyValue = null; // Null
let uniqueKey = Symbol("key"); // Symbol
let bigIntNum = 9007199254740991n; // BigInt

• 引用数据类型：
  • Object（对象）
  • Array（数组）
  • Function（函数）

let obj = { name: "Alice", age: 25 };
let arr = [1, 2, 3, 4, 5];
let func = function() { return "Hello"; };

---

2. 运算符

JavaScript 提供了多种运算符：

• 算术运算符（+, -, *, /, %, ++, --）
• 赋值运算符（=, +=, -=, *=, /=）
• 比较运算符（==, ===, !=, !==, >, <, >=, <=）
• 逻辑运算符（&&, ||, !）
• 三元运算符（条件 ? 值1 : 值2）

let x = 10;
let y = 5;console.log(x + y);  // 15
console.log(x > y);  // true
console.log(x === "10"); // false（严格相等）
console.log(x == "10"); // true（类型转换后相等）
console.log(x > 0 && y > 0); // true

---

3. 条件语句

let age = 18;if (age >= 18) {console.log("Adult");
} else if (age >= 13) {console.log("Teenager");
} else {console.log("Child");
}

switch 语句：

let fruit = "apple";switch (fruit) {case "apple":console.log("Apple selected");break;case "banana":console.log("Banana selected");break;default:console.log("Unknown fruit");
}

---

4. 循环

// 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);

---

5. 函数

// 普通函数
function add(a, b) {return a + b;
}// 箭头函数
const multiply = (a, b) => a * b;console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

---

6. 数组操作

let arr = [1, 2, 3, 4, 5];// 添加元素
arr.push(6);  // [1, 2, 3, 4, 5, 6]// 删除最后一个元素
arr.pop();  // [1, 2, 3, 4, 5]// 遍历数组
arr.forEach((num) => console.log(num));// 映射数组（每个元素乘以 2）
let newArr = arr.map(num => num * 2);
console.log(newArr); // [2, 4, 6, 8, 10]

---

7. 对象

let person = {name: "Alice",age: 25,greet: function() {console.log("Hello, " + this.name);}
};console.log(person.name); // Alice
person.greet(); // Hello, Alice

---

8. 作用域与闭包

function outer() {let count = 0;return function inner() {count++;console.log(count);};
}const counter = outer();
counter(); // 1
counter(); // 2

闭包 允许内部函数访问外部函数的变量，即使外部函数已经执行完毕。

---

9. 异步编程

Promise

function fetchData() {return new Promise((resolve) => {setTimeout(() => resolve("Data loaded"), 2000);});
}fetchData().then((data) => console.log(data)); // 2秒后输出 "Data loaded"

async/await

async function getData() {let result = await fetchData();console.log(result);
}
getData();

---

10. ES6+ 语法

解构赋值

let [a, b] = [1, 2];
console.log(a, b); // 1 2let { name, age } = { name: "Alice", age: 25 };
console.log(name, age); // Alice 25

展开运算符

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // {a: 1, b: 2, c: 3}

---

11. DOM 操作

document.getElementById("btn").addEventListener("click", function () {alert("Button clicked!");
});

---

12. 模块化

在现代 JavaScript 中，import 和 export 用于模块化：

// 导出
export function greet() {return "Hello!";
}// 导入
import { greet } from "./module.js";
console.log(greet()); // Hello!

---

总结

概念	关键点
变量	var、let、const
数据类型	数值、字符串、对象、数组
运算符	+, -, *, /, ===, &&
条件语句	if-else, switch
循环	for, while, do-while
函数	普通函数、箭头函数
数组	push(), pop(), map(), forEach()
对象	this 关键字、方法调用
作用域	块级作用域、闭包
异步	Promise、async/await
ES6+	解构、展开运算符
DOM 操作	document.getElementById