javascript-es6

# JavaScript ES6+特性技能 ## 概述 ES6+（ECMAScript 2015及后续版本）为JavaScript带来了大量现代化特性，显著提升了语言的表达能力和开发效率。不当的特性使用会导致兼容性问题、性能下降、代码可读性差。 **核心原则**: 好的ES6+代码应该简洁明了、性能优良、兼容性好、易于维护。坏的ES6+代码会过度复杂、性能损耗、兼容性差。 ## 何时使用 **始终:** - 开发现代Web应用时 - 构建前端框架时 - 处理异步编程时 - 优化代码结构时 - 提升开发效率时 - 团队协作开发时 **触发短语:** - "如何使用箭头函数？" - "ES6+最佳实践" - "Promise和async/await区别" - "解构赋值怎么用？" - "模块化编程方案" - "ES6+性能优化" ## JavaScript ES6+技能功能 ### 变量与作用域 - let和const关键字 - 块级作用域 - 暂时性死区 - 变量提升差异 ### 函数特性 - 箭头函数 - 默认参数 - 剩余参数 - 函数参数解构 ### 对象与数组 - 对象字面量增强 - 数组方法扩展 - 解构赋值 - 扩展运算符 ### 异步编程 - Promise对象 - async/await语法 - Generator函数 - 迭代器和可迭代对象 ### 模块系统 - ES6模块语法 - 动态导入 - 命名导出和默认导出 - 循环依赖处理 ## 常见问题 ### 兼容性问题 - **问题**: 旧浏览器不支持ES6+特性 - **原因**: 缺乏转译和polyfill处理 - **解决**: 使用Babel转译和core-js polyfill - **问题**: Node.js版本兼容性 - **原因**: 不同Node.js版本对ES6+支持程度不同 - **解决**: 检查目标运行环境版本 ### 性能问题 - **问题**: 过度使用解构赋值 - **原因**: 频繁的对象创建和销毁 - **解决**: 合理使用解构，避免性能热点 - **问题**: 箭头函数滥用 - **原因**: 不理解this绑定差异 - **解决**: 根据场景选择合适的函数类型 ### 代码质量问题 - **问题**: 模块导入混乱 - **原因**: 缺乏统一的模块组织策略 - **解决**: 建立清晰的模块导入规范 ## 代码示例 ### 变量声明与作用域 ```javascript // 变量声明对比 function variableDeclarations() { // var - 函数作用域，存在变量提升 console.log(varVar); // undefined (变量提升) var varVar = 'var变量'; // let - 块级作用域，暂时性死区 // console.log(letVar); // ReferenceError (暂时性死区) let letVar = 'let变量'; // const - 块级作用域，必须初始化 const constVar = 'const变量'; // 块级作用域演示 if (true) { var blockVar = '块内var变量'; let blockLet = '块内let变量'; const blockConst = '块内const变量'; } console.log(blockVar); // 可以访问 // console.log(blockLet); // ReferenceError // console.log(blockConst); // ReferenceError return { varVar, letVar, constVar }; } // 常量对象和数组 function constantsExample() { const person = { name: '张三', age: 30 }; // 可以修改对象属性 person.age = 31; person.city = '北京'; // 不能重新赋值 // person = {}; // TypeError const numbers = [1, 2, 3]; numbers.push(4); // 可以修改数组内容 // numbers = [5, 6]; // TypeError return { person, numbers }; } ``` ### 箭头函数与普通函数对比 ```javascript // 箭头函数语法 const arrowFunctions = { // 基本箭头函数 basic: () => 'Hello World', // 带参数的箭头函数 withParams: (name, age) => `${name}今年${age}岁`, // 带默认参数 withDefaults: (name = '匿名', age = 0) => `${name}今年${age}岁`, // 多行箭头函数 multiLine: (x, y) => { const sum = x + y; const product = x * y; return { sum, product }; }, // 对象字面量返回 objectReturn: (name, age) => ({ name, age }) }; // this绑定对比 function thisBindingExample() { const person = { name: '张三', age: 30, // 普通函数 - this指向调用者 sayNameNormal: function() { console.log(this.name); // 张三 setTimeout(function() { console.log(this.name); // undefined (全局this) }, 100); }, // 箭头函数 - 继承外层this sayNameArrow: function() { console.log(this.name); // 张三 setTimeout(() => { console.log(this.name); // 张三 (继承外层this) }, 100); }, // 箭头函数作为方法 - this指向外层 sayNameMethod: () => { console.log(this.name); // undefined (全局this) } }; return person; } // 使用示例 function demonstrateArrowFunctions() { console.log(arrowFunctions.basic()); // Hello World console.log(arrowFunctions.withParams('李四', 25)); // 李四今年25岁 console.log(arrowFunctions.withDefaults()); // 匿名今年0岁 console.log(arrowFunctions.multiLine(3, 4)); // {sum: 7, product: 12} console.log(arrowFunctions.objectReturn('王五', 28)); // {name: "王五", age: 28} const person = thisBindingExample(); person.sayNameNormal(); person.sayNameArrow(); person.sayNameMethod(); } ``` ### 解构赋值应用 ```javascript // 对象解构 function objectDestructuring() { const user = { id: 1, name: '张三', email: 'zhangsan@example.com', profile: { age: 30, city: '北京', hobbies: ['编程', '阅读', '旅游'] } }; // 基本解构 const { name, email } = user; console.log(name, email); // 张三 zhangsan@example.com // 重命名解构 const { name: userName, email: userEmail } = user; console.log(userName, userEmail); // 张三 zhangsan@example.com // 默认值解构 const { name: n = '匿名', phone = '未设置' } = user; console.log(n, phone); // 张三 未设置 // 嵌套解构 const { profile: { age, city } } = user; console.log(age, city); // 30 北京 // 嵌套重命名 const { profile: { age: userAge, hobbies: [firstHobby] } } = user; console.log(userAge, firstHobby); // 30 编程 // 函数参数解构 function displayUser({ name, email, profile: { age } }) { return `${name} (${email}) 今年${age}岁`; } return displayUser(user); } // 数组解构 function arrayDestructuring() { const colors = ['红色', '绿色', '蓝色', '黄色']; // 基本解构 const [first, second, third] = colors; console.log(first, second, third); // 红色 绿色 蓝色 // 跳过元素 const [, , thirdColor] = colors; console.log(thirdColor); // 蓝色 // 剩余元素 const [primary, ...others] = colors; console.log(primary, others); // 红色 ["绿色", "蓝色", "黄色"] // 默认值 const [a, b, c, d = '默认色'] = colors; console.log(d); // 黄色 // 交换变量 let x = 10, y = 20; [x, y] = [y, x]; console.log(x, y); // 20 10 // 函数返回值解构 function getCoordinates() { return [10, 20, 30]; } const [xCoord, yCoord, zCoord] = getCoordinates(); console.log(xCoord, yCoord, zCoord); // 10 20 30 return { first, second, third, primary, others }; } ``` ### 模板字符串应用 ```javascript // 模板字符串基础 function templateStrings() { const name = '张三'; const age = 30; const city = '北京'; // 基本模板字符串 const message = `你好，我是${name}，今年${age}岁，来自${city}。`; console.log(message); // 多行字符串 const html = ` <div class="user-card"> <h2>${name}</h2> <p>年龄: ${age}</p> <p>城市: ${city}</p> </div> `; console.log(html); // 表达式计算 const price = 100; const tax = 0.08; const total = `总价: $${price} (含税: $${(price * tax).toFixed(2)})`; console.log(total); // 函数调用 const formatName = (name) => name.toUpperCase(); const greeting = `你好，${formatName(name)}！`; console.log(greeting); // 条件表达式 const status = age >= 18 ? '成年' : '未成年'; const description = `${name}是${status}人`; console.log(description); return { message, html, total, greeting, description }; } // 标签模板字符串 function taggedTemplates() { function highlight(strings, ...values) { return strings.reduce((result, string, i) => { const value = values[i] ? `<mark>${values[i]}</mark>` : ''; return result + string + value; }, ''); } const name = '张三'; const age = 30; const highlighted = highlight`姓名: ${name}, 年龄: ${age}`; console.log(highlighted); // 输出: 姓名: <mark>张三</mark>, 年龄: <mark>30</mark> // SQL查询构建器 function sql(strings, ...values) { return strings.reduce((result, string, i) => { const value = values[i] !== undefined ? `'${values[i]}'` : ''; return result + string + value; }, ''); } const tableName = 'users'; const userId = 123; const query = sql`SELECT * FROM ${tableName} WHERE id = ${userId}`; console.log(query); // 输出: SELECT * FROM 'users' WHERE id = '123' return { highlighted, query }; } ``` ### Promise与async/await ```javascript // Promise基础 function promiseBasics() { // 创建Promise const fetchUser = (userId) => { return new Promise((resolve, reject) => { setTimeout(() => { if (userId > 0) { resolve({ id: userId, name: `用户${userId}`, email: `user${userId}@example.com` }); } else { reject(new Error('用户ID必须大于0')); } }, 1000); }); }; // 使用Promise fetchUser(1) .then(user => { console.log('获取用户成功:', user); return user.name; }) .then(name => { console.log('用户名:', name); }) .catch(error => { console.error('获取用户失败:', error); }) .finally(() => { console.log('操作完成'); }); // Promise链式调用 const processUser = async (userId) => { try { const user = await fetchUser(userId); const formattedUser = await formatUser(user); const savedUser = await saveUser(formattedUser); return savedUser; } catch (error) { console.error('处理用户失败:', error); throw error; } }; // Promise.all - 并行执行 const fetchMultipleUsers = async (userIds) => { try { const users = await Promise.all( userIds.map(id => fetchUser(id)) ); return users; } catch (error) { console.error('批量获取用户失败:', error); return []; } }; // Promise.race - 竞争执行 const fetchWithTimeout = (userId, timeout = 2000) => { return Promise.race([ fetchUser(userId),