说码解字
0%

JavaScript-语法速览

发表于 更新于 分类于 ， Valine：

基本语法

1. JavaScript 的基本结构

JavaScript 是一种解释性语言，直接运行在浏览器或 Node.js 中。

1
2
// 输出 "Hello, World!"
console.log("Hello, World!");

2. 变量声明

JavaScript 中有三种声明变量的方式：

  • **var**：函数作用域，可能导致变量提升。
  • **let**：块作用域。
  • **const**：块作用域，声明后不可重新赋值。
1
2
3
var a = 10;   // 可以重新赋值和重新声明
let b = 20;   // 可以重新赋值但不能重新声明
const c = 30; // 不能重新赋值和重新声明

动态类型

JavaScript 是动态类型语言，变量类型可以在运行时改变：

1
2
3
let x = 42;        // 整数
x = "Hello";       // 字符串
x = [1, 2, 3];     // 数组

3. 数据类型

原始类型

  • **Number**：包括整数和浮点数。
  • **String**：字符串。
  • **Boolean**：布尔值。
  • **null**：表示空。
  • **undefined**：未定义。
  • **Symbol**：唯一值（ES6+）。
  • **BigInt**：大整数（ES2020+）。

引用类型

  • **Object**：对象，包括数组、函数等。

4. 运算符

常见运算符：

  • 算术运算符：+, -, *, /, %, **（幂运算符）。
  • 比较运算符：==, !=, ===（全等）, !==（不全等）, <, >, <=, >=。
  • 逻辑运算符：&&, ||, !。
  • 赋值运算符：=, +=, -=, *=, /=, %=。

示例：

1
2
3
4
5
6
let a = 10;
let b = 20;

console.log(a + b);  // 加法: 30
console.log(a === b); // 全等: false
console.log(a < b && b > 15); // 逻辑与: true

5. 条件语句

if-else 语句

1
2
3
4
5
6
let age = 18;
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

三元运算符

1
2
let status = age >= 18 ? "adult" : "minor";
console.log(status); // 输出 "adult"

switch 语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let color = "red";
switch (color) {
    case "red":
        console.log("Stop");
        break;
    case "yellow":
        console.log("Caution");
        break;
    case "green":
        console.log("Go");
        break;
    default:
        console.log("Unknown");
}

6. 循环

for 循环

1
2
3
for (let i = 0; i < 5; i++) {
    console.log(i); // 输出 0 到 4
}

while 循环

1
2
3
4
5
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

do-while 循环

1
2
3
4
5
let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

for…of 和 for…in

  • **for...of**：用于迭代数组、字符串等可迭代对象。

    1
    2
    3
    4
    let arr = [10, 20, 30];
    for (let num of arr) {
        console.log(num); // 输出 10, 20, 30
    }

  • **for...in**：用于迭代对象的键。

    1
    2
    3
    4
    let obj = { name: "Alice", age: 25 };
    for (let key in obj) {
        console.log(key); // 输出 "name", "age"
    }

7. 函数

定义函数

1
2
3
4
function add(a, b) {
    return a + b;
}
console.log(add(3, 5)); // 输出 8

匿名函数

1
2
3
4
let subtract = function (a, b) {
    return a - b;
};
console.log(subtract(10, 5)); // 输出 5

箭头函数（ES6+）

1
2
let multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 输出 6

8. 数组

创建数组

1
let arr = [1, 2, 3];

数组方法

  • **push**：添加元素。
  • **pop**：移除最后一个元素。
  • **shift**：移除第一个元素。
  • **unshift**：在开头添加元素。
  • **slice**：返回子数组。
  • **splice**：修改数组。
  • **map**：对每个元素应用函数。
  • **filter**：筛选数组。
  • **reduce**：累积操作。
1
2
3
let arr = [1, 2, 3, 4];
let doubled = arr.map(x => x * 2); // [2, 4, 6, 8]
let evens = arr.filter(x => x % 2 === 0); // [2, 4]

9. 对象

创建对象

1
2
3
4
5
6
7
8
let person = {
    name: "Alice",
    age: 25,
    greet: function () {
        console.log("Hello, " + this.name);
    },
};
person.greet(); // 输出 "Hello, Alice"

对象操作

1
2
3
person.name = "Bob"; // 修改属性
person.job = "Engineer"; // 添加属性
delete person.age; // 删除属性

10. 类与面向对象

定义类（ES6+）

1
2
3
4
5
6
7
8
9
10
11
12
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

let person = new Person("Alice", 25);
person.greet(); // 输出 "Hello, my name is Alice"

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age); // 调用父类构造函数
        this.grade = grade;
    }
    study() {
        console.log(`${this.name} is studying.`);
    }
}

let student = new Student("Bob", 20, "A");
student.greet(); // 输出 "Hello, my name is Bob"
student.study(); // 输出 "Bob is studying."

11. 异步操作

Promise

1
2
3
4
5
6
7
8
9
10
11
12
let promise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("Success");
    } else {
        reject("Error");
    }
});

promise
    .then(result => console.log(result))
    .catch(error => console.log(error));

async/await

1
2
3
4
5
async function fetchData() {
    let data = await fetch("https://api.example.com/data");
    console.log(await data.json());
}
fetchData();

12. 模块化

导出模块

1
2
3
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

导入模块

1
2
3
// main.js
import { add, subtract } from './math.js';
console.log(add(3, 5)); // 输出 8

高级特性

1. 作用域与闭包

作用域

JavaScript 中有以下作用域类型：

  • 全局作用域：全局变量在整个程序中可访问。
  • 函数作用域：var 声明的变量有函数作用域。
  • 块作用域：let 和 const 声明的变量有块作用域。
1
2
3
4
5
6
7
function example() {
    let x = 10; // 块作用域
    if (true) {
        let y = 20; // 块作用域
    }
    // console.log(y); // Error: y is not defined
}

闭包

闭包是指函数可以记住并访问它定义时的作用域。

1
2
3
4
5
6
7
8
9
10
11
function counter() {
    let count = 0;
    return function () {
        count++;
        return count;
    };
}

const increment = counter();
console.log(increment()); // 输出 1
console.log(increment()); // 输出 2

2. 异步编程

Promise

Promise 是处理异步操作的对象。

1
2
3
4
5
6
7
8
9
const fetchData = new Promise((resolve, reject) => {
    let success = true;
    if (success) resolve("Data fetched successfully");
    else reject("Fetch failed");
});

fetchData
    .then(data => console.log(data))
    .catch(error => console.error(error));

async/await

async 和 await 是简化异步代码的语法糖。

1
2
3
4
5
6
7
8
9
10
async function fetchData() {
    try {
        let response = await fetch("https://api.example.com");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
fetchData();

3. 模块化

ES Modules

  • 导出模块：

    1
    2
    3
    // math.js
    export const add = (a, b) => a + b;
    export const subtract = (a, b) => a - b;

  • 导入模块：

    1
    2
    3
    // main.js
    import { add, subtract } from './math.js';
    console.log(add(2, 3)); // 输出 5

CommonJS 模块

用于 Node.js 环境：

1
2
3
4
5
6
7
8
9
// utils.js
module.exports = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b
};

// main.js
const { add, subtract } = require('./utils');
console.log(add(3, 4)); // 输出 7

4. 事件循环与任务队列

JavaScript 的异步操作基于事件循环机制：

  • 宏任务：setTimeout，setInterval。
  • 微任务：Promise.then，MutationObserver。

示例：

1
2
3
4
5
6
console.log("Start");

setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));

console.log("End");

输出顺序：

1
2
3
4
Start
End
Promise
Timeout

5. 原型与继承

原型

JavaScript 使用原型链实现继承：

1
2
3
4
5
6
7
8
9
function Person(name) {
    this.name = name;
}
Person.prototype.greet = function () {
    console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");
alice.greet(); // 输出 "Hello, my name is Alice"

类（ES6+）

类是创建对象的语法糖：

1
2
3
4
5
6
7
8
9
10
11
class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const bob = new Person("Bob");
bob.greet(); // 输出 "Hello, my name is Bob"

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
class Student extends Person {
    constructor(name, grade) {
        super(name); // 调用父类构造函数
        this.grade = grade;
    }
    study() {
        console.log(`${this.name} is studying in grade ${this.grade}`);
    }
}

const student = new Student("Charlie", 10);
student.greet(); // 输出 "Hello, my name is Charlie"
student.study(); // 输出 "Charlie is studying in grade 10"

6. Symbol 和迭代器

Symbol

Symbol 是独一无二的标识符。

1
2
3
const sym1 = Symbol("id");
const sym2 = Symbol("id");
console.log(sym1 === sym2); // 输出 false

迭代器

对象可以实现 Symbol.iterator 使其可迭代。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const iterable = {
    items: [1, 2, 3],
    [Symbol.iterator]() {
        let i = 0;
        return {
            next: () => ({
                value: this.items[i++],
                done: i > this.items.length
            })
        };
    }
};

for (const item of iterable) {
    console.log(item); // 输出 1, 2, 3
}

7. 生成器函数

生成器是可以暂停执行的函数。

1
2
3
4
5
6
7
8
9
10
11
function* generateNumbers() {
    yield 1;
    yield 2;
    yield 3;
}

const generator = generateNumbers();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

8. Proxy 和 Reflect

Proxy

用于拦截对象的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const target = { name: "Alice" };
const proxy = new Proxy(target, {
    get(obj, prop) {
        return prop in obj ? obj[prop] : "Not Found";
    },
    set(obj, prop, value) {
        console.log(`Setting ${prop} to ${value}`);
        obj[prop] = value;
    }
});

console.log(proxy.name); // 输出 "Alice"
console.log(proxy.age);  // 输出 "Not Found"
proxy.age = 25;          // 输出 "Setting age to 25"

Reflect

与 Proxy 配合使用。

1
2
Reflect.set(target, "name", "Bob");
console.log(Reflect.get(target, "name")); // 输出 "Bob"

9. 解构赋值与扩展运算符

解构赋值

1
2
const [a, b] = [1, 2];
const { name, age } = { name: "Alice", age: 25 };

扩展运算符

1
2
3
4
5
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const obj1 = { name: "Alice" };
const obj2 = { ...obj1, age: 25 }; // { name: "Alice", age: 25 }

10. Set 和 Map

Set

Set 是不重复的值的集合。

1
2
3
const set = new Set([1, 2, 2, 3]);
set.add(4);
console.log([...set]); // 输出 [1, 2, 3, 4]

Map

Map 是键值对集合，键可以是任意类型。

1
2
3
4
const map = new Map();
map.set("name", "Alice");
map.set(1, "one");
console.log(map.get("name")); // 输出 "Alice"

11. TypeScript 概念

TypeScript 是 JavaScript 的超集，添加了静态类型。

1
2
3
function add(a: number, b: number): number {
    return a + b;
}