掌握 ES6！！！！

最新推荐文章于 2024-06-14 11:01:38 发布

想住在小木屋里卖纸杯小蛋糕

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量950

点赞数 16

文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/macanhappy/article/details/138857343

版权

含义：

ES6（ECMAScript 2015）是 JavaScript 语言的一个重大更新版本，它带来了许多新特性和语法糖，旨在让 JavaScript 代码更加简洁、易读和强大。

以下是 ES6 中引入的一些主要特性：

一、箭头函数（Arrow Functions）：

1.语法简洁：

传统函数可能需要写很多代码，而箭头函数可以简化这一点。

2.没有自己的 this：
箭头函数不会创建自己的this上下文，所以this值会捕获其所在上下文的this值，作为自己的this值。在回调函数和事件处理器中特别有用，因为它们经常需要引用外部函数的this值。

3.没有arguments对象：
箭头函数没有arguments对象。但是，你可以使用剩余参数（rest parameters）...来代替。

4.不可用作构造函数：
箭头函数没有prototype属性，因此它们不能被用作构造函数，也就是说不能使用new关键字来调用它们。

5.没有super、new.target：
由于箭头函数没有自己的this，所以它们也没有super或new.target。

6.没有yield关键字：
箭头函数不能用作生成器函数，即它们不能包含yield关键字。

7.更简洁的语法（无函数体）：
如果函数体只有一条表达式，你可以省略大括号和return关键字。

8.更好的可读性：
在某些情况下，箭头函数可以使代码更加简洁和易于阅读。

二、类（Classes）：

1.声明类：
使用class关键字来声明一个类。

2.构造函数：
在类中，构造函数是一个特殊的方法，用于初始化新创建的对象。它使用constructor关键字定义。

3.方法：
类可以包含方法，这些方法在类的实例上调用。

4.继承：
类可以使用extends关键字来实现继承。子类会继承父类的所有属性和方法（除非它们被重写）。

在子类的构造函数中，super()方法用于调用父类的构造函数。

5.静态方法：
类可以包含静态方法，这些方法在类本身上调用，而不是在类的实例上调用。静态方法通常用于执行与类相关的但不依赖于实例的操作。

6.getter 和 setter：
类可以使用getter和setter来定义对象的属性访问和修改行为。

7.类的表达式：
类也可以作为表达式使用，这意味着它们可以被赋值给变量或作为参数传递。

8.私有字段（ES2020+）：
虽然ES6的类语法本身没有提供直接的私有字段支持，但ES2020引入了私有字段的提案，它使用#前缀来定义私有字段。

三、模块化（Modules）：

使用 import 和 export 关键字实现模块导入和导出。

四.解构赋值（Destructuring Assignment）：

允许从数组或对象中提取数据到不同的变量中，并将它们赋值给不同的变量。

数组解构赋值

对于数组，解构赋值允许你快速地将数组中的元素赋值给变量。

如果数组的元素数量超过了你定义的变量数量，多余的元素会被忽略。如果变量数量超过了数组的元素数量，多余的变量会被赋值为undefined。

对象解构赋值

对于对象，解构赋值允许你通过对象的属性名来提取值。

你还可以为解构的变量指定默认值，以防对象中没有该属性。

嵌套解构

解构赋值也可以用于嵌套的对象和数组。

剩余参数和解构

在解构赋值中，你还可以使用剩余参数（...）来捕获剩余的元素或属性。

五.扩展运算符（Spread Operator）：

用于展开数组或对象的元素。
扩展运算符由三个点（...）表示。

数组中的扩展运算符

在数组中，扩展运算符可以将一个数组的元素展开并插入到另一个数组中。

对象中的扩展运算符

在对象中，扩展运算符可以复制一个对象的所有可枚举属性到新的对象中。

字符串中的扩展运算符（实际上不可行）

虽然扩展运算符在数组和对象上非常有用，但它并不直接支持字符串。字符串在 JavaScript 中是不可变的，并且不是可迭代对象。因此，你不能直接使用扩展运算符来展开字符串的字符。但是，你可以先将字符串转换为数组（如使用 Array.from() 或扩展运算符与 split('')），然后再使用扩展运算符。

函数参数中的扩展运算符

在函数调用中，扩展运算符可以用来将一个数组的元素作为单独的参数传递给函数。

六.模板字符串（Template Literals）：

使用反引号（``）来定义字符串，允许在字符串中嵌入表达式。

字符串插值

字符串插值允许你在模板字符串中嵌入表达式，这些表达式会被计算并转换为字符串。

在${}中的表达式可以是任何有效的 JavaScript 表达式，并且它们会按照正常的 JavaScript 规则进行计算。

多行字符串

模板字符串允许你编写多行字符串，而不需要使用\n来换行。

标签模板

标签模板（Tagged Templates）是模板字符串的一个高级特性，它允许你定义一个函数来处理模板字符串。这个函数被称为“标签函数”，它接收模板字符串的字符串数组和表达式数组作为参数。

七.`let` 和 `const`：

let 和 const 是用于声明变量的关键字，提供了块级作用域，并允许你声明常量（即不可重新赋值的变量）。

let

let 关键字用于声明一个块级作用域的局部变量，该变量可以重新赋值。这意味着使用 let 声明的变量只在声明它的代码块（例如大括号 {} 内）中有效。

在函数内部使用 let 也可以创建只在函数内部有效的局部变量。

与 var 不同，let 不会创建变量提升（variable hoisting），这意味着在声明变量之前引用它会导致引用错误。

const

const 关键字用于声明一个常量，其值在初始化后不能被改变（注意是引用不能被改变，如果常量是一个对象或数组，那么对象的属性或数组的元素仍然可以被修改）。const 声明的变量也具有块级作用域。

使用 const 可以确保变量保持其初始值，这有助于防止意外的变量修改，从而提高代码的可读性和可维护性。

八. symbol：

Symbol 是一种唯一且不可变的数据类型，它的主要用途是作为对象的唯一标识符。每个 Symbol 值都是唯一的，即使它们的描述（description）相同。

创建 Symbol

你可以使用 Symbol() 函数来创建一个新的 Symbol 值。这个函数可以接受一个可选的字符串参数作为描述，但描述并不是 Symbol 的值，它只是一个附加的、用于调试的信息。

Symbol 的唯一性

Symbol 的主要特点是它们的值是唯一的。即使你使用相同的描述来创建两个 Symbol，它们也不会相等。

Symbol 的用途

1.属性名：Symbol 可以用作对象属性的键名，这样可以避免属性名冲突。由于 Symbol 的唯一性，使用 Symbol 作为键名可以保证属性在对象中是唯一的。

2.内置 Symbol 类型：ES6 还定义了一些内置的 Symbol 值，用于表示对象的特殊方法或属性。例如，Symbol.iterator 是一个内置 Symbol，用于定义对象的默认迭代器。

3.常量：虽然 const 可以用来声明常量，但 Symbol 可以确保这些常量是唯一的，并且不会被意外地覆盖或修改。

九、async 和 await ：

在 ES6（ECMAScript 2015）中，并没有直接引入 async 和 await 关键字。然而，在 ES2017（也称为 ES8）中，这两个关键字被引入，用于处理基于 Promise 的异步操作，使得异步代码能够以更同步、更直观的方式书写。

async

async 关键字用于声明一个函数是异步的。这样的函数总是返回一个 Promise 对象。如果在 async 函数中返回一个值，那么这个值会被 Promise.resolve() 处理并作为 Promise 的解析值。如果在 async 函数中抛出一个错误，那么这个错误会被 Promise.reject() 处理并作为 Promise 的拒绝原因。

await

await 关键字只能在 async 函数内部使用。它用于等待一个 Promise 完成，并返回 Promise 的结果。如果 Promise 被拒绝（rejected），那么 await 表达式会抛出一个错误。

例子：

在上面的示例中，fetchData() 函数返回一个 Promise，该 Promise 在一秒后解析为一个字符串 'Hello from Promise!'。然后，在 processData() 函数中，我们使用 await 关键字等待 fetchData() 函数的 Promise 完成，并将结果存储在 data 变量中。这样，我们就能够像处理同步代码一样处理异步操作。

十：proxy :

在 ES6（ECMAScript 2015）中，Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。Proxy 可以被用作某些内置对象的钩子，例如（但不限于）Array、Function、Date、RegExp、Error 等，还可以被用于创建全新的对象。

Proxy 对象接收两个参数：目标对象（target）和处理器对象（handler）。处理器对象定义了一些陷阱函数（trap functions），这些函数会拦截并自定义目标对象上的某些操作。

以下是一个简单的 Proxy 示例，该示例拦截了对目标对象的属性读取操作：