ES6基础

ES6（ECMAScript 2015）是JavaScript的一个重要版本，它为语言带来了许多新特性和改进。本文将详细介绍ES6中的一些基础知识，涵盖变量声明、函数、类、模块、异步编程等多个方面，并提供相关的代码示例和使用场景。通过这些实例，你将能够更好地理解和应用ES6的新特性。

目录

1. let 和 const
2. 箭头函数
3. 模板字面量
4. 解构赋值
5. 扩展运算符
6. 类和继承
7. 模块化
8. Promise
9. async/await
10. Set 和 Map
11. 总结

1. let 和 const

在ES6之前，JavaScript只有var来声明变量。但是，var存在一些问题，例如变量提升、作用域不清晰等。ES6引入了let和const，它们具有块级作用域，能够解决var的一些问题。

let

let用于声明变量，具有块级作用域，且不会发生变量提升。它只能在声明的块级作用域内访问。

javascriptCopy Code
function demoLet() {
  if (true) {
    let x = 10;
    console.log(x); // 10
  }
  console.log(x); // ReferenceError: x is not defined
}
demoLet();

场景：当你需要确保变量只在特定的代码块内有效时，使用let是非常合适的。

const

const用于声明常量。一旦赋值后，常量不能被重新赋值。const同样具有块级作用域。

javascriptCopy Code
const PI = 3.14159;
PI = 3.14; // TypeError: Assignment to constant variable.

场景：const通常用于声明不会更改的变量，比如常量、配置等。

2. 箭头函数

ES6引入了箭头函数，它是函数表达式的一种简洁写法。箭头函数的最大特点是没有this的绑定，而是继承外部作用域的this。

基本语法

javascriptCopy Code
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

场景

箭头函数常用于简化回调函数和匿名函数的书写。它也常用于数组操作中，比如map、filter等。

javascriptCopy Code
const arr = [1, 2, 3, 4];
const squared = arr.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]

注意：箭头函数不具有自己的this，它的this会继承外部环境的this。

javascriptCopy Code
function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds); // 1, 2, 3, ...
  }, 1000);
}

const timer = new Timer();

3. 模板字面量

ES6引入了模板字面量，允许在字符串中嵌入变量和表达式，提升了字符串操作的灵活性和可读性。

基本语法

javascriptCopy Code
let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Alice!

多行字符串

javascriptCopy Code
let multiline = `This is a string
that spans multiple
lines.`;
console.log(multiline);

表达式插值

javascriptCopy Code
let a = 5;
let b = 10;
let result = `The sum of a and b is ${a + b}.`;
console.log(result); // The sum of a and b is 15.

4. 解构赋值

解构赋值是一种从数组或对象中提取值并赋给变量的简洁语法。

数组解构

javascriptCopy Code
let arr = [1, 2, 3];
let [x, y, z] = arr;
console.log(x, y, z); // 1 2 3

对象解构

javascriptCopy Code
let person = { name: "Bob", age: 30 };
let { name, age } = person;
console.log(name, age); // Bob 30

默认值

解构赋值支持为变量提供默认值，当解构的值为undefined时，默认值会生效。

javascriptCopy Code
let [x = 1, y = 2] = [undefined, 5];
console.log(x, y); // 1 5

嵌套解构

javascriptCopy Code
let person = { name: "Alice", address: { city: "New York", zip: "10001" } };
let { name, address: { city, zip } } = person;
console.log(name, city, zip); // Alice New York 10001

5. 扩展运算符

扩展运算符...可以用于对象和数组，允许你在不修改原始数据的情况下进行操作。

数组

javascriptCopy Code
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

对象

javascriptCopy Code
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log
[Something went wrong, please try again later.]