前端工程化速通——①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.箭头函数
    简化：

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

3.模板字符串

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 的响应被当作返回值，或者被拒绝的响应被作为错误抛出。

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

9.面向对象

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

10.模块化

• export导出模块，import导入模块