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绑定差异

• 解决: 根据场景选择合适的函数类型

代码质量问题

• 问题: 模块导入混乱
• 原因: 缺乏统一的模块组织策略
• 解决: 建立清晰的模块导入规范

代码示例

变量声明与作用域

// 变量声明对比
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 };
}

箭头函数与普通函数对比

// 箭头函数语法
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();
}

解构赋值应用

// 对象解构
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 };
}

模板字符串应用

// 模板字符串基础
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

// 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),
            new Promise((_, reject) => 
                setTimeout(() => reject(new Error('请求超时')), timeout)
            )
        ]);
    };
    
    return { fetchUser, processUser, fetchMultipleUsers, fetchWithTimeout };
}

// async/await应用
function asyncAwaitExamples() {
    // 基本async函数
    const getUserInfo = async (userId) => {
        try {
            // 模拟API调用
            const response = await fetch(`/api/users/${userId}`);
            const user = await response.json();
            
            // 处理用户数据
            const processedUser = {
                ...user,
                displayName: `${user.firstName} ${user.lastName}`,
                isActive: user.status === 'active'
            };
            
            return processedUser;
        } catch (error) {
            console.error('获取用户信息失败:', error);
            throw error;
        }
    };
    
    // 并行async操作
    const getUserWithPosts = async (userId) => {
        try {
            const [user, posts] = await Promise.all([
                getUserInfo(userId),
                fetchUserPosts(userId)
            ]);
            
            return {
                user,
                posts,
                postCount: posts.length
            };
        } catch (error) {
            console.error('获取用户和文章失败:', error);
            throw error;
        }
    };
    
    // 顺序async操作
    const createUserWithProfile = async (userData) => {
        try {
            // 1. 创建用户
            const user = await createUser(userData);
            
            // 2. 创建用户档案
            const profile = await createUserProfile(user.id, {
                bio: userData.bio,
                avatar: userData.avatar
            });
            
            // 3. 发送欢迎邮件
            await sendWelcomeEmail(user.email);
            
            return { user, profile };
        } catch (error) {
            console.error('创建用户失败:', error);
            throw error;
        }
    };
    
    // 错误处理和重试
    const fetchWithRetry = async (url, maxRetries = 3) => {
        for (let i = 0; i < maxRetries; i++) {
            try {
                const response = await fetch(url);
                if (response.ok) {
                    return await response.json();
                }
                throw new Error(`HTTP ${response.status}`);
            } catch (error) {
                if (i === maxRetries - 1) {
                    throw error;
                }
                console.log(`重试 ${i + 1}/${maxRetries}:`, error.message);
                await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
            }
        }
    };
    
    return { getUserInfo, getUserWithPosts, createUserWithProfile, fetchWithRetry };
}

类与继承

// 基本类定义
class Person {
    // 私有属性
    #id;
    #secret;
    
    constructor(name, age, id) {
        this.name = name;
        this.age = age;
        this.#id = id;
        this.#secret = 'private data';
    }
    
    // 公共方法
    getInfo() {
        return {
            name: this.name,
            age: this.age,
            id: this.#id
        };
    }
    
    // getter
    get displayName() {
        return `${this.name} (${this.age}岁)`;
    }
    
    // setter
    set age(newAge) {
        if (newAge >= 0 && newAge <= 150) {
            this.age = newAge;
        } else {
            throw new Error('年龄必须在0-150之间');
        }
    }
    
    // 静态方法
    static createAdult(name, id) {
        return new Person(name, 18, id);
    }
    
    // 私有方法
    #validateAge(age) {
        return age >= 0 && age <= 150;
    }
    
    // 公共方法调用私有方法
    updateAge(newAge) {
        if (this.#validateAge(newAge)) {
            this.age = newAge;
            return true;
        }
        return false;
    }
}

// 继承
class Employee extends Person {
    #salary;
    #department;
    
    constructor(name, age, id, salary, department) {
        super(name, age, id);
        this.#salary = salary;
        this.#department = department;
    }
    
    // 重写父类方法
    getInfo() {
        const baseInfo = super.getInfo();
        return {
            ...baseInfo,
            salary: this.#salary,
            department: this.#department
        };
    }
    
    // 新方法
    getAnnualSalary() {
        return this.#salary * 12;
    }
    
    // getter
    get salary() {
        return this.#salary;
    }
    
    // setter
    set salary(newSalary) {
        if (newSalary >= 0) {
            this.#salary = newSalary;
        } else {
            throw new Error('薪水不能为负数');
        }
    }
    
    // 静态方法
    static createManager(name, id) {
        return new Employee(name, 30, id, 50000, '管理');
    }
}

// 使用示例
function classExamples() {
    // 创建Person实例
    const person = new Person('张三', 30, 1);
    console.log(person.getInfo());
    console.log(person.displayName);
    
    // 使用静态方法
    const adult = Person.createAdult('李四', 2);
    console.log(adult.getInfo());
    
    // 创建Employee实例
    const employee = new Employee('王五', 28, 3, 8000, '技术');
    console.log(employee.getInfo());
    console.log(employee.getAnnualSalary());
    
    // 使用静态方法
    const manager = Employee.createManager('赵六', 4);
    console.log(manager.getInfo());
    
    return { person, adult, employee, manager };
}

模块系统

// math.js - 模块导出
export const PI = 3.14159;

export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

export class Calculator {
    constructor() {
        this.result = 0;
    }
    
    add(value) {
        this.result += value;
        return this;
    }
    
    multiply(value) {
        this.result *= value;
        return this;
    }
    
    getResult() {
        return this.result;
    }
}

// 默认导出
export default class AdvancedCalculator extends Calculator {
    power(exponent) {
        this.result = Math.pow(this.result, exponent);
        return this;
    }
    
    sqrt() {
        this.result = Math.sqrt(this.result);
        return this;
    }
}

// app.js - 模块导入
import AdvancedCalculator, { PI, add, multiply, Calculator } from './math.js';
import * as MathUtils from './math.js';

// 使用导入的内容
function moduleExamples() {
    // 使用默认导出
    const calc = new AdvancedCalculator();
    const result = calc.add(10).multiply(2).power(2).sqrt().getResult();
    console.log('计算结果:', result);
    
    // 使用命名导出
    console.log('PI值:', PI);
    console.log('加法:', add(5, 3));
    console.log('乘法:', multiply(5, 3));
    
    // 使用命名空间导入
    const simpleCalc = new MathUtils.Calculator();
    simpleCalc.add(5).multiply(3);
    console.log('简单计算结果:', simpleCalc.getResult());
    
    // 动态导入
    async function loadModule() {
        try {
            const mathModule = await import('./math.js');
            console.log('动态导入PI:', mathModule.PI);
            
            const DynamicCalc = mathModule.default;
            const dynamicCalc = new DynamicCalc();
            dynamicCalc.add(100).multiply(2);
            console.log('动态计算结果:', dynamicCalc.getResult());
        } catch (error) {
            console.error('模块加载失败:', error);
        }
    }
    
    loadModule();
    
    return { calc, result, simpleCalc };
}

迭代器和生成器

// 自定义迭代器
class NumberRange {
    constructor(start, end, step = 1) {
        this.start = start;
        this.end = end;
        this.step = step;
    }
    
    [Symbol.iterator]() {
        let current = this.start;
        return {
            next: () => {
                if (current <= this.end) {
                    const value = current;
                    current += this.step;
                    return { value, done: false };
                } else {
                    return { value: undefined, done: true };
                }
            }
        };
    }
}

// 生成器函数
function* fibonacciGenerator() {
    let a = 0, b = 1;
    
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

function* idGenerator(start = 1) {
    let id = start;
    while (true) {
        yield id++;
    }
}

// 生成器应用
function generatorExamples() {
    // 使用自定义迭代器
    const range = new NumberRange(1, 5);
    console.log([...range]); // [1, 2, 3, 4, 5]
    
    for (const num of range) {
        console.log(num); // 1, 2, 3, 4, 5
    }
    
    // 使用斐波那契生成器
    const fib = fibonacciGenerator();
    console.log(fib.next().value); // 0
    console.log(fib.next().value); // 1
    console.log(fib.next().value); // 1
    console.log(fib.next().value); // 2
    
    // 获取前10个斐波那契数
    const first10Fib = [];
    const fibGen = fibonacciGenerator();
    for (let i = 0; i < 10; i++) {
        first10Fib.push(fibGen.next().value);
    }
    console.log('前10个斐波那契数:', first10Fib);
    
    // ID生成器
    const idGen = idGenerator(1000);
    console.log('ID1:', idGen.next().value); // 1001
    console.log('ID2:', idGen.next().value); // 1002
    
    // 生成器处理异步操作
    async function* asyncGenerator() {
        yield await fetch('/api/users');
        yield await fetch('/api/posts');
        yield await fetch('/api/comments');
    }
    
    const processAsyncData = async () => {
        const asyncGen = asyncGenerator();
        
        for await (const response of asyncGen) {
            const data = await response.json();
            console.log('处理数据:', data);
        }
    };
    
    return { range, first10Fib, idGen };
}

最佳实践

代码风格

1. 优先使用const: 只在需要重新赋值时使用let
2. 箭头函数: 适合回调函数，避免在方法中使用
3. 模板字符串: 优先使用模板字符串替代字符串拼接
4. 解构赋值: 提高代码可读性，避免重复访问

性能优化

1. 避免过度解构: 在性能敏感代码中谨慎使用解构
2. 合理使用Promise: 避免不必要的Promise包装
3. 模块懒加载: 使用动态导入减少初始加载时间
4. 内存管理: 及时清理事件监听器和定时器

兼容性处理

1. Babel转译: 确保代码在目标环境中运行
2. Polyfill: 为缺失的特性提供兼容实现
3. 特性检测: 使用特性检测而非浏览器检测
4. 渐进增强: 在支持的环境中使用新特性

相关技能

• react-components - React组件开发
• state-management - 状态管理
• frontend - 前端开发
• testing-frontend - 前端测试
• performance-optimization - 性能优化