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

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

news2025/2/25 13:06:08

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 2

let { 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`