现代JavaScript（Modern JavaScript）通常指的是使用ES6（ECMAScript 2015）

现代JavaScript（Modern JavaScript）通常指的是使用 ES6（ECMAScript 2015） 及其后续版本（如 ES2016、ES2017、ES2018…直至最新的 ES2024）引入的语法和特性开发的 JavaScript 代码。这些新标准极大地提升了语言的表达能力、可维护性和开发效率，使 JavaScript 更适合构建大型、复杂的应用程序。

---

✅ 核心 ES6+ 特性详解

1. let 和 const（块级作用域）

替代 var，避免变量提升带来的问题。

if (true) {
    let x = 10;   // 块级作用域
    const y = 20; // 不可重新赋值
}
// console.log(x); // ❌ 报错：x is not defined

---

2. 箭头函数（Arrow Functions）

简洁语法，自动绑定外层 this。

// 普通函数
function add(a, b) { return a + b; }

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

// 对象方法中 this 的差异
const user = {
    name: "Alice",
    greet: () => {
        // ❌ 箭头函数不绑定 this
        console.log(`Hello, ${this.name}`); // undefined
    },
    greetNormal() {
        // ✅ 正常函数绑定 this
        console.log(`Hello, ${this.name}`);
    }
};

---

3. 模板字符串（Template Literals）

支持多行文本和插值。

const name = "Bob";
const msg = `Hello, ${name}!
How are you today?`;
console.log(msg);

---

4. 解构赋值（Destructuring）

从数组或对象中提取数据。

// 数组解构
const [a, b] = [1, 2];

// 对象解构
const person = { firstName: "John", age: 30 };
const { firstName, age } = person;

// 函数参数解构
function greet({ name, city }) {
    console.log(`${name} lives in ${city}`);
}
greet({ name: "Anna", city: "Paris" });

---

5. 默认参数与扩展运算符

// 默认参数
function multiply(a, b = 1) {
    return a * b;
}

// 扩展运算符（Spread）
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1,2,3,4]

const obj1 = { x: 1 };
const obj2 = { ...obj1, y: 2 }; // {x:1, y:2}

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

---

6. 类（Classes）

语法糖，基于原型的封装。

class Person {
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hi, I'm ${this.name}`);
    }

    static info() {
        console.log("This is a Person class.");
    }
}

class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    greet() {
        console.log(`Hi, I'm ${this.name}, Grade: ${this.grade}`);
    }
}

---

7. 模块化（Modules）

支持 import / export 实现模块拆分。

// math.js
export const PI = 3.14159;
export function circleArea(r) {
    return PI * r ** 2;
}

// main.js
import { PI, circleArea } from './math.js';
console.log(circleArea(5));

注意：需在 HTML 中使用 <script type="module"> 或通过打包工具（Webpack/Vite）运行。

---

8. Promise 与异步编程

// 使用 Promise
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

// async/await（ES2017）
async function getData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

---

9. Map、Set、WeakMap、WeakSet

// Set - 不重复值集合
const unique = new Set([1, 2, 2, 3]); // {1, 2, 3}

// Map - 键值对映射（键可以是任意类型）
const map = new Map();
map.set('name', 'Alice');
map.set(document.body, 'body element');

// WeakMap / WeakSet：弱引用，利于垃圾回收

---

10. 新增内置方法与语法

特性	示例
可选链（?.）	user?.address?.street
空值合并（??）	value ?? 'default'
动态导入（import()）	const module = await import('./module.js');
BigInt	const bigNum = 123n;
globalThis	统一访问全局对象：globalThis.setTimeout(...)

---

🔧 开发环境建议

• 使用 Babel 转译高版本 JS 到兼容低版本浏览器的代码
• 使用 Webpack / Vite / Rollup 进行模块打包
• 使用 ESLint + Prettier 规范代码风格
• 在现代框架中广泛使用：
  • React（函数组件 + Hooks）
  • Vue 3（Composition API）
  • Angular（TypeScript 基于 ES6+）

---

📈 总结：为什么叫“现代”JavaScript？

方面	传统 JS（ES5）	现代 JS（ES6+）
变量声明	var（易出错）	let / const（安全）
函数	function	箭头函数、默认参数
模块	无原生支持	import/export
异步	回调地狱	Promise / async/await
面向对象	原型链难理解	class 语法清晰
数据结构	Array/Object	Map/Set/WeakMap等

---

现代JavaScript（Modern JavaScript）通常指的是使用ES6（ECMAScript 2015）及之后版本中引入的新特性和语法来编写JavaScript代码。这些新特性使得JavaScript更加强大、灵活和易于维护。以下是一些现代JavaScript的关键特性：

1. 箭头函数（Arrow Functions）：
   箭头函数提供了一种更简洁的函数定义方式，并且不绑定自己的this值，而是继承自外围作用域的this值。

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

2. 模板字符串（Template Literals）：
   模板字符串允许嵌入表达式，并支持多行字符串，使字符串拼接更加方便。

   const name = 'Alice';
   const greeting = `Hello, ${name}!`;
   

3. 解构赋值（Destructuring Assignment）：
   解构赋值允许从数组或对象中提取数据，并将其赋值给变量，简化了代码。

   const [first, second] = [1, 2];
   const { name, age } = { name: 'Alice', age: 25 };
   

4. 默认参数（Default Parameters）：
   可以为函数参数设置默认值，当调用函数时未传递该参数时，将使用默认值。

   function greet(name = 'Guest') {
       console.log(`Hello, ${name}!`);
   }
   

5. 类（Classes）：
   JavaScript中的类语法是基于原型的面向对象编程的一种实现，提供了更接近传统面向对象语言的语法。

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

6. 模块（Modules）：
   JavaScript模块允许将代码分割成多个文件，并通过import和export语句进行导入和导出。

   // module.js
   export function greet(name) {
       console.log(`Hello, ${name}!`);
   }
   
   // main.js
   import { greet } from './module.js';
   greet('Alice');
   

7. Promise和异步/等待（Promises and async/await）：
   Promise是处理异步操作的一种方式，而async和await关键字使得异步代码看起来更像同步代码，提高了可读性。

   async function fetchData() {
       try {
           const response = await fetch('https://api.example.com/data');
           const data = await response.json();
           console.log(data);
       } catch (error) {
           console.error('Error fetching data:', error);
       }
   }
   

8. 扩展运算符（Spread Operator）：
   扩展运算符允许展开数组或对象，使得操作更加简洁。

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

9. let和const：
   let和const关键字用于声明变量，let声明的变量可以重新赋值，而const声明的变量则不能。

   let x = 10;
   const y = 20;
   

10. Map和Set：
    Map和Set是ES6引入的新的集合类型，分别用于存储键值对和唯一值。

    const map = new Map();
    map.set('key', 'value');
    console.log(map.get('key')); // 'value'
    
    const set = new Set();
    set.add(1);
    set.add(2);
    console.log(set.has(1)); // true
    

The last few years have been dramatic ones in JavaScript. Features people had talked about for years went from ideas, to standards, to features you can reliably depend on in most environments. The speed at which these have been adopted is staggering, mostly thanks to auto-updating browsers and an aggressive Node.js release schedule.

The patterns at the core of request are out of date. A few people might argue with that assessment, and I know who they are so I won’t be surprised, but it’s true. I have often been skeptical of the impact some of these features would have only to find myself adopting them wholesale not long after they are available in only the latest release of Node.js.

There’s a transition happening now in the ecosystem to these patterns. How messy that will be is still up in the air and I’m not going to try and read the tea leafs and figure out what the future looks like in that regard. The question for request is “Do we try to survive through that transition?” A year ago, I thought the answer was obvious and that we would, but now I’m convinced of the opposite.

A version of request written to truly embrace these new language patterns is, effectively, a new module. I’ve explored this space a bit already and have a project I’m quite happy with but it is incompatible with request in every conceivable way. What’s the value in a version of request that is incompatible with the old patterns yet not fully embracing the new ones? What’s the point in being partially compatible when there’s a whole world of new modules, written by new developers, that are re-thinking these problems with these patterns in mind?

The best thing for these new modules is for request to slowly fade away, eventually becoming just another memory of that legacy stack. Taking the position request has now and leveraging it for a bigger share of the next generation of developers would be a disservice to those developers as it would drive them away from better modules that don’t have the burden of request’s history.