当前位置：首页 > news >正文

JavaScript进阶：ES6+特性与异步编程

news 2026/5/24 18:24:34

JavaScript进阶：ES6+特性与异步编程

1. 技术分析

1.1 ES6+概述

ES6+为JavaScript带来了革命性的改进：

ES6+特性 变量声明: let, const 箭头函数: () => {} 解构赋值: const {a, b} = obj 类: class语法 模块化: import/export 异步编程: Promise async/await Generator

1.2 异步编程模式

异步模式演进 回调函数: 嵌套地狱 Promise: 链式调用 async/await: 同步写法 异步处理: Promise.all Promise.race Promise.allSettled

1.3 ES6+特性对比

特性	ES5	ES6+
变量	var	let/const
函数	function	箭头函数
类	原型链	class语法
模块	IIFE	import/export

2. 核心功能实现

2.1 箭头函数与解构

// 箭头函数 const add = (a, b) => a + b; const square = x => x * x; const greet = ({ name, age }) => { return `Hello ${name}, you are ${age} years old`; }; // 对象解构 const user = { name: 'Alice', age: 30, city: 'Beijing' }; const { name, age } = user; // 数组解构 const numbers = [1, 2, 3, 4, 5]; const [first, second, ...rest] = numbers; // 默认值 const { city = 'Shanghai' } = user; // 函数参数解构 function printUser({ name, age }) { console.log(`${name}: ${age}`); }

2.2 Promise与异步

// Promise基础 const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { const data = { id: 1, name: 'test' }; resolve(data); }, 1000); }); }; // Promise链式调用 fetchData() .then(data => { console.log('Data:', data); return data.id; }) .then(id => { console.log('ID:', id); }) .catch(error => { console.error('Error:', error); }); // Promise.all const promise1 = fetchData(); const promise2 = fetchData(); Promise.all([promise1, promise2]) .then(results => { console.log('All results:', results); }); // Promise.allSettled Promise.allSettled([promise1, promise2]) .then(results => { results.forEach(result => { if (result.status === 'fulfilled') { console.log('Success:', result.value); } else { console.log('Failed:', result.reason); } }); });

2.3 async/await

// async函数 async function getUserData(userId) { try { const response = await fetch(`/api/users/${userId}`); const user = await response.json(); const postsResponse = await fetch(`/api/users/${userId}/posts`); const posts = await postsResponse.json(); return { ...user, posts }; } catch (error) { console.error('Error:', error); throw error; } } // 使用async/await async function processUsers() { try { const users = await Promise.all([ getUserData(1), getUserData(2), getUserData(3) ]); console.log('All users:', users); } catch (error) { console.error('Failed to get users:', error); } } // async箭头函数 const fetchAndProcess = async () => { const data = await fetchData(); return processData(data); };

3. 性能对比

3.1 异步模式对比

模式	可读性	错误处理	并发处理
回调	低	困难	困难
Promise	中	链式catch	Promise.all
async/await	高	try/catch	Promise.all

3.2 变量声明对比

声明方式	作用域	可重复声明	提升
var	函数作用域	是	是
let	块级作用域	否	暂时性死区
const	块级作用域	否	暂时性死区

3.3 模块系统对比

模块系统	静态分析	树摇优化	浏览器支持
CommonJS	否	困难	需要打包
ES Modules	是	容易	原生支持

4. 最佳实践

4.1 错误处理

// 推荐的错误处理模式 async function safeFetch(url) { try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { console.error('Fetch failed:', error); throw error; } }

4.2 代码风格

// 使用const优先 const PI = 3.14159; const config = { timeout: 5000 }; // 使用箭头函数保持简洁 const numbers = [1, 2, 3]; const doubled = numbers.map(n => n * 2); // 解构参数 function createUser({ name, email, age = 18 }) { return { name, email, age }; }