JavaScript ES6语法在开发中的应用：更好，更快，更智能

变量声明

在 ES6 中，可以使用 let 和 const 来声明变量。let 定义的变量是function级的作用域，let定义的变量属于块级作用域，而const定义的是常量，也就是定义之后不可修改。

// ES5
var a = 10;
function foo() {
  var b = 20;
  console.log(a); // 10
  console.log(b); // 20
}

// ES6
let a = 10;
const b = 20;
function foo() {
  let c = 30;
  console.log(a); // 10
  console.log(b); // 20
  console.log(c); // 30
}

箭头函数

箭头函数是一种更简洁的函数写法。它没有function，并且可以使用 => 符号代替function关键字。

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

// ES6
const add = (a, b) => {
  return a + b;
};

导入和导出

ES6 引入了导入和导出模块的机制。这使得我们可以将代码组织成更小的模块，并按需导入。

// ES5
var module1 = require('./module1');
var module2 = require('./module2');

// ES6
import module1 from './module1';
import module2 from './module2';

模板字符串

模板字符串是一种新的字符串写法。它使用 ${} 来嵌入变量。

// ES5
var name = 'John';
var greeting = 'Hello, ' + name + '!';

// ES6
const name = 'John';
const greeting = `Hello, ${name}!`;

解构

解构是一种将数组或对象的元素分解成单个变量的语法。

// ES5
var array = [1, 2, 3];
var a = array[0];
var b = array[1];
var c = array[2];

// ES6
const [a, b, c] = [1, 2, 3];

展开运算符

展开运算符是一种将数组或对象的元素展开成单个元素的语法。

// ES5
var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2);

// ES6
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [...array1, ...array2];

箭头函数

箭头函数是一种更简洁的函数写法。它没有function关键字，并且可以使用 => 符号代替function关键字。

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

// ES6
const add = (a, b) => {
  return a + b;
};

类

ES6 引入了类的概念。类是一种创建对象的蓝图。

// ES5
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// ES6
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

属性

属性是一种存储在类中的数据。它可以通过类名.属性名的方式访问。

// ES5
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// ES6
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  // 属性
  get name() {
    return this._name;
  }

  set name(value) {
    this._name = value;
  }
}

方法

方法是一种存储在类中的函数。它可以通过类名.方法名的方式调用。

// ES5
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// ES6
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 方法
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

继承

继承是一种从父类创建子类的机制。子类可以继承父类的属性和方法。

// ES5
function Parent() {
  this.name = 'John';
}

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

function Child() {
  Parent.call(this);
}

Child.prototype = new Parent();

// ES6
class Parent {
  constructor(name) {
    this.name = name;
  }

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

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  sayHello() {
    super.sayHello();
    console.log(`I am ${this.age} years old.`);
  }
}

模块

模块是一种将代码组织成更小的单元的机制。模块可以单独导入和导出。

// ES5
var module1 = (function() {
  var privateVariable = 10;

  function privateFunction() {
    console.log(privateVariable);
  }

  return {
    publicVariable: 20,
    publicFunction: function() {
      privateFunction();
    }
  };
})();

// ES6
const module1 = (function() {
  let privateVariable = 10;

  const privateFunction = () => {
    console.log(privateVariable);
  };

  return {
    publicVariable: 20,
    publicFunction() {
      privateFunction();
    }
  };
})();

异步编程

ES6 引入了异步编程的概念。异步编程是一种允许代码在不阻塞主线程的情况下运行的机制。

// ES5
function asyncFunction(callback) {
  setTimeout(() => {
    callback('Hello, world!');
  }, 1000);
}

asyncFunction((result) => {
  console.log(result);
});

// ES6
async function asyncFunction() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello, world!');
    }, 1000);
  });

  console.log(result);
}

asyncFunction();