ES6 语法大揭秘：那些你知道和不知道的用法

ES6 是 JavaScript 的下一个重大版本，它引入了许多新特性，如箭头函数、解构赋值、模块、类、继承、代理、Promise 和生成器等。这些新特性使 JavaScript 更加强大和灵活，也使编写 JavaScript 代码更加容易。

本文将介绍这些新特性的用法，并提供一些示例代码，帮助您更好地理解和使用 ES6。

箭头函数

箭头函数是 ES6 中引入的一种新的函数语法。它使用箭头（=>）而不是 function 来定义函数。箭头函数更简洁，并且可以更轻松地与其他函数组合使用。

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

// ES6 箭头函数
const add = (a, b) => a + b;

解构赋值

解构赋值是一种新的语法，允许您从对象或数组中提取值并将其分配给变量。这使得从对象或数组中提取数据更加容易。

// ES5 对象解构赋值
var person = {
  name: 'John Doe',
  age: 30
};

var name = person.name;
var age = person.age;

// ES6 对象解构赋值
const { name, age } = person;

模块

模块是 ES6 中引入的一种新的代码组织方式。模块允许您将代码分成更小的块，并按需加载它们。这使得代码更容易维护和重用。

// ES5 模块
define(['jquery'], function($) {
  // 模块代码
});

// ES6 模块
import $ from 'jquery';

// 模块代码

类

类是 ES6 中引入的一种新的语法，允许您定义对象。类可以继承其他类，并且可以包含构造函数、方法和属性。

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

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

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

  greet() {
    console.log('Hello, my name is ' + this.name);
  }
}

继承

继承是 ES6 中引入的一种新的语法，允许您从一个类派生出另一个类。派生类可以继承基类的属性和方法，并且可以定义自己的属性和方法。

// ES5 继承
function Employee(name, age, salary) {
  Person.call(this, name, age);
  this.salary = salary;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.work = function() {
  console.log('I am working');
};

// ES6 继承
class Employee extends Person {
  constructor(name, age, salary) {
    super(name, age);
    this.salary = salary;
  }

  work() {
    console.log('I am working');
  }
}

代理

代理是一种 ES6 中的新型对象，允许您拦截和修改对象的属性和方法。代理可以用于多种目的，例如日志记录、身份验证和缓存。

// ES5 代理
var person = new Proxy({}, {
  get: function(target, property) {
    console.log('Getting property: ' + property);
    return target[property];
  },
  set: function(target, property, value) {
    console.log('Setting property: ' + property + ' to ' + value);
    target[property] = value;
  }
});

person.name = 'John Doe';
console.log(person.name);

// ES6 代理
const person = new Proxy({}, {
  get(target, property) {
    console.log('Getting property: ' + property);
    return target[property];
  },
  set(target, property, value) {
    console.log('Setting property: ' + property + ' to ' + value);
    target[property] = value;
  }
});

person.name = 'John Doe';
console.log(person.name);

Promise

Promise 是一种 ES6 中的新型对象，允许您处理异步操作。Promise 可以处于三种状态：等待、已完成或已拒绝。当异步操作完成时，Promise 会将结果传递给它的 then() 方法。如果异步操作失败，Promise 会将错误传递给它的 catch() 方法。

// ES5 Promise
function fetchUserData(userId) {
  return new Promise(function(resolve, reject) {
    $.ajax({
      url: '/api/users/' + userId,
      success: function(data) {
        resolve(data);
      },
      error: function(error) {
        reject(error);
      }
    });
  });
}

fetchUserData(123).then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log(error);
});

// ES6 Promise
const fetchUserData = userId => {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '/api/users/' + userId,
      success: resolve,
      error: reject
    });
  });
};

fetchUserData(123).then(data => {
  console.log(data);
}).catch(error => {
  console.log(error);
});

生成器

生成器是一种 ES6 中的新型函数，允许您暂停和恢复执行。生成器可以用于多种目的，例如迭代器、协程和异步编程。

// ES5 生成器
function* fibonacci() {
  var a = 0, b = 1;
  while (true) {
    yield a;
    var temp = a;
    a = b;
    b = temp + b;
  }
}

for (var n of fibonacci()) {
  console.log(n);
  if (n > 100) {
    break;
  }
}

// ES6 生成器
function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

for (const n of fibonacci()) {
  console.log(n);
  if (n > 100) {
    break;
  }
}