ES6 新特性全面使用指南及组件封装实用方法解析

小焱

发布于 2025-05-27 08:13:50

11200

代码可运行

文章被收录于专栏：前端开发前端开发

运行总次数：0

代码可运行

块级作用域变量使用方法

（一）let关键字使用场景

循环中的块级作用域 // 传统var的问题

   for (var i = 0; i < 3; i++) {
     setTimeout(() => console.log(i), 100); // 输出3, 3, 3
   }
   
   // 使用let解决
   for (let i = 0; i < 3; i++) {
     setTimeout(() => console.log(i), 100); // 输出0, 1, 2
   }

块级作用域限制

if (true) {
     let x = 10;
   }
   console.log(x); // 报错：x is not defined

（二）const关键字使用场景

声明常量 const PI = 3.14; // PI = 3.1415; // 报错：Assignment to constant variable
引用类型常量 const person = { name: 'John' }; person.name = 'Mike'; // 合法：修改对象属性 // person = {}; // 报错：Assignment to constant variable

箭头函数封装与应用

（一）函数组件封装

// 传统函数组件
function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

// 箭头函数组件
const Button = (props) => (
  <button onClick={props.onClick}>{props.label}</button>
);

// 简化参数解构
const Button = ({ onClick, label }) => (
  <button onClick={onClick}>{label}</button>
);

（二）数组方法中的应用

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

// filter方法
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

// reduce方法
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

模板字符串高级应用

（一）多语言支持组件

// i18n.js
export const translations = {
  en: {
    greeting: 'Hello, {name}!',
    welcome: 'Welcome to our website.'
  },
  fr: {
    greeting: 'Bonjour, {name}!',
    welcome: 'Bienvenue sur notre site web.'
  }
};

export const t = (key, params = {}) => {
  const language = localStorage.getItem('language') || 'en';
  let message = translations[language][key] || key;
  
  return Object.keys(params).reduce((acc, param) => {
    return acc.replace(`{${param}}`, params[param]);
  }, message);
};

（二）标签模板封装

// highlight.js
export const highlight = (strings, ...values) => {
  let result = '';
  strings.forEach((string, i) => {
    result += string;
    if (i < values.length) {
      result += `<span class="highlight">${values[i]}</span>`;
    }
  });
  return result;
};

解构赋值高级技巧

（一）复杂对象解构

// 从props中解构并设置默认值
const UserProfile = ({ 
  user: { 
    name = 'Guest', 
    age = 0, 
    address: { city = 'Unknown' } = {} 
  } = {} 
}) => (
  <div>
    <p>Name: {name}</p>
    <p>Age: {age}</p>
    <p>City: {city}</p>
  </div>
);

（二）函数参数解构

// 函数参数解构
const calculateArea = ({ width, height }) => {
  return width * height;
};

const rect = { width: 10, height: 5 };
console.log(calculateArea(rect)); // 50

默认参数与扩展运算符封装

（一）组件默认参数

// 组件默认参数
const Card = ({ 
  title = 'Default Title', 
  content = 'Default Content', 
  style = {} 
}) => (
  <div className="card" style={{ ...style, border: '1px solid #ccc' }}>
    <h3>{title}</h3>
    <p>{content}</p>
  </div>
);

（二）高阶组件封装

// withLoading高阶组件
const withLoading = (Component) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return <div>Loading...</div>;
    }
    return <Component {...props} />;
  };
};

// 使用高阶组件
const LoadingButton = withLoading(Button);

类与继承组件封装

（一）基础组件封装

// BaseComponent.js
export class BaseComponent {
  constructor(props) {
    this.props = props;
    this.state = {};
  }
  
  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.render();
  }
  
  render() {
    // 子类实现
  }
}

（二）子类组件实现

// ButtonComponent.js
import { BaseComponent } from './BaseComponent';

export class ButtonComponent extends BaseComponent {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    if (this.props.onClick) {
      this.props.onClick();
    }
  }
  
  render() {
    return `
      <button onclick="${this.handleClick}">
        ${this.props.label || 'Click me'}
      </button>
    `;
  }
}

Promise与异步操作封装

（一）API请求封装

// api.js
export const fetchData = async (url, options = {}) => {
  try {
    const response = await fetch(url, {
      method: options.method || 'GET',
      headers: {
        'Content-Type': 'application/json',
        ...options.headers
      },
      body: options.body ? JSON.stringify(options.body) : null
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
};

（二）重试机制封装

// retry.js
export const withRetry = (fn, maxRetries = 3) => {
  return async (...args) => {
    let retries = 0;
    
    while (retries < maxRetries) {
      try {
        return await fn(...args);
      } catch (error) {
        retries++;
        if (retries >= maxRetries) {
          throw error;
        }
        console.log(`Retry ${retries} in ${retries * 1000}ms`);
        await new Promise(resolve => setTimeout(resolve, retries * 1000));
      }
    }
  };
};

// 使用重试机制
const fetchWithRetry = withRetry(fetchData, 3);

模块化最佳实践

（一）模块组织方式

src/
  components/
    Button/
      index.js
      Button.vue
      Button.test.js
  utils/
    index.js
    math.js
    string.js
  api/
    index.js
    user.js
    product.js
  store/
    index.js
    userStore.js
    productStore.js

（二）统一导出入口

// utils/index.js
export * from './math.js';
export * from './string.js';
export * from './date.js';

// 使用
import { add, multiply } from '../utils';

其他特性封装与应用

（一）可选链与空值合并应用

// 安全获取嵌套对象属性
const getUserCity = (user) => {
  return user?.address?.city ?? 'Unknown';
};

// 使用
const user = { name: 'John' };
console.log(getUserCity(user)); // 'Unknown'

（二）动态导入组件

// 按需加载组件
const loadHeavyComponent = async () => {
  const HeavyComponent = await import('./HeavyComponent.vue');
  return HeavyComponent.default;
};

// 在组件中使用
export default {
  components: {
    HeavyComponent: () => loadHeavyComponent()
  }
};