转换 ES6 代码时，需要注意哪些代码结构上的调整

1. 作用域结构调整
   • 块级作用域：
     • 在ES6中，let和const提供了块级作用域。例如，在if语句、for循环等块级结构中声明的变量，其作用域仅限于该块。当转换为ES5时，由于ES5只有函数级作用域（var声明的变量），需要使用立即执行函数表达式（IIFE）来模拟块级作用域。
     • 例如，ES6代码：

       for (let i = 0; i < 5; i++) {
                
           console.log(i);
       }
       console.log(i); // 报错，i超出作用域
       

       转换为ES5：

       (function() {
                
           for (var i = 0; i < 5; i++) {
                
               console.log(i);
           }
       })();
       console.log(i); // 报错，i未定义，因为它在IIFE的作用域之外
       

   • 函数作用域内的变量提升：
     • ES5中的var声明会导致变量提升，这与ES6中let和const的行为不同。在转换过程中，需要注意这种差异，避免出现变量在声明前被访问的情况，以免产生意外的结果。
     • 例如，ES6代码：

       console.log(a); // 报错，a未声明
       const a = 10;
       

       转换为ES5时，要确保类似的错误不会出现，正确的转换可能是：

       (function() {
                
           var a;
           console.log(a); // undefined
           a = 10;
       })();
       

2. 函数结构调整
   • 箭头函数：
     • ES6箭头函数的this绑定是词法作用域的，它会继承外层函数的this值。转换为ES5时，需要通过保存外层函数的this值（例如，使用self或that变量）来模拟这种行为。
     • 例如，ES6箭头函数：

       const obj = {
                
           name: 'John',
           sayHello: () => {
                
               console.log(`Hello, ${
                  this.name}`);
           }
       };
       

       转换为ES5：

       var obj = {
                
           name: 'John',
           sayHello: function() {
                
               var _this = this;
               console.log('Hello, ' + _this.name);
           }
       };
       

   • 函数默认参数：
     • ES6允许在函数定义时设置默认参数。在转换为ES5时，需要使用逻辑判断来模拟默认参数的行为。
     • 例如，ES6函数：

       function add(a = 1, b = 2) {
                
           return a + b;
       }
       

       转换为ES5：

       function add(a, b) {
                
           a = a === undefined? 1 : a;
           b = b === undefined? 2 : b;
           return a + b;
       }
       

3. 对象结构调整
   • 对象解构赋值：
     • ES6的对象解构赋值可以方便地从对象中提取属性并赋值给变量。转换为ES5时，需要逐个获取对象的属性并赋值。
     • 例如，ES6的对象解构赋值：

       const {
                x, y} = {
                x: 10, y: 20};
       

       转换为ES5：

       var obj = {
                x: 10, y: 20};
       var x = obj.x;
       var y = obj.y;
       

   • 对象字面量的增强写法：
     • ES6中对象字面量有一些增强写法，如方法简写和计算属性名。在转换为ES5时，需要将这些写法转换为传统的对象定义方式。
     • 例如，ES6对象字面量：
       ```js
       const name = 'John';
       const obj = {

       sayHello() {
           console.log(`Hello, my name is ${this.name}`);
       },
       

       ['key' + name]: 10
   };
   ```
   转换为ES5：
   ```js
   var name = 'John';
   var obj = {
       sayHello: function() {
           console.log('Hello, my name is'+ this.name);
       },
       get keyJohn() {
           return 10;
       }
   };
   ```

1. 模块结构调整

   • ES6模块转换为ES5模块格式：

     • ES6使用import和export进行模块管理，而ES5没有原生的这种模块系统。在转换时，如果是用于浏览器环境，可以考虑使用AMD（如RequireJS）或CommonJS（主要用于Node.js环境）来模拟模块的加载和导出。

     • 例如，ES6模块：

       // module1.js
       export const add = (a, b) => a + b;
       
       // module2.js
       import {
                add} from './module1.js';
       const result = add(10, 20);
       

       转换为ES5（以CommonJS为例）：

       // module1.js
       module.exports = {
                
           add: function(a, b) {
                
               return a + b;
           }
       };
       
       // module2.js
       var module1 = require('./module1.js');
       var result = module1.add(10, 20);