ES6 之后 JavaScript 使用笔记
2023-12-04 18:40:58
ES6 的历史包袱
JavaScript 是一门历史悠久的语言，它最早诞生于 1995 年。自那以后，JavaScript 经历了多次版本迭代，其中最重大的版本更新莫过于 ES6（又称 ECMAScript 2015）。ES6 于 2015 年 6 月正式发布，它为 JavaScript 带来了许多新的特性和改进，极大地提升了 JavaScript 的开发效率和灵活性。
然而，ES6 的发布也给 JavaScript 带来了一个新的问题——历史包袱。由于 JavaScript 是运行在浏览器中的，因此它不能完全脱离浏览器的历史包袱。这意味着一些不合理的特性和语法不能在 JavaScript 中轻易移除，否则将会导致大量旧有代码失效。
ES6 的新特性
尽管 ES6 带来了历史包袱，但它也为 JavaScript 带来了许多新的特性和改进。这些新特性极大地提升了 JavaScript 的开发效率和灵活性，使其能够构建更复杂的应用程序。
箭头函数
箭头函数是 ES6 中引入的一种新的函数语法。箭头函数的语法更简洁，而且它可以自动绑定 this 指向，这使得它非常适合用于事件处理和回调函数。
// ES5 函数
function add(x, y) {
return x + y;
}
// ES6 箭头函数
const add = (x, y) => x + y;
模板字符串
模板字符串是 ES6 中引入的一种新的字符串语法。模板字符串使用反引号（`）来包裹字符串，并且允许在字符串中嵌入变量和表达式。
// ES5 字符串拼接
const name = "John";
const greeting = "Hello, " + name + "!";
// ES6 模板字符串
const name = "John";
const greeting = `Hello, ${name}!`;
解构赋值
解构赋值是 ES6 中引入的一种新的赋值语法。解构赋值可以将对象或数组的属性或元素直接赋值给变量。
// ES5 对象解构
const person = {
name: "John",
age: 30
};
const name = person.name;
const age = person.age;
// ES6 对象解构
const person = {
name: "John",
age: 30
};
const { name, age } = person;
扩展运算符
扩展运算符是 ES6 中引入的一种新的运算符。扩展运算符可以将数组或对象展开为一系列的元素或属性。
// ES5 数组展开
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [...numbers, 6, 7, 8, 9, 10];
// ES6 对象展开
const person = {
name: "John",
age: 30
};
const newPerson = {
...person,
job: "developer"
};
默认参数
默认参数是 ES6 中引入的一种新的参数语法。默认参数允许函数在没有提供参数值的情况下使用默认值。
// ES5 默认参数
function greet(name) {
name = name || "John";
return "Hello, " + name + "!";
}
// ES6 默认参数
function greet(name = "John") {
return "Hello, " + name + "!";
}
块级作用域
块级作用域是 ES6 中引入的一种新的作用域类型。块级作用域允许在代码块内部定义的变量只在该代码块内部有效。
// ES5 作用域
function foo() {
var x = 1;
{
var x = 2;
console.log(x); // 2
}
console.log(x); // 1
}
// ES6 作用域
function foo() {
let x = 1;
{
let x = 2;
console.log(x); // 2
}
console.log(x); // 1
}
let 和 const
let 和 const 是 ES6 中引入的两种新的变量声明。let 声明的变量是块级作用域的，而 const 声明的变量是常量，不能重新赋值。
// ES5 变量声明
var x = 1;
// ES6 变量声明
let x = 1;
const y = 2;
class
class 是 ES6 中引入的一种新的语法，它允许创建类。类是面向对象编程的基础，它允许将数据和行为封装在一起。
// ES5 类
function Person(name, age) {
this.name = name;
this.age = age;
}
// ES6 类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
模块
模块是 ES6 中引入的一种新的语法，它允许将代码组织成不同的模块。模块可以单独编译和加载，这使得代码更容易维护和复用。
// ES5 模块
var module = (function() {
// 模块代码
})();
// ES6 模块
export function add(x, y) {
return x + y;
}
import { add } from "./module.js";
Promise
Promise 是 ES6 中引入的一种新的对象，它表示一个异步操作的结果。Promise 可以用来处理异步操作，并可以将异步操作的结果传递给其他函数。
// ES5 异步操作
function getData(callback) {
setTimeout(function() {
callback({
name: "John",
age: 30
});
}, 1000);
}
getData(function(data) {
console.log(data);
});
// ES6 Promise
function getData() {
return new Promise((resolve, reject) => {
setTimeout(function() {
resolve({
name: "John",
age: 30
});
}, 1000);
});
}
getData().then(function(data) {
console.log(data);
});
异步/等待
异步/等待是 ES6 中引入的一种新的语法，它允许使用同步的语法来处理异步操作。异步/等待语法可以简化异步操作的处理，并使代码更易于阅读和理解。
// ES5 异步/等待
function getData() {
return new Promise((resolve, reject) => {
setTimeout(function() {
resolve({
name: "John",
age: 30
});
}, 1000);
});
}
getData().then(function(data) {
console.log(data);
});
// ES6 异步/等待
async function getData() {
const data = await new Promise((resolve, reject) => {
setTimeout(function() {
resolve({
name: "John",
age: 30
});
}, 1000);
});
console.log(data);
}
getData();
迭代器
迭代器是 ES6 中引入的一种新的对象，它允许遍历数据结构。迭代器可以用来遍历数组、对象和字符串等数据结构。
// ES5 迭代器
var numbers = [1, 2, 3, 4, 5];
for (var i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// ES6 迭代器
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
生成器
生成器是 ES6 中引入的一种新的函数类型。生成器可以生成一个序列的值，并且可以在每次生成一个值时暂停和恢复。
// ES6 生成器
function* generateNumbers() {
yield 1;
yield 2;
