前端工程化速通——①ES6

发布于:2025-07-09 ⋅ 阅读:(21) ⋅ 点赞:(0)

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导入模块

网站公告

今日签到

点亮在社区的每一天
去签到