ES6的简写与传统JavaScript的对比

ES6（ECMAScript 2015）引入了许多新的语法和特性，其中一些是为了更简洁地编写代码。可以试着在项目中应用到

1. let和const关键字：

   • ES6:

     let x = 5;
     const PI = 3.14;
     

   • JavaScript:

     var x = 5;
     var PI = 3.14;
     

2. 箭头函数：

   • ES6:

     const add = (a, b) => a + b;
     

   • JavaScript:

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

3. 模板字符串：

   • ES6:

     const name = 'World';
     const greeting = `Hello, ${name}!`;
     

   • JavaScript:

     var name = 'World';
     var greeting = 'Hello, ' + name + '!';
     

4. 解构赋值：

   • ES6:

     const person = { name: 'John', age: 30 };
     const { name, age } = person;
     

   • JavaScript:

     var person = { name: 'John', age: 30 };
     var name = person.name;
     var age = person.age;
     

5. 默认参数：

   • ES6:

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

   • JavaScript:

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

6. 展开运算符：

   • ES6:

     const arr1 = [1, 2, 3];
     const arr2 = [...arr1, 4, 5];
     

   • JavaScript:

     var arr1 = [1, 2, 3];
     var arr2 = arr1.concat(4, 5);
     

7. 对象属性的简写：

   • ES6:

     const name = 'John';
     const age = 25;
     const person = { name, age };
     

   • JavaScript:

     var name = 'John';
     var age = 25;
     var person = { name: name, age: age };
     

8. 对象方法的简写：

   • ES6:

     const obj = {
       method() {
         // code
       }
     };
     

   • JavaScript:

     var obj = {
       method: function() {
         // code
       }
     };
     

9. 数组的解构赋值：

   • ES6:

     const [first, second] = [1, 2];
     

   • JavaScript:

     var first = [1, 2][0];
     var second = [1, 2][1];
     

10. Rest参数：

    • ES6:

      function sum(...numbers) {
        return numbers.reduce((acc, num) => acc + num, 0);
      }
      

    • JavaScript:

      function sum() {
        var numbers = Array.prototype.slice.call(arguments);
        return numbers.reduce(function(acc, num) {
          return acc + num;
        }, 0);
      }
      

11. 模块化导入和导出：

    • ES6:

      // 导入
      import { add, subtract } from './math';
      
      // 导出
      export const multiply = (a, b) => a * b;
      

    • JavaScript:

      // 导入
      var math = require('./math');
      var add = math.add;
      var subtract = math.subtract;
      
      // 导出
      exports.multiply = function(a, b) {
        return a * b;
      };
      

12. Promise：

    • ES6:

      const fetchData = () => new Promise((resolve, reject) => {
        // Async operation
        if (success) {
          resolve(data);
        } else {
          reject(error);
        }
      });
      

    • JavaScript:

      var fetchData = function() {
        return new Promise(function(resolve, reject) {
          // Async operation
          if (success) {
            resolve(data);
          } else {
            reject(error);
          }
        });
      };
      

13. Map和Set：

    • ES6:

      const myMap = new Map();
      const mySet = new Set();
      

    • JavaScript:

      var myMap = new Object(); // 或者使用字面量 var myMap = {};
      var mySet = new Object(); // 或者使用字面量 var mySet = {};
      

14. 模块化导入时的重命名：

    • ES6:

      import { add as sum, subtract as sub } from './math';
      

    • JavaScript:

      var math = require('./math');
      var sum = math.add;
      var sub = math.subtract;
      

15. 对象属性值的简写：

    • ES6:

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

    • JavaScript:

      var x = 10, y = 20;
      var point = { x: x, y: y };
      

16. Promise的链式调用：

    • ES6:

      fetch(url)
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error));
      

    • JavaScript:

      fetch(url)
        .then(function(response) {
          return response.json();
        })
        .then(function(data) {
          console.log(data);
        })
        .catch(function(error) {
          console.error(error);
        });
      

17. Class定义类：

    • ES6:

      class Person {
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
      
        sayHello() {
          console.log(`Hello, my name is ${this.name}`);
        }
      }
      

    • JavaScript:

      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      
      Person.prototype.sayHello = function() {
        console.log('Hello, my name is ' + this.name);
      };
      

18. 模块默认导出：

    • ES6:

      // 导出
      export default function() {
        // code
      }
      
      // 导入
      import myFunction from './module';
      

    • JavaScript:

      // 导出
      module.exports = function() {
        // code
      };
      
      // 导入
      var myFunction = require('./module');
      

19. includes方法：

    • ES6:

      const arr = [1, 2, 3];
      const hasTwo = arr.includes(2); // true
      

    • JavaScript:

      var arr = [1, 2, 3];
      var hasTwo = arr.indexOf(2) !== -1; // true
      

20. 幂运算符：

    • ES6:

      const squared = 2 ** 3; // 8
      

    • JavaScript:

      var squared = Math.pow(2, 3); // 8