ES6 入门教程读书笔记 - 深入浅出，快速掌握 ES6 核心知识

2023-10-06 12:04:09

前言

ES6，又称 ECMAScript 2015，是 JavaScript 的最新版本，于 2015 年 6 月正式发布。它引入了许多新特性和改进，使 JavaScript 变得更加强大和易于使用。对于前端开发人员来说，掌握 ES6 是必不可少的。

ES6 新特性概述

ES6 引入了许多新特性，其中包括：

箭头函数： 箭头函数是一种简写函数语法，可以简化代码并提高可读性。
模板字符串： 模板字符串允许在字符串中嵌入变量，使字符串拼接更加方便。
解构赋值： 解构赋值允许从数组或对象中提取值并将其分配给变量。
扩展运算符： 扩展运算符允许将数组或对象展开，并将其元素逐个添加到另一个数组或对象中。
默认参数： 默认参数允许在函数的参数中指定默认值，当函数调用时没有为参数指定值时，将使用默认值。
类：类是 ES6 中的新结构，它允许使用面向对象的方式来编写 JavaScript 代码。
模块： 模块是 ES6 中的新特性，它允许将代码组织成独立的文件，并按需加载。

ES6 实战案例

为了更好地理解 ES6 的使用，我们来看几个实际案例：

使用箭头函数简化代码：

// ES5
var numbers = [1, 2, 3, 4, 5];
var doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

// ES6
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);

使用模板字符串拼接字符串：

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

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

使用解构赋值提取数组元素：

// ES5
var numbers = [1, 2, 3, 4, 5];
var firstNumber = numbers[0];
var secondNumber = numbers[1];

// ES6
const numbers = [1, 2, 3, 4, 5];
const [firstNumber, secondNumber] = numbers;

使用扩展运算符展开数组：

// ES5
var numbers1 = [1, 2, 3];
var numbers2 = [4, 5, 6];
var allNumbers = numbers1.concat(numbers2);

// ES6
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const allNumbers = [...numbers1, ...numbers2];

使用默认参数设置函数参数的默认值：

// ES5
function greet(name) {
  if (name === undefined) {
    name = 'World';
  }
  console.log('Hello, ' + name + '!');
}

// ES6
function greet(name = 'World') {
  console.log('Hello, ' + name + '!');
}

使用类创建对象：

// ES5
var Person = function(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 + '!');
  }
}

使用模块组织代码：

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

  function privateFunction() {
    console.log('This is a private function.');
  }

  return {
    publicVariable: 2,

    publicFunction: function() {
      console.log('This is a public function.');
    }
  };
})();

// ES6
export const privateVariable = 1;

function privateFunction() {
  console.log('This is a private function.');
}

export const publicVariable = 2;

export function publicFunction() {
  console.log('This is a public function.');
}