Javascript语言知识点汇总

前言

这里只是简单列出Javascript的知识点

---

一、基础语法

1.1 变量声明

// ES5
var name = "张三"; // 函数作用域

// ES6+
let age = 25;    // 块级作用域
const PI = 3.14; // 常量

1.2 数据类型

类型	说明	示例
Number	数字	42, 3.14
String	字符串	"Hello", 'World'
Boolean	布尔值	true, false
Null	空值	null
Undefined	未定义	undefined
Symbol	唯一值(ES6)	Symbol('id')
BigInt	大整数(ES2020)	123n
Object	对象	{name: "张三"}

1.3 类型检测

typeof 42        // "number"
typeof "text"    // "string"
typeof true      // "boolean"
typeof undefined // "undefined"
typeof null      // "object" (历史遗留问题)
Array.isArray([]) // true

---

二、运算符

2.1 算术运算符

+ - * / % ** ++ --

2.2 比较运算符

==  // 相等(会类型转换)
=== // 严格相等
!=  // 不等
!== // 严格不等
> < >= <=

2.3 逻辑运算符

&& || ! ??

2.4 赋值运算符

= += -= *= /= %= **= &&= ||= ??=

---

三、流程控制

3.1 条件语句

// if-else
if (age > 18) {
    console.log("成年人");
} else {
    console.log("未成年人");
}

// switch
switch(day) {
    case 1: console.log("周一"); break;
    default: console.log("周末");
}

3.2 循环语句

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

// while循环
while (condition) {
    // ...
}

// for...of (ES6)
for (const item of array) {
    console.log(item);
}

// for...in (遍历对象属性)
for (const key in object) {
    console.log(key);
}

---

四、函数

4.1 函数定义

// 函数声明
function sum(a, b) {
    return a + b;
}

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

// 箭头函数(ES6)
const divide = (a, b) => a / b;

4.2 函数参数

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

// 剩余参数(ES6)
function sum(...numbers) {
    return numbers.reduce((a, b) => a + b);
}

4.3 高阶函数

// 回调函数
function fetchData(callback) {
    setTimeout(() => callback("数据"), 1000);
}

// 返回函数
function createAdder(x) {
    return y => x + y;
}

---

五、对象与类

5.1 对象创建

// 对象字面量
const person = {
    name: "张三",
    age: 30,
    greet() {
        console.log(`我是${this.name}`);
    }
};

// 构造函数
function Person(name) {
    this.name = name;
}

5.2 类(ES6)

class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        console.log(`${this.name} makes a noise`);
    }
}

class Dog extends Animal {
    speak() {
        super.speak();
        console.log(`${this.name} barks`);
    }
}

---

六、数组操作

6.1 常用方法

const arr = [1, 2, 3];

// 遍历
arr.forEach(item => console.log(item));

// 映射
const doubled = arr.map(x => x * 2);

// 过滤
const evens = arr.filter(x => x % 2 === 0);

// 查找
const found = arr.find(x => x > 1);

// 排序
arr.sort((a, b) => a - b);

6.2 扩展运算符(ES6)

const newArr = [...arr, 4, 5];
const objCopy = {...originalObj};

---

七、异步编程

7.1 Promise

const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("成功"), 1000);
});

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

7.2 async/await(ES2017)

async function fetchData() {
    try {
        const response = await fetch('url');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

---

八、模块系统(ES6)

8.1 导出

// 命名导出
export const name = "张三";
export function sayHi() { /*...*/ }

// 默认导出
export default class Person { /*...*/ }

8.2 导入

import { name, sayHi } from './module.js';
import Person from './Person.js';

---

九、现代JS特性

9.1 解构赋值(ES6)

const [a, b] = [1, 2];
const {name, age} = person;

9.2 可选链(ES2020)

const street = user?.address?.street;

9.3 空值合并(ES2020)

const value = input ?? "default";

---

十、最佳实践

1. 使用严格模式("use strict")
2. 优先使用const/let替代var
3. 使用===代替==
4. 避免全局变量污染
5. 函数单一职责原则
6. 错误处理(try/catch)
7. 代码模块化组织
8. 编写可读性高的代码
9. 使用ESLint规范代码
10. 编写单元测试
    注：JavaScript是动态类型的解释型语言，遵循ECMAScript标准，本文涵盖ES5到ES2022主要特性。

---