WEB前端-JS篇

小数精度处理

• 使用 toFixed 取后几位小数
• 把小数转为整数再进行运算
• 使用精度运算库，如：big.js

for…in 和 for…of 的区别

• for-in 历遍对象，通常获取 key（类似 Object.keys）
• for-of 历遍可迭代对象，如 Array、Map、Set 等

任务队列（Task Queue）

• 先执行同步再执行异步
• 核心作用：处理异步代码的调度和执行
• 宏任务：setTimeout、setInterval、I/O 等
• 微任务：Promise 回调（.then / .catch/ .finally）、MutationObserver 回调等
• 微任务优先级高于宏任务
• 调用 fetch 会同步执行并立即返回一个 promise

call | apply | bind

均用于改变函数内部 this 的指向

const obj = { name: "Alice" };

function greet() {
  console.log(`Hello, ${this.name}!`);
}

greet.call(obj);      // Hello, Alice!
greet.apply(obj);     // Hello, Alice!
const boundGreet = greet.bind(obj);
boundGreet();         // Hello, Alice!

ES 新特性：

变量声明

let 和 const

箭头函数

简化函数语法，自动绑定 this

模板字符串

`Hello ${name}`

解构赋值

const { age, name } = user;
const [first, second] = [1, 2];

默认参数

扩展运算符

const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // [1, 2, 3]; // 合并数组
const objCopy = { ...originalObj }; // 合并对象

Promise 和 异步处理

Promise.all – 等待所有 Promise 对象都执行完成 Promise.race – 返回第一个完成的 Promise（无论成功失败） Promise.any – 返回第一个成功的 Promise

模块化：import 和 export

Set, Map

let s = new Set(); s.add(‘a’).add(‘b’)
let m = new Map(); m.set(’age’, 16)

数组的 includes，检查是否包含某元素

async / await

底层实现机制： async/await 的核心是通过 Generator 函数和自动执行器实现的：

1. async 函数本质上是一个返回 Promise 的 Generator 函数；
2. await 相当于 yield，暂停函数执行；
3. 有一个自动执行器负责处理 Promise 的 resolve/reject 并继续执行。

Generator 函数的语法糖，省去手动 next() 的步骤

Object.values() 和 Object.entries()

Object.values({ a: 1, b: 2 }); // [1, 2]
Object.entries({ a: 1, b: 2 }); // [["a", 1], ["b", 2]]

字符串填充：padStart() 和 padEnd()

"5".padStart(2, "0"); // "05"

空值合并运算符

const value = input ?? "default";

动态导入模块

const module = await import('./module.js')

replaceAll 替换所有匹配的子串

"a.b.c".replaceAll(".", "-"); // "a-b-c"

require 和 import

• 分别属于 CommonJS 和 ES 两种不同模块系统
• require 动态加载，运行时解析
• import 静态加载，编译时解析
• Proxy
  • 数据绑定与响应式系统：通过 set 拦截属性赋值，触发副作用（如重新渲染）
  • 属性访问控制和校验：限制对象属性的访问或赋值

微信小程序：

OpenID & UnionID

OpenID

• 用户在当前小程序中的唯一标识
• 用途：用于识别用户在当前小程序内的身份（如用户数据存储、业务逻辑处理）
• 获取：通过 wx.login() 获取 code，后端用 code 调用微信接口换取 OpenID

UnionID

• 用户在微信的唯一标识
• 用途：实现跨小程序、公众号用户身份统一
• 获取：通过 wx.getUserInfo() 获取 encryptedData, iv，发送到后端解密，或者通过按钮触发授权

性能优化：

1. 文本压缩（css, js, html）
2. 图片压缩
3. 合并资源（合并文本、雪碧图）
4. 图片懒加载
5. 合并请求
6. 缓存资源（设置浏览器头、设置 html head）
7. 使用 CDN
8. gzip 压缩
9. 减少 DOM 操作
10. CSS 样式置顶、JS 脚本置底
11. 防抖和节流
    • 防抖：保证N秒内执行一次，如果N秒内触发将再执行并重新计算时间
    • 节流：保证N秒内只能触发一次