<h3>小数精度处理</h3>
<ul>
<li>使用 <code>toFixed</code> 取后几位小数</li>
<li>把小数转为整数再进行运算</li>
<li>使用精度运算库，如：big.js</li>
</ul>
<h3><code>for&hellip;in</code> 和 <code>for&hellip;of</code> 的区别</h3>
<ul>
<li><code>for-in</code> 历遍对象，通常获取 key（类似 Object.keys）</li>
<li><code>for-of</code> 历遍可迭代对象，如 <code>Array</code>、<code>Map</code>、<code>Set</code> 等</li>
</ul>
<h3>任务队列（Task Queue）</h3>
<ul>
<li>先执行同步再执行异步</li>
<li>核心作用：处理异步代码的调度和执行</li>
<li>宏任务：<code>setTimeout</code>、<code>setInterval</code>、<code>I/O</code> 等</li>
<li>微任务：<code>Promise</code> 回调（.then / .catch/ .finally）、<code>MutationObserver</code> 回调等</li>
<li>微任务优先级高于宏任务</li>
<li>调用 <code>fetch</code> 会同步执行并立即返回一个 <code>promise</code></li>
</ul>
<h3><code>call</code> | <code>apply</code> | <code>bind</code></h3>
<p>均用于改变函数内部 this 的指向</p>
<pre><code class="lang-js language-js js">const obj = { name: &quot;Alice&quot; };

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!</code></pre>
<h3>ES 新特性：</h3>
<h4>变量声明</h4>
<p><code>let</code> 和 <code>const</code></p>
<h4>箭头函数</h4>
<p>简化函数语法，自动绑定 this</p>
<h4>模板字符串</h4>
<pre><code class="lang-js language-js js">`Hello ${name}`</code></pre>
<h4>解构赋值</h4>
<pre><code class="lang-js language-js js">const { age, name } = user;
const [first, second] = [1, 2];</code></pre>
<h4>默认参数</h4>
<h4>扩展运算符</h4>
<pre><code class="lang-js language-js js">const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // [1, 2, 3]; // 合并数组
const objCopy = { ...originalObj }; // 合并对象</code></pre>
<h4><code>Promise</code> 和 异步处理</h4>
<p><code>Promise.all</code> &#8211; 等待所有 <code>Promise</code> 对象都执行完成
<code>Promise.race</code> &#8211; 返回第一个完成的 <code>Promise</code>（无论成功失败）
<code>Promise.any</code> &#8211; 返回第一个成功的 <code>Promise</code></p>
<h4>模块化：<code>import</code> 和 <code>export</code></h4>
<h4><code>Set</code>, <code>Map</code></h4>
<pre><code class="lang-js language-js js">let s = new Set(); s.add(&#039;a&#039;).add(&#039;b&#039;)
let m = new Map(); m.set(&#039;age&#039;, 16)</code></pre>
<h4>数组的 includes，检查是否包含某元素</h4>
<h4>async / await</h4>
<p><strong>底层实现机制：</strong>
async/await 的核心是通过 Generator 函数和自动执行器实现的：</p>
<ol>
<li>async 函数本质上是一个返回 Promise 的 Generator 函数；</li>
<li>await 相当于 yield，暂停函数执行；</li>
<li>有一个自动执行器负责处理 Promise 的 resolve/reject 并继续执行。</li>
</ol>
<p>Generator 函数的语法糖，省去手动 next() 的步骤</p>
<h4>Object.values() 和 Object.entries()</h4>
<pre><code class="lang-js language-js js">Object.values({ a: 1, b: 2 }); // [1, 2]
Object.entries({ a: 1, b: 2 }); // [[&quot;a&quot;, 1], [&quot;b&quot;, 2]]</code></pre>
<h4>字符串填充：padStart() 和 padEnd()</h4>
<pre><code class="lang-js language-js js">&quot;5&quot;.padStart(2, &quot;0&quot;); // &quot;05&quot;</code></pre>
<h4>空值合并运算符</h4>
<pre><code class="lang-js language-js js">const value = input ?? &quot;default&quot;;</code></pre>
<h4>动态导入模块</h4>
<pre><code class="lang-js language-js js">const module = await import(&#039;./module.js&#039;)</code></pre>
<h4>replaceAll 替换所有匹配的子串</h4>
<pre><code class="lang-js language-js js">&quot;a.b.c&quot;.replaceAll(&quot;.&quot;, &quot;-&quot;); // &quot;a-b-c&quot;</code></pre>
<h4>require 和 import</h4>
<ul>
<li>分别属于 CommonJS 和 ES 两种不同模块系统</li>
<li><code>require</code> 动态加载，运行时解析</li>
<li><code>import</code> 静态加载，编译时解析</li>
<li><code>Proxy</code>
<ul>
<li>数据绑定与响应式系统：通过 <code>set</code> 拦截属性赋值，触发副作用（如重新渲染）</li>
<li>属性访问控制和校验：限制对象属性的访问或赋值</li>
</ul></li>
</ul>
<h3>微信小程序：</h3>
<h4>OpenID &amp; UnionID</h4>
<p><strong>OpenID</strong></p>
<ul>
<li>用户在当前小程序中的唯一标识</li>
<li>用途：用于识别用户在当前小程序内的身份（如用户数据存储、业务逻辑处理）</li>
<li>获取：通过 <code>wx.login()</code> 获取 code，后端用 code 调用微信接口换取 OpenID</li>
</ul>
<p><strong>UnionID</strong></p>
<ul>
<li>用户在微信的唯一标识</li>
<li>用途：实现跨小程序、公众号用户身份统一</li>
<li>获取：通过 <code>wx.getUserInfo()</code> 获取 encryptedData, iv，发送到后端解密，或者通过按钮触发授权</li>
</ul>
<h3>性能优化：</h3>
<ol>
<li>文本压缩（css, js, html）</li>
<li>图片压缩</li>
<li>合并资源（合并文本、雪碧图）</li>
<li>图片懒加载</li>
<li>合并请求</li>
<li>缓存资源（设置浏览器头、设置 html head）</li>
<li>使用 CDN</li>
<li>gzip 压缩</li>
<li>减少 DOM 操作</li>
<li>CSS 样式置顶、JS 脚本置底</li>
<li>防抖和节流
<ul>
<li>防抖：保证N秒内执行一次，如果N秒内触发将再执行并重新计算时间</li>
<li>节流：保证N秒内只能触发一次</li>
</ul></li>
</ol>

WEB前端-JS篇