做网站工作图百度旧版本

一、ES6 核心特性与语法

1. 变量声明

   • let 与 const
     替代 var，提供块级作用域：

     if (true) {let x = 10;      // 块级作用域const y = 20;    // 常量（不可重新赋值）
     }
     console.log(x);    // 报错：x未定义

2. 箭头函数（Arrow Functions）
   简化函数语法，自动绑定外层 this：

   // 传统函数
   const sum = function(a, b) { return a + b; };
   // 箭头函数
   const sum = (a, b) => a + b;

3. 模板字符串（Template Literals）
   支持多行字符串与变量嵌入：

   const name = "Alice";
   console.log(`Hello, ${name}!
   This is a multi-line string.`);

4. 解构赋值（Destructuring）
   快速提取对象或数组的值：

   // 对象解构
   const { age, name } = user;  
   // 数组解构
   const [first, second] = [1, 2];

5. 类与继承（Class & Inheritance）
   语法糖简化面向对象编程：

   class Animal {constructor(name) { this.name = name; }speak() { console.log(`${this.name} makes a noise`); }
   }
   class Dog extends Animal {speak() { super.speak(); console.log("Woof!"); }
   }

6. 模块化（Modules）
   支持 import 和 export：

   // math.js
   export const add = (a, b) => a + b;
   // app.js
   import { add } from './math.js';

7. Promise 与异步编程
   解决回调地狱，支持链式调用：

   fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

---

二、新增数据类型与数据结构

1. Symbol
   唯一且不可变的值，常用于对象属性键

   const id = Symbol('id');
   const obj = { [id]: 123 };

2. Map 与 Set

   • Map：键值对集合，键可以是任意类型。

   • Set：唯一值的集合。

   const map = new Map();
   map.set('key', 'value');
   const set = new Set([1, 2, 2, 3]);  // {1, 2, 3}

3. 迭代器与生成器（Iterators & Generators）
   自定义可迭代对象：

   function* gen() {yield 1;yield 2;
   }
   const iterator = gen();
   console.log(iterator.next().value);  // 1

---

三、实用功能扩展

1. 默认参数（Default Parameters）

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

2. 展开运算符（Spread Operator）
   合并数组或对象：

   const arr1 = [1, 2];
   const arr2 = [...arr1, 3];  // [1, 2, 3]
   const obj = { ...oldObj, newProp: 42 };

3. 剩余参数（Rest Parameters）
   将参数转为数组：

   function sum(...nums) {return nums.reduce((a, b) => a + b, 0);
   }
   sum(1, 2, 3);  // 6

4. Proxy 与 Reflect
   拦截对象操作：

   const proxy = new Proxy(target, {get(obj, prop) { return Reflect.get(obj, prop); }
   });

---

四、兼容性与工程化

1. 浏览器支持

   • 现代浏览器（Chrome 58+、Firefox 54+）已原生支持大部分 ES6 特性。

   • 旧版浏览器需通过 Babel 转译为 ES5。

2. Babel 配置示例

   npm install @babel/core @babel/preset-env --save-dev
   

   // .babelrc
   {"presets": ["@babel/preset-env"]
   }

3. Polyfill
   补充缺失的全局对象（如 Promise）：

   npm install core-js regenerator-runtime
   

   import 'core-js/stable';
   import 'regenerator-runtime/runtime';

---

五、典型使用场景

1. 简化代码逻辑

   • 使用箭头函数和模板字符串减少冗余代码。

   • 解构赋值简化对象/数组操作。

2. 异步流程控制

   • Promise 与 async/await 优化异步代码结构。

3. 模块化开发

   • 通过 import/export 实现代码分块，提升可维护性。

---

注意事项

1. 严格模式
   ES6 模块默认启用严格模式（'use strict'），需避免隐式全局变量。

2. this 绑定问题
   箭头函数中的 this 指向外层上下文，避免在对象方法中误用。

3. 性能考量
   Proxy 和 Reflect 可能影响性能，高频操作中慎用。

---

通过掌握 ES6 的核心特性，可显著提升 JavaScript 代码的可读性、维护性和开发效率。结合 Babel 等工具，可无缝兼容旧环境。