JavaScript 基础知识回顾

JavaScript 是前端开发的核心语言。本文回顾一些基础但重要的知识点。

数据类型

JavaScript 有以下基础数据类型：

原始类型

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// 数字
const num = 42;
const float = 3.14;

// 字符串
const str = "Hello";
const str2 = 'World';

// 布尔值
const isTrue = true;
const isFalse = false;

// undefined
let x;
console.log(x); // undefined

// null
const emptyValue = null;

// Symbol（ES6）
const symbol = Symbol('desc');

// BigInt（大整数）
const bigNum = 9007199254740992n;

引用类型

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// 对象
const obj = { name: 'John', age: 30 };

// 数组
const arr = [1, 2, 3, 4, 5];

// 函数
function greet(name) {
    return `Hello, ${name}!`;
}

变量声明

var / let / const

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// var - 函数作用域（已过时）
var oldVar = 1;

// let - 块作用域（推荐）
let x = 1;
x = 2; // 可以重新赋值

// const - 块作用域（推荐）
const y = 1;
// y = 2; // 错误：不能重新赋值

函数

函数声明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


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

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

// 箭头函数（ES6）
const subtract = (a, b) => a - b;

// 箭头函数（多行）
const divide = (a, b) => {
    if (b === 0) return 0;
    return a / b;
};

对象和数组

对象操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const person = {
    name: 'Alice',
    age: 25,
    sayHi() {
        console.log(`Hi, I'm ${this.name}`);
    }
};

// 访问属性
console.log(person.name);
console.log(person['age']);

// 解构赋值
const { name, age } = person;

数组操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const numbers = [1, 2, 3, 4, 5];

// 常用方法
numbers.push(6);           // 添加元素
numbers.pop();             // 删除最后一个
numbers.map(n => n * 2);   // 映射
numbers.filter(n => n > 2); // 筛选
numbers.reduce((a, b) => a + b); // 规约

// 解构赋值
const [first, second, ...rest] = numbers;

异步编程

回调函数

1
2
3
4
5
6
7
8
9


function fetchData(callback) {
    setTimeout(() => {
        callback('Data loaded');
    }, 1000);
}

fetchData((data) => {
    console.log(data);
});

Promise

1
2
3
4
5
6
7
8
9


const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});

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

async/await

1
2
3
4
5
6
7
8
9


async function getData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

常见陷阱

类型强制转换：注意 JavaScript 的隐式类型转换
this 指向：arrow 函数和普通函数的 this 不同
闭包：理解变量作用域和闭包陷阱
异步顺序：回调地狱和 Promise 链
事件委托：理解事件冒泡和委托

最佳实践

使用 let 和 const，避免 var
尽可能使用现代 JavaScript（ES6+）
使用严格模式：'use strict'
编写可读性强的代码
使用工具检查代码质量（ESLint）

小结

掌握 JavaScript 基础是成为优秀前端开发者的基石。不断学习和实践，才能写出更好的代码。

希望这篇文章对你有帮助！如有疑问，欢迎讨论。