ES6学习笔记：用let、const和箭头函数重塑JavaScript

2023-12-04 07:09:09

ES6学习笔记：用let、const和箭头函数重塑JavaScript

引言

ES6是JavaScript的最新版本，它于2015年6月17日发布。ES6为JavaScript编程语言带来了许多新的特性，包括let和const、箭头函数、rest和展开运算符、模板字符串、类的概念、模块化、Promise、生成器和迭代器。这些新特性使JavaScript更加强大和灵活，并使其成为构建现代Web应用程序的理想选择。

1. let和const

let和const都是ES6新增的声明变量的方法。let声明的变量可以在其声明的块作用域内重新赋值，而const声明的变量则不能被重新赋值。

// 使用let声明变量
let x = 10;
x = 20;
console.log(x); // 20

// 使用const声明变量
const y = 10;
y = 20;
console.log(y); // TypeError: Assignment to constant variable.

2. 箭头函数

箭头函数是ES6新增的对函数声明的另一种写法。箭头函数更简洁，而且可以在不使用return关键字的情况下返回一个值。

// 使用传统函数声明
function add(a, b) {
  return a + b;
}

// 使用箭头函数声明
const add = (a, b) => a + b;

console.log(add(1, 2)); // 3

3. rest和展开运算符

rest和展开运算符是ES6新增的两种运算符。rest运算符可以将多个参数组合成一个数组，而展开运算符可以将一个数组拆分成多个参数。

// 使用rest运算符
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

// 使用展开运算符
const numbers = [1, 2, 3, 4, 5];
console.log(...numbers); // 1 2 3 4 5

4. 模板字符串

模板字符串是ES6新增的一种字符串类型。模板字符串可以使用反引号(`)来声明，并且可以使用${}来嵌入变量或表达式。

const name = 'John Doe';
const age = 30;

// 使用传统字符串拼接
console.log('My name is ' + name + ' and my age is ' + age);

// 使用模板字符串
console.log(`My name is ${name} and my age is ${age}`);

5. 类的概念

ES6引入了类的概念，这使得JavaScript可以像其他面向对象编程语言一样使用类来组织代码。

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

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

const person = new Person('John Doe', 30);
person.greet(); // Hello, my name is John Doe and my age is 30

6. 模块化

ES6引入了模块化，这使得JavaScript代码可以像其他编程语言一样被组织成模块。模块化可以提高代码的可维护性和复用性。

// 创建一个模块
export const add = (a, b) => a + b;

// 引入一个模块
import { add } from './math';

console.log(add(1, 2)); // 3

7. Promise

Promise是ES6新增的一种异步编程机制。Promise可以让你在执行异步操作时注册一个回调函数，当异步操作完成时，这个回调函数就会被调用。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 2000);
});

promise.then((result) => {
  console.log(result); // Hello, world!
});

8. 生成器

生成器是ES6新增的一种函数类型。生成器可以让你暂停函数的执行，然后在以后的某个时间点继续执行。

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator();

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

9. 迭代器

迭代器是ES6新增的一种数据类型。迭代器可以让你遍历一个集合中的元素。

const numbers = [1, 2, 3, 4, 5];

const iterator = numbers[Symbol.iterator]();

while (true) {
  const next = iterator.next();
  if (next.done) {
    break;
  }
  console.log(next.value); // 1 2 3 4 5
}