【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 |