Modern JavaScript Cheatsheet 现代 JavaScript 速查表详解

Modern JavaScript Cheatsheet 现代 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 (ECMAScript 2015) 之后发生了巨大变化。本文基于知名技术文档 Modern JavaScript Cheatsheet，将深入解析现代 JavaScript 开发中的核心概念和实用技巧，帮助开发者快速掌握关键知识点。

变量声明：var、let 与 const 的进化

传统 var 的问题

var x = 10;
if (true) {
  var x = 20; // 同一个变量！
  console.log(x); // 20
}
console.log(x); // 20

var 声明的变量具有函数作用域，这经常导致意外的变量覆盖问题。

现代解决方案：let 和 const

let y = 10;
if (true) {
  let y = 20; // 不同的变量
  console.log(y); // 20
}
console.log(y); // 10

• let：块级作用域，可重新赋值
• const：块级作用域，不可重新赋值（但对象属性可修改）

最佳实践：默认使用 const，需要重新赋值时改用 let

箭头函数：简洁的语法革命

基本语法对比

传统函数：

function sum(a, b) {
  return a + b;
}

箭头函数：

const sum = (a, b) => a + b;

关键特性

1. 隐式返回：单行表达式可省略 return
2. this 绑定：自动捕获上下文 this
3. 参数简化：
   • 单参数可省略括号：x => x*2
   • 无参数需保留空括号：() => console.log('Hi')

this 绑定的实际应用

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

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

对象解构

const user = { name: 'John', age: 30 };

// 传统方式
const name = user.name;
const age = user.age;

// 解构方式
const { name, age } = user;

数组解构

const colors = ['red', 'green', 'blue'];

// 跳过元素
const [first, , third] = colors;
console.log(first); // 'red'
console.log(third); // 'blue'

默认值与重命名

const { name: userName = 'Anonymous', age } = {};
console.log(userName); // 'Anonymous'

数组高阶方法：函数式编程利器

map：数据转换

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
// [2, 4, 6]

filter：数据筛选

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

reduce：数据聚合

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

扩展运算符：强大的语法糖

数组拼接

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

对象合并

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };
// { a: 1, b: 2 }

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 Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

继承

class Dog extends Animal {
  constructor(name) {
    super(name); // 调用父类构造函数
  }
  
  speak() {
    console.log(`${this.name} barks.`);
  }
}

模块化：现代代码组织方式

导出模块

// math.js
export const add = (a, b) => a + b;
export const PI = 3.14159;

导入模块

import { add, PI } from './math.js';
console.log(add(2, 3)); // 5

实用技巧与陷阱

真值/假值判断

// 假值：false, 0, "", null, undefined, NaN
if ([]) {
  console.log('空数组是真值！');
}

可选链操作符（?.）

const user = { profile: { name: 'John' } };
console.log(user?.profile?.name); // 'John'
console.log(user?.address?.street); // undefined (不会报错)

总结

现代 JavaScript 通过 ES6+ 引入的这些特性，极大地提升了代码的可读性、可维护性和开发效率。掌握这些核心概念是成为高效 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