进阶前端开发——ES6语法漫谈

2023-09-21 01:50:31

ES6，并不是一个新鲜的东西，ES7、ES8已经赶脚了。但是，东西不在于新，而在于总结。每个学前端的人，身边也必定有本阮老师的《ES6标准入门》或者翻译的《深入理解ECMAScript6》。本篇主要是对ES6的一些常用知识点进行一个总结。如果你喜欢我的文章，欢迎评论，欢迎Star。

变量声明

ES6中引入了let和const两种新的变量声明方式，与var相比，let和const声明的变量具有块级作用域。这意味着，let和const声明的变量只能在声明它们的块内访问，而var声明的变量可以在整个函数或全局作用域内访问。

// var声明的变量
var a = 1;

// let声明的变量
let b = 2;

// const声明的变量
const c = 3;

// 在块内访问let和const声明的变量
{
  console.log(b); // 2
  console.log(c); // 3
}

// 在块外访问let和const声明的变量
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined

对象字面量

ES6中引入了新的对象字面量语法，允许在对象字面量中使用计算属性名和方法简写。

// ES5中的对象字面量
var person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

// ES6中的对象字面量
const person = {
  name: "John",
  age: 30,
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

箭头函数

箭头函数是ES6中引入的一种新的函数语法，它可以简化函数的编写，尤其是当函数体很短时。

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

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

类

ES6中引入了class，允许使用更简洁的语法来定义类。

// ES5中的类
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.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中引入了模块系统，允许将代码组织成不同的模块，并根据需要进行导入和导出。

// 创建一个名为"person.js"的模块
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

// 在另一个模块中导入"person.js"模块
import { Person } from "./person.js";

const person = new Person("John", 30);
person.greet();