ES6 入门

ES6（ECMAScript 6）是 JavaScript 的最新版本，它在语法、功能和性能上都有了很大的提升。本文将为大家详细介绍 ES6 的常用语法和新特性，帮助大家快速掌握 ES6。

let 和 const

ES6 中新增了两种声明变量的方式：let 和 const。

let 声明的变量是块级作用域，只在当前块中有效。而 const 声明的变量是常量，一旦声明就不能改变。

// javascriptcn.com 代码示例
// let 示例
function foo() {
  let x = 10;
  if (true) {
    let x = 20;
  }
  console.log(x); // 输出 10
}

// const 示例
const PI = 3.1415;
PI = 3; // 报错，常量不能被修改

箭头函数

ES6 中引入了箭头函数，它可以简化函数的定义，同时可以自动绑定 this。

// javascriptcn.com 代码示例
// 箭头函数示例
const add = (a, b) => a + b;
console.log(add(1, 2)); // 输出 3

// 自动绑定 this 示例
const obj = {
  name: 'Tom',
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};
obj.sayName(); // 输出 Tom

解构赋值

ES6 中新增了解构赋值语法，可以方便地从数组或对象中取出值并赋给变量。

// 数组解构示例
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出 1 2 3

// 对象解构示例
const { name, age } = { name: 'Tom', age: 18 };
console.log(name, age); // 输出 Tom 18

模板字符串

ES6 中新增了模板字符串，可以方便地拼接字符串，同时支持插入表达式。

// 模板字符串示例
const name = 'Tom';
const age = 18;
console.log(`My name is ${name}, I am ${age} years old.`); // 输出 My name is Tom, I am 18 years old.

类和继承

ES6 中引入了类和继承的概念，可以方便地定义对象和继承关系。

// javascriptcn.com 代码示例
// 类示例
class Animal {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

// 继承示例
class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  bark() {
    console.log('汪汪汪！');
  }
}

const dog = new Dog('小狗');
dog.sayName(); // 输出 小狗
dog.bark(); // 输出 汪汪汪！

Promise

ES6 中引入了 Promise，它是一种异步编程的解决方案，可以方便地处理异步操作。

// javascriptcn.com 代码示例
// Promise 示例
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: 'Tom', age: 18 };
      resolve(data);
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // 输出 { name: 'Tom', age: 18 }
});

总结

本文介绍了 ES6 中常用的语法和新特性，包括 let 和 const、箭头函数、解构赋值、模板字符串、类和继承以及 Promise。掌握了这些内容，可以让我们更加高效地编写 JavaScript 代码。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658547f0d2f5e1655dff0ef1