现代JavaScript速查手册：核心概念与实用技巧解析

现代JavaScript速查手册：核心概念与实用技巧解析

modern-js-cheatsheet Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects. 项目地址: https://gitcode.com/gh_mirrors/mo/modern-js-cheatsheet

前言

JavaScript作为现代Web开发的基石语言，近年来经历了重大变革。ES6(ES2015)及后续版本引入了大量新特性，极大提升了开发效率和代码可读性。本文基于现代JavaScript开发的核心概念，系统梳理了从变量声明到异步编程等关键知识点，帮助开发者快速掌握现代JS开发范式。

变量声明：const、let与var

三者的本质区别

现代JS提供了三种变量声明方式，它们具有不同的作用域和可变性特征：

• const：块级作用域，不可重新赋值，但对象/数组内容可修改
• let：块级作用域，可重新赋值
• var：函数作用域，可重新赋值，存在变量提升

最佳实践建议

1. 优先使用const：默认使用const声明变量，除非需要重新赋值
2. 其次选择let：需要重新赋值的变量使用let声明
3. 避免使用var：var的函数作用域和提升特性容易导致意外行为

作用域对比示例

// var的函数作用域
function varExample() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1，var变量泄露到整个函数作用域
}

// let/const的块级作用域
function letExample() {
  if (true) {
    let y = 2;
    const z = 3;
  }
  console.log(y); // ReferenceError
  console.log(z); // ReferenceError
}

暂时性死区(TDZ)

let/const存在"暂时性死区"现象：在声明前访问变量会抛出ReferenceError，这与var的变量提升行为截然不同。

console.log(a); // undefined (var变量提升)
var a = 1;

console.log(b); // ReferenceError (TDZ)
let b = 2;

箭头函数：简洁的语法与词法this

基本语法

箭头函数提供了一种更简洁的函数表达式写法：

// 传统函数
const sum = function(a, b) {
  return a + b;
}

// 箭头函数
const sum = (a, b) => a + b;

关键特性

1. 隐式返回：单表达式可省略return和大括号
2. 参数简化：单个参数可省略括号
3. 词法this：继承自外围作用域的this值

this绑定示例

function Timer() {
  this.seconds = 0;
  
  // 传统函数需要额外绑定this
  setInterval(function() {
    this.seconds++; // 错误！this指向错误
  }, 1000);
  
  // 箭头函数自动绑定外围this
  setInterval(() => {
    this.seconds++; // 正确！
  }, 1000);
}

解构赋值：优雅的数据提取

对象解构

const user = {
  id: 42,
  name: 'Alice',
  age: 25
};

// 基本解构
const { name, age } = user;

// 重命名变量
const { name: userName } = user;

// 默认值
const { country = 'China' } = user;

数组解构

const rgb = [255, 128, 0];

// 顺序解构
const [red, green] = rgb;

// 跳过元素
const [,, blue] = rgb;

// 剩余元素
const [first, ...rest] = rgb;

函数参数解构

function greet({ name, age = 18 }) {
  console.log(`Hello ${name}, age ${age}`);
}

greet({ name: 'Bob' }); // Hello Bob, age 18

数组高阶方法：map/filter/reduce

map：数据转换

const numbers = [1, 2, 3];
const squares = numbers.map(x => x * x); // [1, 4, 9]

filter：数据筛选

const evens = numbers.filter(x => x % 2 === 0); // [2]

reduce：数据聚合

const sum = numbers.reduce((acc, x) => acc + x, 0); // 6

异步编程：Promise与async/await

Promise基础

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
};

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

async/await语法糖

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

类与面向对象

类定义语法

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
  
  study() {
    console.log(`${this.name} is studying.`);
  }
}

模块系统

导出模块

// math.js
export const PI = 3.14159;

export function square(x) {
  return x * x;
}

// 默认导出
export default class Calculator {}

导入模块

import Calculator, { PI, square } from './math.js';

总结

现代JavaScript通过引入const/let、箭头函数、解构赋值、Promise等特性，大幅提升了代码的可读性和可维护性。掌握这些核心概念是成为高效JavaScript开发者的关键。建议在实际项目中逐步应用这些特性，体会它们带来的开发效率提升。

modern-js-cheatsheet Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects. 项目地址: https://gitcode.com/gh_mirrors/mo/modern-js-cheatsheet