这个问题本质是理解 浏览器一帧的调度模型。 不搞清楚一帧里发生了什么，很容易回答成“谁快谁慢”这种表层结论。

核心结论先给出：

在有下一帧渲染需求的情况下，requestAnimationFrame 一定优先于 requestIdleCallback 执行。 requestIdleCallback 只会在当前帧还有“空闲时间”时才会触发。

下面从浏览器帧模型拆解。

一、浏览器一帧的基本流程

以 60fps 为例，一帧约 16.6ms。

一次完整渲染循环大致是：

1. 执行宏任务（例如 setTimeout）
2. 清空微任务队列
3. 触发 requestAnimationFrame 回调
4. 进行样式计算（Style）
5. 布局计算（Layout）
6. 绘制（Paint）
7. 合成（Composite）
8. 如果还有时间 → 执行 requestIdleCallback

需要明确一点：

• rAF 是“下一帧渲染前”的回调
• rIC 是“当前帧剩余时间”的回调

二、requestAnimationFrame 的执行时机

requestAnimationFrame 的设计目标是：

在浏览器即将进行下一次重绘之前执行回调。

特点：

• 每帧最多执行一次
• 与刷新率同步
• 在样式计算之前触发
• 如果标签页不可见，会暂停

执行时机可以理解为：

在下一帧开始渲染流程之前

示例：

requestAnimationFrame(() => {
  // 适合更新动画状态
})

如果在 rAF 中修改 DOM，会参与当前帧的布局与绘制。

三、requestIdleCallback 的执行时机

requestIdleCallback 的设计目标是：

利用主线程空闲时间执行低优先级任务。

它有两个触发条件：

1. 当前帧执行完所有渲染任务后仍有剩余时间
2. 或者超时（timeout）触发

示例：

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0) {
    // 做低优先级任务
  }
});

关键特征：

• 不保证每帧都会执行
• 如果帧很忙，可能一直被延迟
• 优先级低于渲染任务

四、两者在同一帧中的相对顺序

假设：

requestAnimationFrame(() => console.log('rAF'));
requestIdleCallback(() => console.log('rIC'));

执行顺序一定是：

rAF
rIC

原因：

• rAF 是渲染前任务
• rIC 是渲染后空闲任务

只要这一帧需要渲染，rAF 必然优先。

五、极端情况分析

情况一：主线程持续繁忙

如果 JavaScript 长时间占用主线程：

• rAF 会延迟到下一帧
• rIC 可能根本不执行

rIC 不保证执行时间。

情况二：页面不可见

• rAF 会暂停
• rIC 仍可能执行（取决于浏览器策略）

情况三：高帧率显示器

在 120Hz 下：

• 每帧时间更短（约 8ms）
• rIC 更难获得空闲时间

六、在渲染优化中的使用场景

requestAnimationFrame 适合：

• 动画
• DOM 变更
• 视觉相关更新
• 滚动同步

因为它保证在渲染前执行。

requestIdleCallback 适合：

• 预加载
• 数据预计算
• 日志上报
• 非关键计算

因为它只在空闲时间运行。

七、优先级总结

在浏览器调度优先级中：

微任务 > rAF > 渲染 > rIC

可以抽象为：

高优先级（影响视觉） → rAF 低优先级（非关键逻辑） → rIC

八、本质差异

可以从“目标函数”角度理解：

• rAF 优化的是“帧同步”
• rIC 优化的是“主线程利用率”

两者并不是竞争关系，而是不同调度通道。

要拦截 arr[0] = 1 这类通过下标直接修改数组元素的操作，本质上需要拦截的是：

对象属性的 set 行为

在 JavaScript 中，这类操作是否可拦截，取决于使用的是 ES5 的 Object.defineProperty 体系，还是 ES6 的 Proxy 体系。

一、结论先行

• 无法通过 Object.defineProperty 完整拦截 arr[0] = 1
• 可以通过 Proxy 精确拦截 arr[0] = 1

这也是 Vue2 与 Vue3 在数组响应式能力上的本质差异之一。

二、为什么 defineProperty 做不到

1. 数组下标是“动态属性”

arr[0] = 1

等价于：

arr['0'] = 1

而 Object.defineProperty 的限制是：

• 只能拦截已存在的属性
• 无法感知新增属性
• 无法批量监听所有未知 key

即使提前对 0、1、2... 做劫持：

• 无法预知数组未来长度
• length 的变化也无法可靠追踪

因此只能通过 hack 原型方法（push、splice 等）做“部分覆盖”。

2. Vue2 的实际策略（背景理解）

Vue2 对数组的处理是：

• 劫持 push / pop / splice / shift / unshift / sort / reverse
• 不支持 arr[index] = value
• 不支持 arr.length = n

这是能力边界，而不是遗漏。

三、Proxy 如何拦截 arr[0] = 1

1. 核心原理

Proxy 能拦截的是：

对象层面的“任意属性访问与修改”

数组在 JS 中本质上是对象，因此：

arr[0] = 1

一定会触发 set trap。

2. 示例实现

const arr = new Proxy([], {
  set(target, key, value, receiver) {
    console.log('set:', key, value);
    return Reflect.set(target, key, value, receiver);
  }
});

arr[0] = 1;       // set: "0" 1
arr.length = 10; // set: "length" 10

可拦截的包括：

• 下标赋值
• length 变更
• 动态新增元素

四、为什么 Proxy 是“完整解法”

对比能力边界：

这也是 Vue3 全面转向 Proxy 的根本原因。

五、工程层面的注意点

1. 不要直接修改原数组引用

一旦做了 Proxy：

const raw = [];
const observed = new Proxy(raw, ...);

后续逻辑必须只使用代理对象，否则拦截会失效。

2. 避免在 set 中直接操作 target

推荐使用：

Reflect.set(target, key, value, receiver);

而不是：

target[key] = value;

否则容易破坏 this 绑定和继承语义。

async function 返回的 Promise 会在函数体内的执行流程“正常结束”时变为 resolved。

更精确地说，可以从以下几种情况来理解。

一、基本结论（核心规则）

当 async 函数执行到 return，或函数体执行完且未抛出异常时，返回的 Promise 会被 resolved。

同时遵循两个映射规则：

• return value → Promise.resolve(value)
• throw error → Promise.reject(error)

二、几种常见场景拆解

1. 显式 return（最常见）

async function foo() {
  return 42;
}

foo().then(res => console.log(res)); // 42

等价于：

function foo() {
  return Promise.resolve(42);
}

Promise 在 return 语句执行时变为 resolved。

2. 没有 return（隐式返回 undefined）

async function foo() {}

foo().then(res => console.log(res)); // undefined

等价于：

Promise.resolve(undefined);

函数执行到末尾时，Promise resolved，值为 undefined。

3. return await xxx

async function foo() {
  return await Promise.resolve(10);
}

这里要注意：

• await 会“暂停”函数执行，等待 Promise settle
• 只有在 await 的 Promise fulfilled 后，函数才会继续执行并 return

因此：

Promise 在 await 的 Promise fulfilled 之后 才会 resolved

等价逻辑：

Promise.resolve(10).then(v => Promise.resolve(v));

4. 函数内部抛出异常

async function foo() {
  throw new Error("err");
}

foo().catch(err => console.log(err.message));

此时：

• Promise 不会 resolved
• 而是 立即变为 rejected

5. await 的 Promise 被 reject

async function foo() {
  await Promise.reject("fail");
  return 1;
}

执行流程：

• await 等到 Promise reject
• 抛出异常
• 函数中断执行

结果：

foo().catch(err => console.log(err)); // "fail"

返回的 Promise 状态是 rejected，不是 resolved。

三、时间点总结（一句话版）

async function 返回的 Promise 在函数执行完毕且没有抛出异常时 resolved， 如果函数中包含 await，则要等 所有被 await 的 Promise fulfilled 后 才会 resolved。

四、事件循环视角（进阶理解）

async function foo() {
  return 1;
}

console.log("start");
foo().then(console.log);
console.log("end");

输出顺序：

start
end
1

说明：

• async 函数是 同步开始执行
• resolved 的回调（.then）一定进入微任务队列
• 即使是 return 1，也不会同步触发 .then

在前端视角下，大文件分片上传与断点续传解决的不是“能不能上传”，而是在不稳定网络环境下，如何保证上传过程可控、可恢复且对用户友好。它本质上是一个前后端协同的协议设计问题，而不仅是前端切片这么简单。

在实现层面，前端首先需要在本地对文件进行切片。通常通过 File 对象的 slice 能力，将一个大文件按固定大小或动态策略拆分成多个 chunk。切片时并不立即上传所有数据，而是先生成一个能够唯一标识该文件的标识，例如基于文件内容、文件大小和修改时间计算的 hash。这个标识用于在后续的整个生命周期中，让前后端对“同一个文件”达成一致认知。

在真正上传之前，前端通常会先向服务端发起一次“查询请求”，用于确认哪些分片已经存在。这一步是断点续传的关键。服务端根据文件标识返回一个已上传分片的列表或上传进度，前端据此跳过已完成的分片，仅上传缺失部分。这样即使浏览器刷新、进程中断或网络异常，也可以从已有进度继续。

分片上传阶段，前端会为每个 chunk 附带必要的元信息，例如文件标识、分片索引、分片大小和总分片数。上传可以是串行、并行或受控并发的方式，具体策略取决于网络状况和服务端承载能力。并发上传需要额外关注失败重试和顺序无关性，确保单个分片失败不会影响整体状态。

当所有分片上传完成后，前端需要显式通知服务端执行“合并”操作。服务端根据分片索引顺序将数据合并成最终文件，并进行完整性校验，例如比对文件 hash 或大小。如果合并失败，服务端应返回明确状态，前端再决定是否重试或重新上传部分分片。

在这个过程中，前端的职责不仅是发请求，还包括进度管理和用户体验控制。总体进度通常不是简单的已完成分片数，而是基于每个分片大小加权计算；失败时要能够精确回退到某个分片级别，而不是整文件重来。这也是分片上传相比普通上传复杂得多的原因。

从工程设计角度看，还需要注意安全和一致性问题。例如文件标识不能完全信任前端生成，服务端应有自己的校验逻辑；分片的存储需要具备过期和清理机制，避免“半成品文件”长期占用资源。在对象存储场景下，通常会直接利用存储服务提供的分片 / 多段上传能力，将前端协议映射到底层存储接口上。

总体而言，大文件分片上传与断点续传的关键不在“切”，而在于可恢复状态的设计。只要前后端都围绕同一个文件标识和分片状态工作，上传过程就可以被安全地中断并继续。

这两个问题本质上都围绕前端大数据列表渲染优化展开，一个关注「可视渲染范围的动态计算」，一个关注「数据加载时机的触发控制」。

下面分别深入分析虚拟滚动与无限滚动的机制与实现重点。

一、虚拟滚动的可视区域动态计算

虚拟滚动（Virtual Scrolling）通过只渲染视口内的部分元素来应对数千甚至数万条数据的性能问题。 核心思想是：

不管数据量多大，DOM 始终保持固定数量，随着滚动动态更新内容与偏移。

1. 可视区域计算的关键参数

假设：

• 容器可视高度为 containerHeight
• 每个 item 高度为 itemHeight（或动态高度下需记录每个 item 的累计高度）
• 当前滚动偏移为 scrollTop
• 数据总量为 totalCount

则可得：

const startIndex = Math.floor(scrollTop / itemHeight)
const endIndex = Math.min(
  totalCount - 1,
  Math.ceil((scrollTop + containerHeight) / itemHeight)
)

可视区域数据为 [startIndex, endIndex]。

渲染时，为了避免滚动突变，可以再加一层缓冲区（如上下各多渲染 2~3 屏），即：

const buffer = 3
const renderStart = Math.max(0, startIndex - buffer)
const renderEnd = Math.min(totalCount, endIndex + buffer)

列表整体通过一个 padding-top 或 transform: translateY() 来模拟滚动偏移， 从而保持虚拟节点的相对位置正确：

<div style="height: totalHeight">
  <div style="transform: translateY(${renderStart * itemHeight}px)">
    <!-- 渲染 renderStart ~ renderEnd 的真实内容 -->
  </div>
</div>

2. 动态高度场景的处理

当每个 item 高度不一致时，不能简单用平均高度估算。 常见策略有：

• 提前测量缓存：滚动时记录已渲染元素的实际高度缓存到数组。
• 二分查找定位 startIndex：通过累计高度数组计算当前 scrollTop 对应的可视起点。
• 实时校正：在滚动过程中异步更新累计高度，平滑修正位置偏移。

这类方案常见于如 Vue Virtual Scroller、React Window 等库中。

二、无限滚动与 Intersection Observer 性能优化

无限滚动（Infinite Scroll）强调懒加载数据而非局部渲染。 在早期实现中，通常监听 scroll 事件，通过判断 (scrollTop + clientHeight >= scrollHeight - threshold) 来触发加载。 但频繁监听滚动事件容易导致主线程压力大，尤其在高频滚动时。

使用 Intersection Observer 优化的思路

IntersectionObserver 是浏览器原生提供的 API，用于异步观察元素是否进入视口，非常适合在无限滚动中检测“触底区域”。

实现步骤

1. 在列表底部添加一个“哨兵元素”（sentinel）：

<div id="list">
  <div v-for="item in list" :key="item.id">{{ item.text }}</div>
  <div ref="sentinel"></div>
</div>

2. 创建观察器并监听该元素：

const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    loadMore() // 触发下一页加载
  }
}, {
  root: document.querySelector('#list'),
  threshold: 0.1
})
observer.observe(sentinel)

3. 当“哨兵元素”进入可视区域时自动加载下一批数据。

优点：

• 无需频繁监听滚动事件，浏览器内部通过优化调度执行检测逻辑。
• 可以精准控制触发阈值与加载频率。
• 在虚拟滚动场景中也可复用，用于判断当前渲染区域是否接近末尾。

三、两者结合的实践思路

在大型数据列表中，常将「虚拟滚动」与「无限滚动」结合使用：

1. 虚拟滚动负责控制已加载数据的渲染范围。
2. Intersection Observer负责控制数据加载节奏。

流程如下：

• 初始加载首屏数据（例如 50 条）
• 虚拟滚动负责仅渲染可见区域（例如 10 条）
• 在列表底部放置“哨兵元素”，当其进入视口时触发 loadMore()，加载更多数据并更新总量
• 虚拟滚动自动计算新的渲染范围，无需额外 DOM 操作

这种方式相比传统滚动监听，性能更平稳，渲染更可控。

JSON.stringify() 无法直接序列化 BigInt 类型的数据，如果遇到 BigInt 值，会抛出异常。

来看个例子：

const obj = { id: 123n };
JSON.stringify(obj);

运行后会报错：

TypeError: Do not know how to serialize a BigInt

原因：

JSON 规范本身并 不支持 BigInt 类型，只支持以下几种数据类型：

• string
• number（普通数字）
• boolean
• null
• object
• array

而 BigInt 是 ES2020 新增的类型，不属于 JSON 的标准类型。

常见解决方案：

1. 在序列化前手动转换为字符串

const obj = { id: 123n };
const json = JSON.stringify(obj, (_, value) =>
  typeof value === 'bigint' ? value.toString() : value
);
console.log(json); // {"id":"123"}

这样序列化后，可以在解析时再手动恢复：

const parsed = JSON.parse(json, (_, value) =>
  /^\d+$/.test(value) ? BigInt(value) : value
);
console.log(parsed.id); // 123n

2. 使用第三方库

像 json-bigint 这样的库可以支持 BigInt 的序列化与反序列化：

npm install json-bigint

示例：

const JSONbig = require('json-bigint');
const obj = { id: 123n };

const str = JSONbig.stringify(obj);
console.log(str); // {"id":123}

const parsed = JSONbig.parse(str);
console.log(parsed.id); // 123n

在前端项目中实现动态路由，本质上是根据用户权限、接口返回的数据或者运行时条件，动态地生成或加载路由配置，从而决定页面的可访问性和导航结构。

以 React Router 和 Vue Router 为例，核心思路有一些共通点： 在应用启动时，会有一个静态的基础路由表，用来保证最基本的页面可以正常访问（例如登录页、404 页、Layout 容器等）。而真正需要按用户角色、接口数据控制的路由，则通过接口请求或预置配置动态挂载进路由系统。

常见的实现方式有两类：

一种是前端自行维护完整的路由表，用户登录后，后端返回权限信息（角色、菜单、可访问模块 ID 等），前端在已有的路由表中做过滤，只保留当前用户有权限的部分，再动态挂载到路由系统。这种方式对前端掌控力更强，体验流畅，但需要在前端同步维护一份路由和权限的映射关系。

另一种是由后端直接下发路由配置（通常带有 path、component 标识、子路由结构等），前端拿到配置后再通过组件映射表动态生成路由。这种方式能减轻前端维护压力，但会带来接口设计和前后端耦合的问题。

在技术层面，React Router v6 提供了 useRoutes 可以直接基于对象动态生成路由，Vue Router 也支持 router.addRoute 在运行时动态添加路由。对于懒加载组件，还需要结合 import() 或 defineAsyncComponent（Vue）来实现，避免一次性加载所有页面。

此外，动态路由不仅仅是技术实现，还涉及安全性和用户体验。例如：

• 在前端动态路由实现时，不能只依赖前端的路由控制，还需要后端接口做权限校验，避免用户绕过前端访问受限页面。
• 路由结构最好和菜单、面包屑等导航组件解耦，通过统一的数据结构管理，保证后续扩展的灵活性。
• 在大规模项目中，动态路由还常与微前端、模块化加载结合，按需挂载子应用或子模块。

一、问题背景

在 JavaScript 中，this 的指向不是在函数定义时确定的，而是 在函数执行时，由调用方式决定。 因此，很多情况下我们需要“固定”this，保证函数执行时内部的 this 始终指向期望的对象。

二、使用 bind 固定 this

Function.prototype.bind 会返回一个新的函数，无论后续如何调用，内部的 this 都会固定为指定对象。

示例

const obj = {
  name: "Alice",
  sayHi: function() {
    console.log("Hi, I am " + this.name);
  }
};

const fn = obj.sayHi;
fn(); // 输出: Hi, I am undefined (this丢失)

const boundFn = obj.sayHi.bind(obj);
boundFn(); // 输出: Hi, I am Alice

特点

1. bind 返回一个新的函数，不会立即执行。

2. 绑定的 this 一旦确定，无法再被更改。

3. 还可以 预设参数，形成偏函数。

   function add(a, b) {
     return a + b;
   }
   const add5 = add.bind(null, 5);
   console.log(add5(3)); // 8
   

三、使用 箭头函数 固定 this

箭头函数没有自己的 this，它的 this 来自定义时所在的词法作用域。

示例

const obj = {
  name: "Alice",
  sayHi: function() {
    const inner = () => {
      console.log("Hi, I am " + this.name);
    };
    inner();
  }
};

obj.sayHi(); // 输出: Hi, I am Alice

特点

1. 箭头函数不会创建自己的 this，直接用外层函数的 this。
2. 不能用作构造函数（不能 new）。
3. 常用于 回调函数 或 事件监听器，避免丢失 this。

这段代码的执行结果是：

undefined

原因解析

1. 箭头函数的 this 特性

   • 箭头函数不会创建自己的 this，它的 this 来自 词法作用域，即它定义时所在的上下文。
   • 在这段代码里，print 是用箭头函数定义的，所以它的 this 不是 obj，而是定义它时所在的环境。

2. 当前环境的 this

   • 这段代码运行在模块或脚本的顶层环境：

     • 在严格模式下，顶层的 this 是 undefined。
     • 在非严格模式下，顶层的 this 是 window（浏览器）或 global（Node.js）。

   • 不论是哪种情况，顶层对象上都没有 objName 属性，因此 this.objName 是 undefined。

3. 为什么不是 “百度”

   • 如果把 print 定义为普通函数：

     print: function() { console.log(this.objName); }
     

     那么调用 obj.print() 时，this 会绑定到 obj，输出就是 "百度"。

   • 但是箭头函数丢失了这种绑定特性，它固定死了 this，因此取不到 obj 上的 objName。

1. 用 Promise.all 实现并发请求

Promise.all 的特性是：等待所有 Promise 全部成功，才会进入 .then；如果有一个失败，会立刻进入 .catch。

例子：

function fetchData(url) {
  return fetch(url).then(res => res.json());
}

Promise.all([
  fetchData('/api/user'),
  fetchData('/api/order'),
  fetchData('/api/message'),
]).then(([user, order, message]) => {
  console.log('全部成功:', user, order, message);
}).catch(error => {
  console.error('有请求失败:', error);
});

这样就能同时发起多个请求（并发），等结果全部回来再统一处理。

2. 如何处理 部分请求失败

方案 A: Promise.allSettled（推荐）

• 它不会短路，所有 Promise 都会执行完。
• 返回结果包含 status: "fulfilled" 或 "rejected"。

Promise.allSettled([
  fetchData('/api/user'),
  fetchData('/api/order'),
  fetchData('/api/message'),
]).then(results => {
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('成功:', result.value);
    } else {
      console.error('失败:', result.reason);
    }
  });
});

这样就能做到“部分成功也能拿到”。

方案 B: 手动封装 catch，让 Promise.all 不被短路

给每个请求加上 .catch，保证它不会抛错，而是返回一个标记：

function safeFetch(promise) {
  return promise
    .then(res => ({ status: 'fulfilled', value: res }))
    .catch(err => ({ status: 'rejected', reason: err }));
}

Promise.all([
  safeFetch(fetchData('/api/user')),
  safeFetch(fetchData('/api/order')),
  safeFetch(fetchData('/api/message')),
]).then(results => {
  console.log(results);
});

输出结构和 allSettled 一样，但可以兼容旧浏览器（没有 allSettled 的情况）。

方案 C: 按需兜底（部分失败时用默认值）

比如请求失败时，给个默认数据继续用：

Promise.all([
  fetchData('/api/user').catch(() => ({ name: '游客' })),
  fetchData('/api/order').catch(() => []),
  fetchData('/api/message').catch(() => []),
]).then(([user, order, message]) => {
  console.log('即使失败也有默认值:', user, order, message);
});

处理数字: 1, 索引: 0
处理数字: 2, 索引: 1
遇到数字 3，使用 return 跳过
处理数字: 4, 索引: 3
遇到数字 5，使用 return 跳过
处理数字: 6, 索引: 5

在 JavaScript 的 forEach 方法中使用 return 语句不会终止循环，它只是跳过当前迭代，继续执行下一次迭代。

1. 对象的原型

• 每个对象都有一个内部属性 [[Prototype]]（在 JS 中可以通过 __proto__ 访问），指向它的原型对象。
• 通过原型对象，对象可以访问继承来的属性和方法。
• 对象的原型通常由 构造函数的 prototype 属性 指定。

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};

const p = new Person('Alice');

console.log(p.__proto__ === Person.prototype); // true
p.sayHello(); // Hello, Alice

解释：

• p 是对象实例，它的 __proto__ 指向 Person.prototype，所以能调用 sayHello 方法。

2. 函数的原型

• 函数本身也是对象，每个函数都有一个 prototype 属性（注意和 __proto__ 不同）。
• prototype 是给 使用该函数作为构造函数 创建的对象实例提供原型的。
• 函数对象还有一个 __proto__，指向 Function.prototype。

function Foo() {}

console.log(typeof Foo);          // "function"
console.log(Foo.prototype);       // {constructor: Foo}，默认有 constructor 属性
console.log(Foo.__proto__ === Function.prototype); // true

解释：

• Foo.prototype 是实例 new Foo() 的原型对象。
• Foo.__proto__ 是函数自身的原型，指向 Function.prototype，因为函数也是对象。

3. 函数和对象原型之间的关联

• 对象的原型来自 构造函数的 prototype。
• 构造函数本身是函数对象，它的原型是 Function.prototype。
• 所有函数的原型链最终都指向 Object.prototype。

function Person(name) {
  this.name = name;
}
const p = new Person('Bob');

console.log(p.__proto__ === Person.prototype);      // true，实例的原型
console.log(Person.__proto__ === Function.prototype); // true，函数对象的原型
console.log(Function.prototype.__proto__ === Object.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype);   // true

原型链示意：

p --> Person.prototype --> Object.prototype --> null
Person --> Function.prototype --> Object.prototype --> null

在 JavaScript 中，循环方式非常多，不同的数据结构和场景适合使用不同的循环。常见方法主要可以分为 传统循环、for-in / for-of、数组专用遍历方法 三类。

1. 传统循环

for 循环

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

• 适用场景：数组、类数组对象，需要索引值或自定义迭代规则时。
• 特点：灵活，可以随时 break、continue，可控制起始、步长。

while 循环

let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

• 适用场景：适合不确定循环次数，只根据条件执行。
• 特点：写法简洁，可能出现死循环风险。

do...while

let i = 0;
do {
  console.log(arr[i]);
  i++;
} while (i < arr.length);

• 适用场景：至少要执行一次的场景。

2. for...in 和 for...of

for...in

const obj = { a: 1, b: 2 };
for (let key in obj) {
  console.log(key, obj[key]);
}

• 适用场景：遍历对象的 可枚举属性（含原型链上的）。
• 注意：不推荐用于数组（顺序不可控，还会遍历自定义属性）。

for...of

const arr = [10, 20, 30];
for (let value of arr) {
  console.log(value);
}

• 适用场景：遍历 可迭代对象（数组、字符串、Set、Map、NodeList 等）。
• 特点：直接拿到值，比 for...in 更适合数组。
• 局限：不能直接遍历普通对象（对象默认不可迭代）。

3. 数组专用方法

forEach

arr.forEach((value, index) => console.log(index, value));

• 适用场景：数组遍历。
• 特点：简洁、可读性好。
• 局限：不能 break 或 return 提前退出（只能用 throw hack）。

map

const doubled = arr.map(v => v * 2);

• 适用场景：需要生成一个新数组时。
• 特点：返回新数组，不改变原数组。

filter

const evens = arr.filter(v => v % 2 === 0);

• 适用场景：筛选数据。

reduce

const sum = arr.reduce((acc, cur) => acc + cur, 0);

• 适用场景：聚合操作（求和、对象统计、数组扁平化等）。

some / every

arr.some(v => v > 10);  // 是否存在大于10的元素
arr.every(v => v > 0);  // 是否所有元素都大于0

• 适用场景：条件判断。

find / findIndex

arr.find(v => v > 10);      // 返回第一个符合条件的值
arr.findIndex(v => v > 10); // 返回下标

4. 特殊结构

forEach + Map / Set

const set = new Set([1, 2, 3]);
set.forEach(v => console.log(v));

const map = new Map([["a", 1], ["b", 2]]);
map.forEach((value, key) => console.log(key, value));

for...of 遍历 Map / Set

for (let [key, value] of map) {
  console.log(key, value);
}

setInterval 在 JavaScript 中按照固定时间间隔重复执行回调，但由于 JS 单线程机制，如果回调执行时间超过间隔，就会导致 定时器堆积（多个回调排队等待执行），产生性能问题或逻辑异常。

下面介绍几种避免方法：

一、使用递归 setTimeout 替代 setInterval

原理：在回调执行完后再启动下一次定时器，保证不会重叠。

function doTask() {
  // 执行异步或耗时操作
  console.log('任务执行');

  // 完成后再递归调用
  setTimeout(doTask, 1000); // 1000ms 后再次执行
}

setTimeout(doTask, 1000);

特点：

• 每次间隔从上一次任务结束时开始计算，更安全；
• 可根据实际执行时间动态调整间隔。

二、在 setInterval 回调中加入执行状态判断

原理：用一个标志位判断任务是否正在执行，避免重叠。

let isRunning = false;

const interval = setInterval(() => {
  if (isRunning) return; // 上一次还没完成，跳过

  isRunning = true;
  doAsyncTask().finally(() => {
    isRunning = false;
  });
}, 1000);

特点：

• 任务仍然按照固定间隔触发，但不会堆积回调；
• 对耗时异步任务尤为重要。

三、使用 requestAnimationFrame（针对动画或 UI 刷新）

• 对于与渲染相关的循环任务，推荐 requestAnimationFrame 替代 setInterval，保证任务与浏览器渲染同步，避免不必要的重复调用。

function animate() {
  // 更新动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

1. 定义方式

const 定义函数

• 是通过函数表达式来定义的。
• 函数本身是一个变量，且绑定在 const 定义的变量上，不能重新赋值。
• 示例：

  const myFunction = function() {
      console.log("Hello!");
  };
  
  // 或使用箭头函数
  const myArrowFunction = () => {
      console.log("Hello from arrow function!");
  };
  

function 声明函数

• 是通过函数声明来定义的。
• 函数会在定义时就绑定到作用域，并且有函数名。
• 示例：

  function myFunction() {
      console.log("Hello!");
  }
  

2. 提升行为 (Hoisting)

function 声明

• 函数声明会被提升到作用域的顶部。这意味着你可以在声明之前调用该函数。
• 示例：

  myFunction(); // 输出: "Hello!"
  
  function myFunction() {
      console.log("Hello!");
  }
  

const 定义函数

• 函数表达式不会被提升，变量 const 会被提升但不会初始化。这意味着在定义之前调用会抛出 ReferenceError。
• 示例：

  myFunction(); // 抛出 ReferenceError: Cannot access 'myFunction' before initialization
  
  const myFunction = function() {
      console.log("Hello!");
  };
  

3. 作用域绑定

function 声明

• 函数声明会绑定到当前的作用域，并且在全局作用域下，它会绑定到 window 对象（非严格模式）。

const 定义函数

• 函数表达式绑定在块级作用域中，而不是全局作用域。
• 示例：

  {
      const myFunction = function() {
          console.log("Inside block!");
      };
      myFunction(); // 可以正常调用
  }
  myFunction(); // 抛出 ReferenceError: myFunction is not defined
  

4. 是否可以重新赋值

const 定义函数

• 使用 const 定义的函数是一个不可重新赋值的常量。
• 示例：

  const myFunction = function() {
      console.log("Hello!");
  };
  myFunction = () => console.log("New function!"); // 抛出 TypeError: Assignment to constant variable.
  

function 声明

• 函数声明本身没有重新赋值的概念，函数名是固定的。

5. 箭头函数支持

• const 可以结合箭头函数定义，创建更简洁的函数表达方式。

• 示例：

  const myArrowFunction = () => console.log("Hello, Arrow!");
  

• 而 function 声明是传统函数的定义形式，不支持箭头函数。

6. this 绑定的行为

function 声明

• function 声明使用的是传统的 this 绑定规则，this 的值取决于函数的调用方式（动态绑定）。
• 示例：

  function myFunction() {
      console.log(this);
  }
  myFunction(); // 在全局环境中调用，this 指向全局对象（严格模式下是 undefined）。
  

const 和箭头函数

• 如果使用 const 定义箭头函数，则 this 是静态绑定到定义该函数的作用域。
• 示例：

  const myArrowFunction = () => {
      console.log(this);
  };
  myArrowFunction(); // this 指向定义时的环境
  

高阶函数（Higher-Order Function）是指接受函数作为参数或返回一个函数作为结果的函数。它是 JavaScript 函数式编程的核心概念之一，常见的高阶函数有 map、filter、reduce、forEach 等。

高阶函数的特点

1. 接受函数作为参数：高阶函数可以将其他函数作为参数传入，允许对行为进行参数化。
2. 返回一个函数作为结果：高阶函数可以生成并返回新的函数，使得代码更加灵活和模块化。

常见的高阶函数示例

1. 数组的 map、filter、reduce

   • map：接收一个回调函数，将回调函数应用到数组的每个元素上，返回新数组。
   • filter：接收一个回调函数，筛选符合条件的元素，返回新数组。
   • reduce：接收一个回调函数，将数组元素逐步累计到一个结果中，返回最终结果。

   const numbers = [1, 2, 3, 4];
   const doubled = numbers.map(num => num * 2);    // [2, 4, 6, 8]
   const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
   const sum = numbers.reduce((total, num) => total + num, 0); // 10
   

2. 函数柯里化（Currying）

   • 通过返回一个新的函数，将参数拆分为多个独立调用的函数。

   function add(x) {
       return function(y) {
           return x + y;
       }
   }
   const add5 = add(5);   // add5 是一个新函数
   console.log(add5(3));  // 8
   

3. 函数组合

   • 组合多个函数，将一个函数的输出作为下一个函数的输入。

   function compose(f, g) {
       return function(x) {
           return f(g(x));
       }
   }
   const addOne = x => x + 1;
   const square = x => x * x;
   const addOneThenSquare = compose(square, addOne);
   console.log(addOneThenSquare(2)); // 9
   

高阶函数的优势

1. 代码简洁：通过复用高阶函数，可以减少冗余代码，提升可读性。
2. 扩展性强：高阶函数可以轻松地扩展函数的功能，允许动态改变函数的行为。
3. 灵活性：高阶函数可以动态生成新函数，提升函数的灵活性，适用于不同场景。

在 JavaScript 中，本地对象、内置对象和宿主对象的定义和区别如下：

1. 本地对象（Native Objects）

• 定义：本地对象是由 JavaScript 语言本身提供的对象，不依赖于任何外部环境。
• 例子：Object、Array、Function、Number、String、Boolean、RegExp 等。
• 特点：这些对象的构造函数和方法是 JavaScript 语言标准的一部分，能够在任何 JavaScript 环境中使用。

2. 内置对象（Built-in Objects）

• 定义：内置对象是本地对象的一部分，提供了标准的功能和方法，通常用来处理特定的数据类型或提供通用的功能。
• 例子：Math、JSON、Date、Promise 等。
• 特点：内置对象提供了用于特定任务的功能，比如数学计算、日期处理等，通常用于增强语言的功能。

3. 宿主对象（Host Objects）

• 定义：宿主对象是由宿主环境（如浏览器或 Node.js）提供的对象，通常用于与环境相关的功能。
• 例子：在浏览器中，window、document、XMLHttpRequest、console 等；在 Node.js 中，fs、http 等模块。
• 特点：宿主对象的实现和功能依赖于宿主环境，通常用于处理特定的环境交互。

用户贡献题目👏

贡献用户：FlamingFall

一般使用以下几种方法退出循环：

1. break

• 作用：立即终止当前循环，跳出循环体并继续执行循环后的代码。
• 用法：通常在循环内的条件判断中使用。
• 示例：

  for (let i = 0; i < 10; i++) {
    if (i === 5) {
      break; // 退出循环
    }
    console.log(i); // 输出 0, 1, 2, 3, 4
  }
  

2. return

• 作用：用于函数中，立即退出循环并返回函数的调用者。它不仅会退出循环，还会结束整个函数的执行。
• 用法：适用于需要在函数中退出循环并返回值的情况。
• 示例：

  function findFirstNegative(nums) {
    for (let num of nums) {
      if (num < 0) {
        return num; // 退出循环并返回负数
      }
    }
    return null; // 如果没有负数，返回 null
  }
  
  console.log(findFirstNegative([1, 2, 3, -4, 5])); // 输出 -4
  

3. throw

• 作用：抛出一个异常，终止当前循环及其包含的函数，并跳转到异常处理代码块（catch）。
• 用法：适用于需要通过异常机制退出循环并处理错误的情况。
• 示例：

  function processNumbers(numbers) {
    for (let num of numbers) {
      if (num < 0) {
        throw new Error('Negative number found'); // 退出循环并抛出错误
      }
      console.log(num);
    }
  }
  
  try {
    processNumbers([1, 2, 3, -4, 5]);
  } catch (e) {
    console.error(e.message); // 输出 'Negative number found'
  }
  

GET 请求的参数可以使用数组。

虽然在 URL 查询字符串中直接表示数组略有复杂，但有几种常见的方式来实现数组的传递。以下是一些常见的处理数组参数的方法：

1. 使用重复的参数名

最简单的方法是使用重复的参数名，每个数组元素作为一个独立的参数传递。例如，传递一个数组 [1, 2, 3] 可以表示为：

?numbers=1&numbers=2&numbers=3

这种方式常见于许多后端框架和库，它们能够解析这种格式的参数。

2. 使用方括号表示法

在一些编程环境中，可以使用方括号表示法来传递数组，这种方式可以表示嵌套的数组和对象。例如：

?numbers[]=1&numbers[]=2&numbers[]=3

这种方式在 PHP 和 Ruby 等语言中非常常见，它们能够解析这样的查询字符串。

3. 使用逗号分隔的字符串

另一种常见的方法是将数组元素用逗号或其他分隔符连接成一个字符串。例如：

?numbers=1,2,3

在服务器端，需要将这个字符串分隔开来以恢复原始数组。这种方式在 JavaScript 中也比较常见，尤其是当数组的顺序不需要保留时。

4. 使用 JSON 字符串

在一些情况下，可以将数组序列化为 JSON 字符串进行传递。例如：

?numbers=%5B1%2C2%2C3%5D

这里的 %5B, %2C, 和 %5D 是 URL 编码形式的 [，, 和 ]。在服务器端，需将 JSON 字符串解析回数组。

示例代码

前端示例：

// 使用重复的参数名
const array = [1, 2, 3];
const queryString = array.map(value => `numbers=${value}`).join('&');
const url = `https://example.com?${queryString}`;

// 使用方括号表示法
const queryStringBrackets = array.map(value => `numbers[]=${value}`).join('&');
const urlBrackets = `https://example.com?${queryStringBrackets}`;

// 使用逗号分隔的字符串
const queryStringComma = `numbers=${array.join(',')}`;
const urlComma = `https://example.com?${queryStringComma}`;

// 使用 JSON 字符串
const queryStringJSON = `numbers=${encodeURIComponent(JSON.stringify(array))}`;
const urlJSON = `https://example.com?${queryStringJSON}`;

后端示例（Node.js Express）：

app.get('/', (req, res) => {
  // 使用重复的参数名
  const numbers = req.query.numbers; // [1, 2, 3] - 自动解析为数组

  // 使用方括号表示法
  const numbersBrackets = req.query['numbers[]']; // [1, 2, 3] - 自动解析为数组

  // 使用逗号分隔的字符串
  const numbersComma = req.query.numbers.split(','); // ['1', '2', '3'] - 需要转换为数字数组

  // 使用 JSON 字符串
  const numbersJSON = JSON.parse(req.query.numbers); // [1, 2, 3]
});

Promise 对象

1、Promise 的含义

Promise 是异步编程的一种解决方案，比传统的解决方案 —— 回调函数和事件 —— 更合理和更强大。它由社区最早提出和实现， ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

Promise对象有以下两个特点。

（ 1 ）对象的状态不受外界影响。 Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled ）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是 “ 承诺 ” ，表示其他手段无法改变。

（ 2 ）一旦状态改变，就不会再变，任何时候都可以得到这个结果。 Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（ Event ）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

2、基本用法

实例1：基本用法

    var promise = new Promise(function(resolve, reject) {
        // ... some code
        if (/*  异步操作成功 */){
            resolve(value);
        } else {
            reject(error);
        }
    });

实例2：只要一new Promise后就会立即执行。

    let promise = new Promise(function(resolve, reject) {
        console.log('Promise');
        resolve();
    });
    promise.then(function() {
        console.log('Resolved.');
    });
    console.log('Hi!');
    // Promise
    // Hi!
    // Resolved

实例3：下面是一个用 Promise 对象实现的 Ajax 操作的例子。（非常经典）

    var getJSON = function (url) {
        var promise = new Promise(function (resolve, reject) {
            var client = new XMLHttpRequest();
            client.open("GET", url);
            client.onreadystatechange = handler;
            client.responseType = "json";
            client.setRequestHeader("Accept", "application/json");
            client.send();

            function handler() {
                if (this.readyState !== 4) {
                    return;
                }
                if (this.status === 200) {
                    resolve(this.response);
                } else {
                    reject(new Error(this.statusText));
                }
            };
        });
        return promise;
    };

    getJSON("/posts.json").then(function (json) {
        console.log('Contents: ' + json);
    }, function (error) {
        console.error(' 出错了 ', error);
    });

3、Promise.prototype.then()

Promise 实例具有then方法，也就是说，then方法是定义在原型对象 Promise.prototype 上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是 Resolved 状态的回调函数，第二个参数（可选）是 Rejected 状态的回调函数。
then方法返回的是一个新的 Promise 实例（注意，不是原来那个 Promise 实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

    getJSON("/posts.json").then(function(json) {
        return json.post;
    }).then(function(post) {
        // ...
    });

采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个 Promise 对象（即有异步操作），这时后一个回调函数，就会等待该 Promise 对象的状态发生变化，才会被调用。

    getJSON("/post/1.json").then(function (post) {
        return getJSON(post.commentURL);
    }).then(function funcA(comments) {
        console.log("Resolved: ", comments);
    }, function funcB(err) {
        console.log("Rejected: ", err);
    });

上面代码中，第一个then方法指定的回调函数，返回的是另一个 Promise 对象。这时，第二个then方法指定的回调函数，就会等待这个新的 Promise 对象状态发生变化。如果变为 Resolved ，就调用funcA，如果状态变为 Rejected ，就调用funcB。

4、Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。
实例：

    getJSON("/posts.json").then(function (posts) {
        // ...
    }).catch(function (error) {
        //  处理 getJSON  和 前一个回调函数运行时发生的错误
        console.log(' 发生错误！ ', error);
    });

跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数， Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。

    var someAsyncThing = function () {
        return new Promise(function (resolve, reject) {
        //  下面一行会报错，因为 x 没有声明
            resolve(x + 2);
        });
    };
    someAsyncThing().then(function () {
        console.log('everything is great');
    });

5、Promise.all()

Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
var p = Promise.all([p1, p2, p3]);
上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 对象的实例。

实例：

    Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=>{
        console.log(`result1:${res1.result}, result2:${res2.userID}`)
    });

6、Promise.race()

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。

7、Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。

    var jsPromise = Promise.resolve($.ajax('/whatever.json'));

8、Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。它的参数用法与Promise.resolve方法完全一致。

9、两个有用的附加方法

ES6 的 Promise API 提供的方法不是很多，有些有用的方法可以自己部署。下面介绍如何部署两个不在 ES6 之中、但很有用的方法。

9.1、done()

Promise 对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为 Promise 内部的错误不会冒泡到全局）。因此，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。

    asyncFunc()
        .then(f1)
        .catch(r1)
        .then(f2)
        .done();

9.2、finally()

finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。

    server.listen(0)
        .then(function () {
    // run test
        })
        .finally(server.stop);

10、Promise的使用

使用 Generator 函数管理流程，遇到异步操作的时候，通常返回一个Promise对象。

    function getFoo() {
        return new Promise(function (resolve, reject) {
            resolve('foo');
        });
    }

    var g = function* () {
        try {
            var foo = yield getFoo();
            console.log(foo);
        } catch (e) {
            console.log(e);
        }
    };

    function run(generator) {
        var it = generator();

        function go(result) {
            if (result.done) return result.value;
            return result.value.then(function (value) {
                return go(it.next(value));
            }, function (error) {
                return go(it.throw(error));
            });
        }

        go(it.next());
    }

    run(g);

async/await 的本质

async/await 是 ECMAScript 2017（ES8）中引入的一个语言特性，用于处理异步编程。async/await 实际上是对 Promise 的封装，通过让开发者以同步的方式编写异步代码，使得代码更加易读和易于维护。

async/await 是一种更加高级的异步编程方式，它使用了 Promise 作为底层实现，可以更好地处理异步编程中的错误和异常，避免了回调地狱和代码可读性差的问题。

手写 async/await 实现

async/await 的实现可以通过封装 Promise 和 Generator 函数来实现，下面是一个简单的手写实现示例：

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
}

function* generator() {
  console.log("start");
  yield delay(1000);
  console.log("after 1 second");
  yield delay(2000);
  console.log("after 2 more seconds");
}

function async(generatorFunc) {
  const iterator = generatorFunc();

  function handle(iteratorResult) {
    if (iteratorResult.done) {
      return Promise.resolve(iteratorResult.value);
    }

    return Promise.resolve(iteratorResult.value).then((res) => {
      return handle(iterator.next(res));
    });
  }

  return handle(iterator.next());
}

async(function () {
  return generator();
}).then(() => {
  console.log("all done");
});

检测对象是否循环引用通常是为了防止无限递归，特别是在处理 JSON 序列化、深拷贝或图遍历时。以下是几种常见的检测对象是否循环引用的方法：

1. 使用 Set 进行检测

一种常见的方法是使用 Set 数据结构来跟踪已经访问过的对象。如果在遍历对象时发现某个对象已经在 Set 中存在，就可以确定存在循环引用。

示例代码：

function hasCircularReference(obj) {
  const seen = new Set();

  function detect(obj) {
    if (obj && typeof obj === 'object') {
      if (seen.has(obj)) {
        return true; // 循环引用
      }
      seen.add(obj);
      for (const key of Object.keys(obj)) {
        if (detect(obj[key])) {
          return true;
        }
      }
    }
    return false;
  }

  return detect(obj);
}

// 测试循环引用
const a = {};
const b = { a };
a.b = b;

console.log(hasCircularReference(a)); // 输出：true

2. 使用 WeakMap 进行检测

WeakMap 也可以用来检测循环引用，它与 Set 类似，但使用 WeakMap 可以避免内存泄漏，因为 WeakMap 的键是弱引用的。

示例代码：

function hasCircularReference(obj) {
  const seen = new WeakMap();

  function detect(obj) {
    if (obj && typeof obj === 'object') {
      if (seen.has(obj)) {
        return true; // 循环引用
      }
      seen.set(obj, true);
      for (const key of Object.keys(obj)) {
        if (detect(obj[key])) {
          return true;
        }
      }
    }
    return false;
  }

  return detect(obj);
}

// 测试循环引用
const a = {};
const b = { a };
a.b = b;

console.log(hasCircularReference(a)); // 输出：true

3. 使用 JSON 序列化

一种简单的检测方法是尝试将对象序列化为 JSON 字符串，如果对象中存在循环引用，则会抛出错误。这种方法的缺点是会丢失对象中无法序列化的部分。

示例代码：

function isCircular(obj) {
  try {
    JSON.stringify(obj);
    return false;
  } catch (e) {
    return true;
  }
}

// 测试循环引用
const a = {};
const b = { a };
a.b = b;

console.log(isCircular(a)); // 输出：true

4. 手动跟踪引用

你可以在遍历对象时手动维护一个引用列表，在遍历过程中检测到已经访问过的对象即可判定是否存在循环引用。这种方法通常较为复杂，但也可以实现。

postMessage 是一种在不同源（域）之间进行安全通信的机制，可以解决跨域问题。以下是 postMessage 解决跨域问题的原理及其使用方式：

1. 原理

postMessage 方法 允许跨源通信，即使这些源在不同的域名、协议或端口下。这是通过以下方式实现的：

• 安全性：postMessage 允许页面向另一个窗口（如 iframe、弹出窗口或另一个 tab）发送消息，而不管它们是否同源。消息的传递过程中，接收方可以验证消息的来源和内容，从而确保通信的安全。
• 目标窗口：通过 postMessage 发送的消息可以指定目标窗口，通过其 origin（源）进行安全检查。接收方在接收消息时，可以检查 origin 属性来验证消息的来源。

2. 使用 postMessage 的步骤

1. 发送消息

使用 postMessage 方法可以向目标窗口发送消息。消息可以是任何数据类型，如字符串、对象等。

示例代码：

// 在发送消息的窗口中
const targetWindow = document.getElementById('myFrame').contentWindow;
const message = { type: 'greeting', text: 'Hello from parent' };

// 发送消息，指定目标窗口的 origin
targetWindow.postMessage(message, 'https://example.com');

2. 接收消息

在接收消息的窗口中，需要设置事件监听器来接收和处理消息。message 事件对象包含了消息的内容、来源和其他信息。

示例代码：

// 在接收消息的窗口中
window.addEventListener('message', (event) => {
  // 检查消息的来源
  if (event.origin !== 'https://example.com') {
    return; // 忽略来自不可信源的消息
  }

  // 处理接收到的消息
  console.log('Message received:', event.data);
});

3. 安全注意事项

• 检查 origin：接收消息时，始终检查 event.origin 以确保消息来自可信源。
• 验证消息内容：在处理消息时，验证消息的内容和结构，防止恶意数据造成问题。
• 限制目标窗口：发送消息时，尽量指定精确的目标源，而不是使用 *，以提高安全性。

JavaScript 对象本身并不能直接使用 for…of 迭代，因为它并不是一个可迭代对象（iterable）。

但是，如果我们想要遍历对象的属性，可以使用 for…in 循环，例如：

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let prop in obj) {
  console.log(prop + ': ' + obj[prop]);
}

// 这段代码可以输出：
name: John
age: 30
city: New York

需要注意的是，for…in 循环会遍历对象自身的所有可枚举属性，包括非数字键和继承的属性。如果只想遍历对象自身的属性，可以使用 hasOwnProperty() 方法进行判断，例如：

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop + ': ' + obj[prop]);
  }
}

这段代码和上面的代码功能是一样的，但是多了一个 hasOwnProperty() 判断，可以确保只输出对象自身的属性。

在 JavaScript 中，原型、构造函数、实例和原型链是构建和继承对象的核心概念。它们之间的关系如下：

1. 原型（Prototype）

定义：每个 JavaScript 对象都有一个原型（__proto__），这个原型也是一个对象。原型对象可以包含共享的属性和方法，这些属性和方法可以被所有实例访问。

作用：原型用于实现对象的继承。在 JavaScript 中，所有对象都可以从其原型中继承属性和方法。

2. 构造函数（Constructor Function）

定义：构造函数是一个用于创建和初始化对象的函数。它通常用 function 关键字定义，并且按照首字母大写的命名约定。

作用：构造函数用于创建新实例。每个构造函数都有一个 prototype 属性，指向一个原型对象。构造函数创建的实例对象可以访问这个原型对象上的属性和方法。

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

3. 实例（Instance）

定义：实例是通过构造函数创建的对象。每个实例都具有构造函数的原型链上的属性和方法。

作用：实例是构造函数创建的具体对象，它可以访问构造函数的原型对象上的属性和方法。

const john = new Person('John');
john.sayHello(); // 输出: Hello, my name is John

4. 原型链（Prototype Chain）

定义：原型链是用于实现继承的机制。在 JavaScript 中，当访问对象的属性或方法时，首先在对象本身查找，如果找不到，则沿着对象的原型链向上查找，直到找到属性或方法或者到达 Object.prototype。

作用：原型链使得 JavaScript 对象可以共享属性和方法，并实现继承机制。

关系总结

1. 构造函数：用于创建对象，并通过其 prototype 属性定义原型对象。
2. 原型：构造函数的 prototype 属性指向的对象，包含了所有实例共享的属性和方法。
3. 实例：通过构造函数创建的对象，每个实例都有一个指向构造函数 prototype 的隐式链接（__proto__）。
4. 原型链：通过对象的 __proto__ 连接构造函数的 prototype，形成一个链条，使得实例可以访问其原型以及原型的原型上的属性和方法。

示例代码

function Animal(name) {
  this.name = name;
}

Animal.prototype.say = function() {
  console.log(`${this.name} makes a sound`);
};

function Dog(name) {
  Animal.call(this, name); // 继承属性
}

// 继承原型方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(`${this.name} barks`);
};

const myDog = new Dog('Rex');
myDog.say();  // 输出: Rex makes a sound
myDog.bark(); // 输出: Rex barks

解析

1. Animal：构造函数，定义了 say 方法。
2. Animal.prototype：包含了 say 方法的原型对象。
3. Dog：构造函数，继承自 Animal。
4. Dog.prototype：通过 Object.create(Animal.prototype) 继承了 Animal.prototype 的属性和方法，同时添加了 bark 方法。
5. myDog：Dog 的实例，继承了 Animal.prototype 和 Dog.prototype 的属性和方法。

这种机制允许 JavaScript 实现对象之间的继承和共享，使得代码更加灵活和可复用。

1. 了解常见的内存泄露类型

• 全局变量：未声明的变量被添加到全局作用域。
• 闭包：长时间持有对外部作用域的引用。
• 事件监听器：未正确移除的事件监听器。
• 定时器：未清除的 setInterval 或 setTimeout。
• DOM 引用：移除 DOM 元素后仍有对其的引用。

2. 使用开发者工具进行排查

Chrome DevTools 提供了内存分析工具，可以帮助检测和修复内存泄露问题。

步骤：

1. 检查内存快照：

   • 打开 Chrome DevTools，转到 “Memory” 面板。
   • 使用 “Heap Snapshot” 生成内存快照，比较不同时间点的快照找出持续增长的对象。

2. 分析快照：

   • 查找未释放的内存对象，特别是意外增长的数组、对象等。
   • 查看 DOM 节点和 JavaScript 对象的引用链，识别意外的引用保留。

3. 监视内存分配：

   • 使用 “Allocation Timeline” 记录内存分配情况，观察是否存在不断增长的内存分配。

4. 使用“Find Leaks”工具：

   • 在 “Memory” 面板中，使用 “Heap Snapshot” 功能找到泄露的对象并分析其引用链。

4. 使用第三方工具

• Lighthouse：用于性能分析和内存泄露检测。

Axios 的拦截器（interceptors）允许你在请求或响应被处理之前，进行一些自定义的处理或修改。拦截器提供了一个强大的机制来对请求和响应进行全局处理，比如添加认证信息、处理错误、或修改请求数据等。

1. 拦截器原理

1. 请求拦截器：在请求发送到服务器之前，可以对请求进行修改、添加头信息、处理请求数据等。
2. 响应拦截器：在接收到响应数据之前，可以对响应数据进行修改或处理错误。

2. 拦截器应用

常见应用场景：

• 请求拦截器：

  • 添加认证令牌（Token）到请求头。
  • 对请求数据进行统一的格式化或加密。

• 响应拦截器：

  • 统一处理错误码或异常情况。
  • 对响应数据进行统一的格式化或解密。

3. 简单手写核心逻辑

手写核心逻辑可以帮助理解拦截器的基本实现原理。以下是一个简化的 Axios 拦截器的实现：

简化 Axios 实现

class SimpleAxios {
  constructor() {
    this.requestInterceptors = [];
    this.responseInterceptors = [];
  }

  // 添加请求拦截器
  useRequestInterceptor(fn) {
    this.requestInterceptors.push(fn);
  }

  // 添加响应拦截器
  useResponseInterceptor(fn) {
    this.responseInterceptors.push(fn);
  }

  // 发送请求
  async request(config) {
    // 执行请求拦截器
    for (const interceptor of this.requestInterceptors) {
      config = interceptor(config);
    }

    // 模拟发送请求
    let response = await this._sendRequest(config);

    // 执行响应拦截器
    for (const interceptor of this.responseInterceptors) {
      response = interceptor(response);
    }

    return response;
  }

  // 模拟请求发送
  async _sendRequest(config) {
    // 这里模拟返回一个响应
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ data: 'response data', config });
      }, 1000);
    });
  }
}

// 使用示例
const axios = new SimpleAxios();

// 添加请求拦截器
axios.useRequestInterceptor(config => {
  console.log('Request Interceptor:', config);
  config.headers = { Authorization: 'Bearer token' };
  return config;
});

// 添加响应拦截器
axios.useResponseInterceptor(response => {
  console.log('Response Interceptor:', response);
  response.data = `Processed: ${response.data}`;
  return response;
});

// 发送请求
axios.request({ url: '/api/data', method: 'GET' })
  .then(response => {
    console.log('Response:', response);
  });

4. 解释

• SimpleAxios 类：模拟了 Axios 的核心功能，包括请求和响应拦截器的添加及处理。
• useRequestInterceptor 和 useResponseInterceptor：用于注册请求和响应拦截器。
• request 方法：在发送请求之前和之后分别执行请求和响应拦截器。
• _sendRequest 方法：模拟发送请求并返回响应。

WebWorker、SharedWorker 和 ServiceWorker 都是 Web API 提供的用于在后台线程执行 JavaScript 代码的机制，但它们有不同的用途和特性。下面是它们的主要区别：

1. WebWorker

• 作用：用于在后台线程中执行 JavaScript 代码，避免阻塞主线程（UI线程）。
• 生命周期：与页面的生命周期关联，当页面关闭时，WebWorker 也会终止。
• 通信：通过 postMessage 和 onmessage 进行通信，只能与创建它的页面进行通信，不能与其他页面或 Worker 进行直接通信。
• 共享数据：不能直接与其他 WebWorkers 或页面共享数据。
• 应用场景：适用于需要在后台执行计算密集型任务的场景，如数据处理、图像处理等。

示例：

// main.js
const worker = new Worker('worker.js');
worker.postMessage('Hello, worker!');
worker.onmessage = (event) => console.log(event.data);

// worker.js
self.onmessage = (event) => {
  self.postMessage(`Received: ${event.data}`);
};

2. SharedWorker

• 作用：允许多个浏览器上下文（如不同的页面或 iframe）共享一个 Worker 实例。
• 生命周期：与浏览器会话关联，不会随页面关闭而销毁，只要有一个页面或 iframe 仍在使用 SharedWorker，它就会保持活跃。
• 通信：通过 postMessage 和 onmessage 进行通信，但可以在不同的页面或 iframe 之间进行通信。
• 共享数据：可以在多个页面或 iframe 之间共享数据。
• 应用场景：适用于需要在多个页面或 iframe 之间共享数据或状态的场景，如实时应用、共享缓存等。

示例：

// main1.js
const worker = new SharedWorker('shared-worker.js');
worker.port.postMessage('Hello from page 1!');
worker.port.onmessage = (event) => console.log(event.data);

// main2.js
const worker = new SharedWorker('shared-worker.js');
worker.port.postMessage('Hello from page 2!');
worker.port.onmessage = (event) => console.log(event.data);

// shared-worker.js
self.onconnect = (event) => {
  const port = event.ports[0];
  port.onmessage = (event) => {
    port.postMessage(`Received: ${event.data}`);
  };
};

3. ServiceWorker

• 作用：主要用于拦截和处理网络请求，缓存资源，实现离线功能和推送通知等功能。
• 生命周期：与页面的生命周期无关，可以在后台长时间运行，不会随页面的关闭而结束。可以在浏览器关闭时继续运行，用于处理推送通知等。
• 通信：通过 postMessage 和 onmessage 与页面进行通信，但不能直接访问 DOM。
• 共享数据：通过缓存机制（Cache API）和 IndexedDB 进行数据存储和共享。
• 应用场景：适用于实现离线支持、缓存优化、后台同步、推送通知等功能。

示例：

// service-worker.js
self.addEventListener('install', (event) => {
  // Perform install steps
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/script/main.js'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

在 JavaScript 中，Number 类型的最大值为 Number.MAX_VALUE。当计算结果超过这个最大值时，会出现以下情况：

1. 使用 Infinity

• 描述：当计算结果超出 Number.MAX_VALUE，JavaScript 会返回 Infinity。
• 示例：

  const largeNumber = Number.MAX_VALUE * 2; // 结果是 Infinity
  console.log(largeNumber); // Infinity
  

2. 使用 BigInt

• 描述：BigInt 是一种新的原生数据类型，可以表示任意精度的整数。适用于处理超出 Number 最大值的数值。

• 使用方法：

  const bigNumber = BigInt("123456789012345678901234567890");
  console.log(bigNumber); // 123456789012345678901234567890n
  

• 与 Number 的区别：

  • BigInt 可以表示比 Number 更大的整数值，但不支持小数。
  • BigInt 与 Number 类型在操作和比较时需注意不同，BigInt 与 Number 不能直接进行算术运算。

3. 使用字符串表示法

• 描述：当处理极大的数值时，可以使用字符串来表示和操作这些数值，避免直接计算。
• 示例：

  const bigNumberStr = "123456789012345678901234567890";
  // 使用自定义函数或库来进行大数运算
  

4. 使用专门的大数库

• 描述：有一些 JavaScript 库专门用于处理大数运算，比如 bignumber.js、decimal.js。
• 示例：

  const BigNumber = require('bignumber.js');
  const largeNumber = new BigNumber('123456789012345678901234567890');
  console.log(largeNumber.toString()); // 123456789012345678901234567890
  

在 JavaScript 中，const 和 let 声明的变量不直接添加到全局 window 对象上，这与 var 声明的变量不同。下面是对 const 和 let 的详细解释，以及如何访问这些变量的说明：

const 和 let 的声明和作用域

1. 作用域：

   • const 和 let 的作用域是块级作用域（block scope），意味着它们的作用范围是被它们声明的代码块（例如函数、循环或条件语句）内。

2. 全局作用域：

   • 当 const 或 let 在全局作用域中声明时，它们不会成为 window 对象的属性。这与 var 不同，var 声明的变量会自动成为全局 window 对象的属性。

如何访问全局作用域中的 const 和 let 变量

虽然 const 和 let 变量不直接在 window 对象上，但它们仍然存在于全局作用域中。访问这些变量的方法有：

1. 在同一作用域内直接访问：

   • 在全局作用域中，可以直接访问这些变量：

     let globalLet = 'Hello, world!';
     const globalConst = 42;
     
     console.log(globalLet);   // 输出: 'Hello, world!'
     console.log(globalConst); // 输出: 42
     

2. 使用 globalThis：

   • 在现代 JavaScript 环境中，可以使用 globalThis 来访问全局对象。在浏览器环境中，globalThis 指向 window 对象；在 Node.js 环境中，globalThis 指向 global 对象。对于 const 和 let 变量，它们不会出现在 globalThis 上。

3. eval（不推荐使用）：

   • 在特定情况下，可以使用 eval 来访问全局作用域中的变量：

     let globalLet = 'Hello, world!';
     const globalConst = 42;
     
     console.log(eval('globalLet'));   // 输出: 'Hello, world!'
     console.log(eval('globalConst')); // 输出: 42
     

   • 注意：eval 存在安全性和性能问题，一般不推荐使用。

为什么 const 和 let 不在 window 上？

• 设计考虑：

  • const 和 let 的设计目标是提供更严格的作用域控制和避免全局变量污染。为了减少意外的全局变量污染，它们不自动添加到 window 对象上。

• 全局对象的隔离：

  • 通过不将 const 和 let 声明的变量添加到 window 对象，JavaScript 语言保证了全局作用域的变量不会被无意中修改。这有助于避免由于全局变量污染造成的潜在冲突和错误。

对于数组 [3, 15, 8, 29, 102, 22] 使用 .sort() 方法，结果是 [102, 15, 22, 29, 3, 8]。

原因：

Array.prototype.sort() 方法默认是按字典顺序（即字符串的顺序）对数组元素进行排序的。它会将数组中的元素转换为字符串，然后按字典顺序比较这些字符串。

在这个例子中，排序过程如下：

1. 转换为字符串：

   • 3 -> "3"
   • 15 -> "15"
   • 8 -> "8"
   • 29 -> "29"
   • 102 -> "102"
   • 22 -> "22"

2. 按字典顺序比较字符串：

   • "102" > "15"
   • "15" > "22"
   • "22" > "29"
   • "29" > "3"
   • "3" > "8"

因此，排序后的结果是 [102, 15, 22, 29, 3, 8]。如果要按数值排序，需要传递一个比较函数给 .sort()，例如：

[3, 15, 8, 29, 102, 22].sort((a, b) => a - b);

这将返回 [3, 8, 15, 22, 29, 102]。

在箭头函数中，this指向的是定义时所在的对象，而不是使用时所在的对象。换句话说，箭头函数没有自己的this，而是继承父作用域中的this。

看个例子:

var person = {
  name:'张三',
  age:18,
  getName:function(){
     console.log('我的名字是：'+this.name)
  },
  getAge:()=>{
     console.log('我的年龄是：'+this.age)
  }
}

person.getName() // 我的名字是张三
person.getAge()  // 我的年龄是undefined

person.getName()中this指向函数的调用者，也就是person实例，因此this.name = "张三"。

getAge()通过箭头函数定义，而箭头函数是没有自己的this，会继承父作用域的this，因此person.getAge()执行时，此时的作用域指向window，而window没有定义age属性，所有报undefined。

从例子可以得出：对象中定义的函数使用箭头函数是不合适的。

先解答下标题问题，为啥箭头函数不能作为构造函数？

// 构造函数生成实例的过程
function Person(name,age){
  this.name = name
  this.age = age
}
var p = new Person('张三',18)

//new关键字生成实例过程如下
// 1. 创建空对象p
var p = {}
// 2. 将空对象p的原型链指向构造器Person的原型
p.__proto__ = Person.prototype
// 3. 将Person()函数中的this指向p
// 若此处Person为箭头函数，而没有自己的this，call()函数无法改变箭头函数的指向，也就无法指向p。
Person.call(p)

构造函数是通过new关键字来生成对象实例，生成对象实例的过程也是通过构造函数给实例绑定this的过程，而箭头函数没有自己的this。创建对象过程，new 首先会创建一个空对象，并将这个空对象的__proto__指向构造函数的prototype，从而继承原型上的方法，但是箭头函数没有prototype。因此不能使用箭头作为构造函数，也就不能通过new操作符来调用箭头函数。

使用区别

在 JavaScript 中，对象的取值可以使用两种方式，即使用点号（.）和使用方括号（[]）。对于对象的多层嵌套属性，可以使用两种方式分别取值，例如：

cssCopy codevar obj = {a: {b: {c: {d: 123}}}};
var d1 = obj.a.b.c.d;
var d2 = obj['a']['b']['c']['d'];

这两种方式获取的结果是相同的，都是 123。其中，使用点号取值的方式称为“点操作符”，使用方括号取值的方式称为“方括号操作符”。

两种方式的区别在于：

1. 点操作符必须使用标识符作为属性名，而方括号操作符可以使用任何字符串作为属性名。
2. 点操作符在代码书写上更加简洁直观，而方括号操作符可以动态地构造属性名。

因此，在使用时应根据具体的情况选择合适的方式。例如，如果属性名是固定的，建议使用点操作符；如果属性名需要根据变量或其他动态条件构造，则需要使用方括号操作符。

性能区别

在对象属性的取值操作中，使用点号.和中括号[]两种方式都能取到相应的属性值，它们在性能上也有些许的差别。

一般情况下，使用点号.来获取属性的性能要高于中括号[]，因为在解析的过程中使用点号.可以直接根据属性名获取到对应的属性值，而中括号[]需要先进行解析里面的属性名，然后再去查找相应的属性值，因此多了一个解析的过程。

但是在以下两种情况下，只能使用中括号[]来获取属性值：

1. 属性名包含特殊字符或者是关键字，比如 a \['class'\]。
2. 属性名是动态生成的，比如 a \[`${name}`\]。

在这两种情况下，使用点号.将会出现语法错误，只能使用中括号[]来获取属性值。

普通 for 循环通常在性能上优于 forEach 的原因有以下几点：

1. 函数调用开销

• forEach：在每次迭代时，forEach 需要调用回调函数。这意味着每次迭代都会发生额外的函数调用开销，包括创建函数上下文、传递参数等。

• for：普通的 for 循环直接在循环体内执行代码，没有函数调用开销。

2. 函数创建和管理

• forEach：forEach 需要创建一个回调函数并管理它。对于大量数据，创建和销毁函数会带来一定的性能开销。

• for：在普通的 for 循环中，不需要额外的函数创建和销毁，只需要简单的循环控制。

3. 函数闭包

• forEach：forEach 的回调函数可能会涉及闭包，闭包的使用会引入额外的内存开销。

• for：普通的 for 循环没有这种闭包开销，代码直接在循环体内执行。

4. 编译优化

• for：现代 JavaScript 引擎对普通 for 循环进行了高度优化，特别是可以进行更多的编译优化，如内联循环变量和减少循环体的计算量。

• forEach：回调函数的复杂性使得优化更具挑战，可能不如 for 循环容易优化。

5. 可控性

• for：可以精确控制循环的行为，包括提前退出（使用 break）、跳过迭代（使用 continue），以及根据需要修改循环变量。

• forEach：forEach 无法直接提前退出或跳过迭代，尽管可以通过其他方式（如抛出异常）来间接实现，但这种方式较为繁琐和不直观。

性能对比示例

以下是一个简单的性能对比示例：

const array = new Array(1000000).fill(0);

// `for` loop
console.time('for');
for (let i = 0; i < array.length; i++) {
  array[i] = i;
}
console.timeEnd('for');

// `forEach` loop
console.time('forEach');
array.forEach((value, index) => {
  array[index] = index;
});
console.timeEnd('forEach');

在这个例子中，普通的 for 循环通常会比 forEach 更快。

在 JavaScript 中，访问数组的任意元素（如第一个或第十万个元素）是常数时间操作，即 O(1) 时间复杂度。这意味着不论数组的大小如何，访问数组的某个元素的时间复杂度都是固定的。

具体来说：

• 访问第一个元素：array[0]
• 访问第十万个元素：array[99999]

这两种访问方式的时间复杂度都是 O(1)。

在实际操作中，现代浏览器和 JavaScript 引擎对数组的随机访问优化得非常好，因此访问任何一个数组元素的时间差异通常非常微小，不会因数组大小的不同而显著变化。

JavaScript 对象的底层数据结构主要基于 哈希表（Hash Table）。哈希表是一种使用哈希函数将键映射到特定的存储位置的数据结构。JavaScript 对象的键值对存储机制的底层实现与哈希表有相似之处。以下是对 JavaScript 对象底层数据结构的详细解释：

1. 哈希表

• 概念： 哈希表是一种数据结构，它通过哈希函数将键（通常是字符串或数字）映射到一个数组的索引位置。在 JavaScript 对象中，这种映射关系使得快速查找、插入和删除变得可能。

• 哈希函数： 哈希函数将对象的键（属性名）转换为一个整数索引，这个索引决定了数据在哈希表中的位置。对于 JavaScript 对象，键是字符串类型，虽然内部实现可能采用更复杂的哈希函数来确保高效的查找和冲突处理。

2. 内部实现

• 属性存储： 在 JavaScript 中，对象的属性和值通常存储在一个散列的数据结构中。在现代 JavaScript 引擎中（如 V8 引擎），对象属性存储通常优化为不同的数据结构，如哈希表和字典表。

• 散列和优化： 为了提高性能，现代 JavaScript 引擎对哈希表进行了优化。它们可能使用链式哈希、开放寻址、或其他算法来处理哈希冲突，并提供高效的属性访问和修改。

• 内部表： JavaScript 对象的属性和值可能存储在内部的表结构中，这些表结构可能包括：

  • 哈希表：用于大多数普通属性的存储。
  • 隐藏类（Hidden Classes）：一些引擎（如 V8）使用隐藏类来优化对象的属性访问。隐藏类用于跟踪对象的结构，并使属性访问变得更加高效。

3. 现代引擎中的优化

• 隐藏类和内存布局： 为了提高性能，现代 JavaScript 引擎（如 V8）使用隐藏类和内存布局优化来减少属性访问的时间复杂度。隐藏类用于动态地优化对象的属性布局，以适应对象的实际使用模式。

• 散列表的优化： 引擎可能使用特殊的数据结构来存储和访问属性，特别是在属性较少的情况下。对于大量属性的对象，哈希表可能会转化为其他更适合的结构，以确保高效的操作。

4. 键的顺序

• 属性顺序： JavaScript 对象属性的顺序通常是有序的。ES2015（ES6）规定了属性遍历的顺序，包括：
  • 数字键：按照升序排序。
  • 字符串键：按照创建的顺序排序。
  • Symbol 键：按照创建的顺序排序。

在 JavaScript 中，变量在内存中的具体存储形式取决于变量的类型。JavaScript 变量主要有两种类型：基本数据类型和引用数据类型。它们的存储和管理方式有所不同。

1. 基本数据类型

基本数据类型包括：undefined、null、boolean、number、string 、symbol和bigint。这些类型的变量直接存储值：

• 存储形式：

  • 值存储：基本数据类型的变量在内存中直接存储其值。例如，let num = 42; 中的 num 在内存中存储了值 42，而不是指向某个位置。

• 内存管理：

  • 堆栈内存：基本数据类型的值通常存储在栈内存（stack）中。这种存储方式使得访问基本数据类型的值非常高效，因为栈内存中的分配和回收速度非常快。

2. 引用数据类型

引用数据类型包括：object、array、function 和 class 实例。引用数据类型的变量存储的是对内存中实际对象的引用，而不是对象本身：

• 存储形式：

  • 引用存储：引用数据类型的变量在内存中存储一个指向实际数据结构的引用（或指针）。例如，let obj = {a: 1}; 中的 obj 存储的是指向 {a: 1} 对象的引用，而不是对象的实际内容。

• 内存管理：

  • 堆内存：引用数据类型的实际内容存储在堆内存（heap）中。堆内存允许动态分配和释放内存空间，这对引用数据类型尤为重要，因为它们的大小和结构可能在运行时发生变化。

3. 内存管理和垃圾回收

• 栈内存：用于存储基本数据类型的变量和函数调用的上下文。栈内存由 JavaScript 引擎自动管理，确保变量在函数调用时得到分配和回收。

• 堆内存：用于存储引用数据类型的实际内容。堆内存的管理更加复杂，涉及到垃圾回收机制来自动回收不再使用的对象。

4. 内存分配与回收

• 基本数据类型：由于其固定大小和简单结构，基本数据类型的内存分配和回收较为直接。分配的内存空间会被保留到变量不再使用时。

• 引用数据类型：内存分配更为复杂。JavaScript 引擎使用垃圾回收算法来自动管理堆内存中的对象，常见的垃圾回收算法包括标记-清除（Mark-and-Sweep）和标记-整理（Mark-and-Compact）。

eval 是 JavaScript 的一个内置函数，用于将字符串作为 JavaScript 代码进行执行。它接受一个字符串作为参数，并在当前的作用域中执行这段代码。

基本用法

eval("console.log('Hello, world!');");  // 输出: Hello, world!

特性和影响

1. 动态代码执行：

   • eval 允许在运行时动态地执行代码。这对于一些需要动态生成和执行代码的场景可能有用。

2. 作用域：

   • 在 eval 执行的代码中声明的变量会影响到 eval 外部的作用域。这意味着在 eval 中定义的变量和函数可以在外部作用域中访问，反之亦然。

3. 性能问题：

   • 使用 eval 会使得 JavaScript 引擎的优化变得困难，因为它不能对动态生成的代码做出优化。结果可能会导致性能下降。

4. 安全风险：

   • eval 会执行传入的任意代码，这可能导致严重的安全问题，例如代码注入攻击。如果 eval 执行了来自不可信来源的代码，可能会导致恶意代码的执行。

5. 替代方案：

   • 通常，避免使用 eval 是一种更好的实践。可以使用 Function 构造函数、JSON.parse（用于解析 JSON 字符串），或其他更安全的动态代码执行方法。

示例

let x = 10;
eval("console.log(x);");  // 输出: 10
eval("let y = 20; console.log(y);");  // 输出: 20，y 在外部作用域也能访问

new Function 是 JavaScript 中创建函数的一种方式，它允许动态地生成和执行函数。与 eval 不同，new Function 主要用于创建函数，而不是执行任意的 JavaScript 代码。它接受一个或多个参数，最后一个参数是函数体，其余参数是函数的参数列表。

基本语法

new Function ([arg1, arg2, ..., argN], functionBody)

• arg1, arg2, ..., argN：函数的参数列表。
• functionBody：函数体，是一个包含函数代码的字符串。

示例

const add = new Function('a', 'b', 'return a + b;');
console.log(add(1, 2));  // 输出: 3

特性

1. 动态函数创建：

   • new Function 允许在运行时动态生成函数。这对于创建动态代码或在不知道函数具体内容的情况下生成函数可能有用。

2. 作用域：

   • 使用 new Function 创建的函数不具有访问创建它的上下文中的变量。它们只能访问全局变量。

3. 字符串参数：

   • 函数体是作为字符串传递的，这意味着无法在函数体中使用局部作用域内的变量。

4. 安全性：

   • 虽然 new Function 比 eval 更受控制，但仍然存在安全隐患，特别是当函数体包含来自不可信来源的内容时。

5. 性能：

   • new Function 会影响 JavaScript 引擎的优化，因为它需要解析和执行动态生成的代码。性能可能会受到影响。

对比 eval

• eval：执行任意代码，并可以影响创建它的上下文的作用域。
• new Function：创建一个新的函数，它不访问创建它的上下文中的局部变量，只能访问全局变量。

例子：

// 创建一个计算乘积的函数
const multiply = new Function('x', 'y', 'return x * y;');
console.log(multiply(4, 5));  // 输出: 20

// 创建一个函数，访问全局变量
var globalVar = 10;
const addGlobal = new Function('return globalVar + 5;');
console.log(addGlobal());  // 输出: 15

在 JavaScript 中，数组方法可以分为改变原数组的方法和不改变原数组的方法。下面是对这些方法的详细分类：

改变自身的方法

这些方法会直接修改数组本身：

1. push(): 向数组末尾添加一个或多个元素。

   let arr = [1, 2, 3];
   arr.push(4); // arr 是 [1, 2, 3, 4]
   

2. pop(): 从数组末尾删除一个元素，并返回该元素。

   let arr = [1, 2, 3];
   arr.pop(); // arr 是 [1, 2]
   

3. shift(): 从数组开头删除一个元素，并返回该元素。

   let arr = [1, 2, 3];
   arr.shift(); // arr 是 [2, 3]
   

4. unshift(): 向数组开头添加一个或多个元素。

   let arr = [1, 2, 3];
   arr.unshift(0); // arr 是 [0, 1, 2, 3]
   

5. splice(): 从数组中添加或删除元素。

   let arr = [1, 2, 3];
   arr.splice(1, 1, 4, 5); // arr 是 [1, 4, 5, 3]
   

6. sort(): 对数组进行排序，默认按字符编码排序。

   let arr = [3, 1, 2];
   arr.sort(); // arr 是 [1, 2, 3]
   

7. reverse(): 反转数组的顺序。

   let arr = [1, 2, 3];
   arr.reverse(); // arr 是 [3, 2, 1]
   

8. fill(): 用指定的值填充数组的指定部分。

   let arr = [1, 2, 3];
   arr.fill(0, 1, 3); // arr 是 [1, 0, 0]
   

不改变自身的方法

这些方法不会修改原数组，而是返回一个新数组或结果：

1. concat(): 合并两个或多个数组，返回一个新数组。

   let arr1 = [1, 2];
   let arr2 = [3, 4];
   let result = arr1.concat(arr2); // result 是 [1, 2, 3, 4]
   

2. slice(): 提取数组的一部分，并返回一个新数组。

   let arr = [1, 2, 3];
   let result = arr.slice(1, 2); // result 是 [2]
   

3. map(): 创建一个新数组，其结果是调用一个提供的函数对每个数组元素执行操作后的结果。

   let arr = [1, 2, 3];
   let result = arr.map(x => x * 2); // result 是 [2, 4, 6]
   

4. filter(): 创建一个新数组，其中包含所有通过测试的数组元素。

   let arr = [1, 2, 3];
   let result = arr.filter(x => x > 1); // result 是 [2, 3]
   

5. reduce(): 对数组中的每个元素执行一个提供的函数，返回单个值。

   let arr = [1, 2, 3];
   let result = arr.reduce((sum, x) => sum + x, 0); // result 是 6
   

6. find(): 返回数组中满足提供测试函数的第一个元素。

   let arr = [1, 2, 3];
   let result = arr.find(x => x > 1); // result 是 2
   

7. some(): 检查数组中是否至少有一个元素满足提供的测试函数。

   let arr = [1, 2, 3];
   let result = arr.some(x => x > 2); // result 是 true
   

8. every(): 检查数组中的所有元素是否都满足提供的测试函数。

   let arr = [1, 2, 3];
   let result = arr.every(x => x > 0); // result 是 true
   

9. includes(): 检查数组中是否包含指定的值。

   let arr = [1, 2, 3];
   let result = arr.includes(2); // result 是 true
   

10. join(): 将数组中的所有元素连接成一个字符串。

    let arr = [1, 2, 3];
    let result = arr.join('-'); // result 是 '1-2-3'