前端工程化速通——①ES6

文章目录

- ES6
- - 1.变量声明与作用域
  - 3.模板字符串
  - 4.解构
  - 5.链判断
  - [6. 默认值](#6. 默认值)
  - 7.Promise
  - 8.async/await
  - 9.面向对象
  - 10.模块化

ES6

ES6（ECMAScript 2015）
ECMAScript（ES）是规范、 JavaScript 是 ES 的实现

1.变量声明与作用域

let 和 const
- let：块级作用域变量，无变量提升，不可重复声明
- const：块级作用域常量，声明时必须初始化，不可重新赋值（可修改对象属性或数组元素）
  2.箭头函数
  简化：

javascript 复制代码

// 原来的写法
function fun(args){
	 // 函数体
	 return args
}
简化为：
const fun = (args) => {
	// 	函数体
	return args
}
// 如果函数只返回一个值 还可简化为：
const fun = (a,b) =>  a+b

3.模板字符串

javascript 复制代码

let a = 1
let b = `b的值为：xxx，a的值为${a}`

4.解构

数组解构
const [a, b] = [1, 2]
对象解构
const { name, age } = user
嵌套解构 const { name: userName, address: { city } } = user;

5.链判断

const firstName = request?.data?.demo || 'default';

6. 默认值

直接给参数写上默认值，没传就会⾃动使⽤默认值
function fun(a, b = 1) { return a + b; }

7.Promise

Promise 对象表示异步操作最终的完成（或失败）以及其结果值。
一个 Promise 是一个代理，它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。这使得异步方法可以像同步方法一样返回值：异步方法不会立即返回最终值，而是返回一个 promise，以便在将来的某个时间点提供该值。
Promise 是现代 JavaScript 中异步编程的基础，是⼀个由异步函数返回的可以向我们指示当前
操作所处的状态的对象。在 Promise 返回给调用者的时候，操作往往还没有完成，但 Promise
对象可以让我们操作最终完成时对其进行处理（无论成功还是失败）
解决回调地狱，链式调用：fetch().then().catch()。
一个 Promise 必然处于以下几种状态之一：
- 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
- 已兑现（fulfilled）：意味着操作成功完成。（then() 调用）
- 已拒绝（rejected）：意味着操作失败。（catch() 调用）

8.async/await

async function 声明创建⼀个绑定到给定名称的新异步函数。函数体内允许使用 await 关键字，
这使得我们可以更简洁地编写基于 promise 的异步代码，并且避免了显式地配置 promise 链的
需要。
在异步函数中，你可以在调用⼀个返回 Promise 的函数之前使用 await 关键字。这使得代码在该点上等待，直到 Promise 被完成，这时 Promise 的响应被当作返回值，或者被拒绝的响应被作为错误抛出。

javascript 复制代码

const fetchDemo = async() => {
	try {
		const response = await fetch("apixxx");
	} catch (error) {
		console.error(`⽆法获取：${error}`);
	}
}
fetchDemo();

9.面向对象

Class 语法
- 类声明与继承：class Dog extends Animal {}，本质是原型链的语法糖

10.模块化

export导出模块，import导入模块

前端工程化速通——①ES6

文章目录

ES6

1.变量声明与作用域​

3.模板字符串

4.解构

5.链判断

6. 默认值

7.Promise

8.​​async/await

9.面向对象

10.模块化

1.变量声明与作用域

8.async/await