2023.03.26 - 2023.03.28 更新前端面试问题总结（13道题）
获取更多面试问题可以访问
github 地址: github.com/pro-collect…
gitee 地址: gitee.com/yanleweb/in…

初级开发者相关问题【共计 1 道题】
- 205.全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？【JavaScript】【出题公司: 百度】
中级开发者相关问题【共计 5 道题】
- 202.浏览器和 Node 事件循环有区别吗？【JavaScript】【出题公司: 字节跳动】
- 208.使用迭代的方式实现 flatten 函数？【JavaScript】【出题公司: 百度】
- 211.下面代码中 a 在什么情况下会打印 1 ?【JavaScript】【出题公司: 京东】
- 212.[3, 15, 8, 29, 102, 22].sort(), 结果是多少，为什么？【JavaScript】【出题公司: 京东】
- 213.https 的证书验证过程是什么样的【网络】
高级开发者相关问题【共计 7 道题】
- 201.Redux 和 Vuex 的设计思想是什么？【JavaScript】【出题公司: 字节跳动】
- 203.前端模块化发展历程？【工程化】【出题公司: 腾讯】
- 204.AMD 和 CMD 模块化有和区别？【工程化】【出题公司: 腾讯】
- 206.浏览器缓存中 Memory Cache 和 Disk Cache，有啥区别？【网络】【出题公司: 字节跳动】
- 207.使用虚拟DOM 一定会比直接操作真实 DOM 快吗？【工程化】【出题公司: 百度】
- 209.[Redux] 为什么 Redux 的 reducer 中不能做异步操作？【web框架】【出题公司: 百度】
- 214.this指向与对象继承数组方法：输出以下代码执行的结果并解释为什么？【JavaScript】【出题公司: 京东】

初级开发者相关问题【共计 1 道题】

205.全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？【JavaScript】【出题公司: 百度】

用 const 或 let 声明的变量不会挂在在 window 对象上，而是在一个称为块级作用域（block scope）的作用域内。这个作用域可以是一个函数、一个代码块（比如 {} 之间的语句），或者全局作用域。

在块级作用域中声明的变量无法通过 window 对象访问，只能在当前作用域内访问。如果要在全局作用域中访问这个变量，需要显式地将它添加到 window 对象上。

以下是一个例子：

{
  const foo = 'bar';
  let baz = 'qux';
  var quux = 'corge';
}

console.log(window.foo); // undefined
console.log(window.baz); // undefined
console.log(window.quux); // 'corge'

在上面的例子中，foo 和 baz 声明在一个代码块内，因此它们不会挂在在 window 对象上。而 quux 声明使用了 var，因此它会被挂在在 window 对象上。

如果我们希望在全局作用域中访问 foo 和 baz，可以将它们手动添加到 window 对象上：

{
  const foo = 'bar';
  let baz = 'qux';
  var quux = 'corge';

  window.foo = foo;
  window.baz = baz;
}

console.log(window.foo); // 'bar'
console.log(window.baz); // 'qux'
console.log(window.quux); // 'corge'

但是，在实际编程中，最好尽量避免将变量挂在在 window 对象上，以避免命名冲突和污染全局命名空间。

中级开发者相关问题【共计 5 道题】

202.浏览器和 Node 事件循环有区别吗？【JavaScript】【出题公司: 字节跳动】

浏览器和Node.js事件循环在本质上是相同的，它们都是基于事件循环模型实现异步操作。但是它们的实现细节和环境限制有所不同。

在浏览器中，事件循环模型基于浏览器提供的EventTarget接口，包括浏览器环境下的DOM、XMLHttpRequest、WebSocket、Web Worker等等，所有的异步任务都会被推入任务队列，等待事件循环系统去处理。

而在Node.js中，事件循环模型则基于Node提供的EventEmitter接口，所有的异步任务都会被推入libuv的事件队列中，等待事件循环系统去处理。同时，Node.js还有一个特点是支持I/O操作，也就是在I/O完成之前，会把任务挂起，不会把任务加入到事件队列中，以避免事件队列阻塞。

另外，浏览器中的事件循环系统是单线程的，即所有的任务都在同一个线程中运行，因此需要注意不能有耗时的操作。而Node.js则是多线程的，它可以利用异步I/O等机制来充分利用多核CPU的能力，提高并发处理能力。

208.使用迭代的方式实现 flatten 函数？【JavaScript】【出题公司: 百度】

可以使用迭代的方式实现 flatten 函数，具体思路如下：

创建一个新数组 result 来存放结果。
创建一个栈 stack，将原数组作为第一个元素压入栈中。
当栈不为空时，取出栈顶元素，如果该元素是一个数组，则将其展开后的每个元素压入栈中。
如果该元素不是一个数组，则将其加入到 result 中。
重复步骤 3 和 4，直到栈为空。

下面是代码实现：

function flatten(array) {
  const result = [];
  const stack = [array];

  while (stack.length > 0) {
    const item = stack.pop();

    if (Array.isArray(item)) {
      for (let i = item.length - 1; i >= 0; i--) {
        stack.push(item[i]);
      }
    } else {
      result.push(item);
    }
  }

  return result.reverse();
}

这里使用了一个技巧，就是在将数组元素压入栈中时，从数组的末尾开始遍历，这样就可以保证压入栈中的顺序和展开后的顺序是一致的，最后再将结果翻转一下即可。

211.下面代码中 a 在什么情况下会打印 1 ?【JavaScript】【出题公司: 京东】

问题

var a = ?;
if(a == 1 && a == 2 && a == 3){
 	console.log(1);
}

回答

这是一个经典的面试题，可以通过重写 valueOf 或者 toString 方法来实现，在这些方法中动态返回变量 a 的值，以满足条件。例如：

var a = {
  i: 1,
  toString: function() {
    return this.i++;
  }
}
if(a == 1 && a == 2 && a == 3){
  console.log(1);
}

在这个例子中，a 被定义为一个对象，有一个属性 i 初始化为 1，同时重写了 toString 方法，在每次调用时返回 i 的值，并且每次返回后将 i 自增。这样在比较 a 是否等于 1、2、3 的时候，会依次调用 a.toString() 方法，得到的结果就是满足条件的 1，依次打印出来。

212.[3, 15, 8, 29, 102, 22].sort(), 结果是多少，为什么？【JavaScript】【出题公司: 京东】

输出结果为：

[102, 15, 22, 29, 3, 8]

原因： Array.prototype.sort()

如果没有指明 compareFn ，那么元素会按照转换为的字符串的诸个字符的 Unicode 位点进行排序。例如 "Banana" 会被排列到 "cherry" 之前。当数字按由小到大排序时，9 出现在 80 之前，但因为（没有指明 compareFn），比较的数字会先被转换为字符串，所以在 Unicode 顺序上 "80" 要比 "9" 要靠前。

如果指明了 compareFn ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

如果 compareFn(a, b) 大于 0，b 会被排列到 a 之前。如果 compareFn(a, b) 小于 0，那么 a 会被排列到 b 之前；如果 compareFn(a, b) 等于 0，a 和 b 的相对位置不变。备注：ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；

参考文档：developer.mozilla.org/zh-CN/docs/…

213.https 的证书验证过程是什么样的【网络】

HTTPS的证书验证过程通常包括以下几个步骤：

客户端向服务端发起HTTPS请求，服务端将其公钥证书发送给客户端。
客户端接收到服务端的证书后，首先验证证书是否过期，如果过期，则证书无效，验证失败；如果证书未过期，则进行下一步。
客户端使用CA证书（如系统内置的或者从服务端获取）对服务端证书进行验证，以确定该证书是否是由受信任的CA颁发的。如果验证失败，则证书无效，验证失败；如果验证成功，则进行下一步。
客户端生成一个随机值，使用服务端公钥进行加密，并将加密后的随机值发送给服务端。
服务端接收到客户端的随机值后，使用私钥进行解密，得到随机值。服务端再将随机值作为密钥，使用对称加密算法加密需要传输的数据，并发送给客户端。
客户端接收到服务端发送的加密数据后，使用随机值进行解密，得到明文数据。

以上就是HTTPS证书验证的一般流程。客户端验证服务端证书的方式是通过验证证书的数字签名来确定证书的合法性，如果数字签名验证失败，则证书无效，验证失败。

高级开发者相关问题【共计 7 道题】

201.Redux 和 Vuex 的设计思想是什么？【JavaScript】【出题公司: 字节跳动】

Redux和Vuex都是用于在前端应用中管理状态的JavaScript库。它们的设计思想都基于Flux架构，强调单向数据流的概念，以避免数据的混乱和不可预测的状态变化。

Redux的设计思想可以总结为三个原则：

单一数据源：Redux中所有的状态数据都保存在单一的store对象中，便于管理和维护。
状态只读：Redux的状态数据是只读的，唯一的改变方式是通过dispatch一个action来触发reducer函数对状态进行更新。
纯函数更新状态：Redux的reducer函数必须是纯函数，即接收一个旧的状态和一个action对象，返回一个新的状态。通过这种方式，Redux保证了状态的可控和可预测性。

Vuex的设计思想类似于Redux，但又有所不同：

单一数据源：Vuex也采用了单一数据源的思想，将所有状态保存在store对象中。
显示状态修改：和Redux不同的是，Vuex允许组件直接修改状态，但这必须是通过commit一个mutation来实现的，mutation也必须是同步的。
模块化：Vuex提供了模块化机制，可以将store对象分解成多个模块，以提高可维护性和代码复用性。

Redux和Vuex都是通过一些基本概念来实现状态管理：

Store：保存状态的对象，整个应用只有一个Store。
Action：描述状态变化的对象，由View层发起。
Reducer：一个纯函数，接收旧的状态和一个Action对象，返回新的状态。
Dispatch：一个函数，用来触发Action。
Mutation：类似于Redux的Reducer，但必须是同步的。用来更新状态。

总之，Redux和Vuex都是优秀的状态管理库，通过它们可以有效地管理前端应用的状态，实现数据的单向流动和可预测性。同时，Redux和Vuex都遵循了Flux架构的设计思想，使得状态管理更加规范化和可控。

203.前端模块化发展历程？【工程化】【出题公司: 腾讯】

前端模块化是指在前端开发中，通过模块化的方式组织代码，将代码按照一定规则分割成不同的模块，便于管理和维护。

前端模块化的发展历程如下：

早期，前端开发采用的是全局变量的方式进行开发，即将所有代码都放在一个文件中，通过全局变量进行交互。这种方式的问题在于，代码量较大，代码耦合度高，不易维护。
后来，前端开发采用了命名空间的方式进行组织代码，即将代码放在一个命名空间下，通过命名空间进行交互。这种方式解决了全局变量带来的问题，但是在开发大型应用时，仍然存在代码耦合度高、依赖管理不便等问题。
2009年，CommonJS提出了一种新的模块化规范，即将每个模块封装在一个独立的文件中，通过require和exports进行模块之间的依赖管理和导出。这种方式解决了前两种方式带来的问题，但是由于该规范是同步加载模块，不适用于浏览器环境。
2011年，AMD规范提出，即异步模块定义规范，采用异步的方式加载模块，可以在浏览器环境下使用。该规范主要是通过require和define方法进行模块之间的依赖管理和导出。
2013年，CommonJS和AMD的创始人合并了两种规范，提出了新的规范——CommonJS 2.0规范。该规范在CommonJS 1.0的基础上，增加了异步加载的功能，使其可以在浏览器环境下使用。
2014年，ES6（即ECMAScript 2015）正式发布，引入了模块化的支持，即通过import和export语句进行模块之间的依赖管理和导出。ES6的模块化规范具有更好的可读性、可维护性和性能优势，已成为前端开发的主流方式。
同时，还有一些第三方库，如RequireJS、SeaJS等，提供了更加灵活和可扩展的模块化方式，使得前端开发的模块化更加便捷和高效。

204.AMD 和 CMD 模块化有和区别？【工程化】【出题公司: 腾讯】

AMD（Asynchronous Module Definition）和CMD（Common Module Definition）都是JavaScript模块化方案。它们的主要区别在于对依赖的处理方式上不同。

AMD是在require.js推广过程中诞生的，它的特点是提前执行，强调依赖前置。也就是说，在定义模块时就需要声明其所有依赖的模块。它的语法如下：

define(['dependency1', 'dependency2'], function(dependency1, dependency2) {
  // 模块的定义
});

CMD是在Sea.js推广过程中诞生的，它和AMD非常相似，但是更加懒惰，是依赖就近，延迟执行。也就是说，在模块中需要用到依赖时，才去引入依赖。它的语法如下：

define(function(require, exports, module) {
  var dependency1 = require('dependency1');
  var dependency2 = require('dependency2');
  // 模块的定义
});

简单来说，AMD是提前执行、依赖前置，CMD是延迟执行、依赖就近。两种模块化方案各有优缺点，选择哪种模块化方案需要根据实际情况和个人偏好进行考虑。

206.浏览器缓存中 Memory Cache 和 Disk Cache，有啥区别？【网络】【出题公司: 字节跳动】

Memory Cache 和 Disk Cache 的区别

在浏览器缓存中，Memory Cache 和 Disk Cache 是两种不同的缓存类型，它们有以下区别：

存储位置：Memory Cache 存储在内存中，而 Disk Cache 存储在硬盘中。
读取速度：Memory Cache 读取速度比 Disk Cache 快，因为内存访问速度比硬盘访问速度快。
存储容量：Memory Cache 存储容量比较小，一般只有几十兆，而 Disk Cache 存储容量比较大，可以有数百兆或者更多。
生命周期：Memory Cache 生命周期短暂，一般只在当前会话中有效，当会话结束或者浏览器关闭时，Memory Cache 就会被清空；而 Disk Cache 生命周期比较长，数据可以被保存很长时间，即使浏览器关闭了，下次打开还可以使用。

一般来说，浏览器在请求资源时，会优先从 Memory Cache 中读取，如果没有找到再去 Disk Cache 中查找。如果两种缓存中都没有找到，则会向服务器发送请求。如果需要强制刷新缓存，可以通过清空浏览器缓存来实现。

什么情况下资源会缓存在 Memory Cache，什么情况下会缓存在 Disk Cache ?

浏览器中的缓存是为了提高网页访问速度和减少网络流量而存在的。缓存分为 Memory Cache 和 Disk Cache 两种。

Memory Cache 是浏览器内存缓存，资源会被缓存在内存中，由于内存读取速度快，所以 Memory Cache 的读取速度也较快。资源被缓存在 Memory Cache 中的情况有：

当前页面中通过或者
当前页面通过 XMLHttpRequest 或 Fetch API 请求获取到的资源。

Disk Cache 是浏览器磁盘缓存，资源会被缓存在磁盘中。由于磁盘读取速度相对内存较慢，所以 Disk Cache 的读取速度也较慢。资源被缓存在 Disk Cache 中的情况有：

当前页面中通过 <img> 标签引入的资源；
当前页面中通过 <audio> 或 <video> 标签引入的资源；
当前页面中通过 iframe 加载的资源；
当前页面中通过 WebSocket 加载的资源；
通过 Service Worker 缓存的资源。

一般来说，比较大的资源会被缓存到 Disk Cache 中，而较小的资源则会被缓存到 Memory Cache 中。如果需要手动清除缓存，可以在浏览器设置中找到相应选项进行操作。

207.使用虚拟DOM 一定会比直接操作真实 DOM 快吗？【工程化】【出题公司: 百度】

大家惯有的思维模式下，我们普遍的认为，虚拟DOM一定会比原生DOM要快的多。

但实际上并不是这样。

仅从React的角度来说 : React的官网可从来都没有说过虚拟DOM会比原生操作DOM更快。

虚拟DOM和原生操作DOM谁更快这个问题。如果要我来回答的话，一定是原生DOM比虚拟DOM更快性能更好。

值得注意的是，虚拟DOM并不是比原生DOM快，更确切的来说，虚拟DOM是比操作不当的原生DOM快。实际上，如果对原生DOM的操作得当的话，原生DOM的性能一定优于虚拟DOM。

我们来剖析一下。

虚拟DOM为什么而存在

其最核心的思想是提升开发效率而非提升性能

使用 React/Vue 这些框架的时候，我们不需要去考虑对DOM的操作，只需要关心数据的改变。我们以前还在使用JQ的时候，数据改变之后我们需要调用$("#id").append(node)等操作去手动追加DOM。而在使用React/Vue之后，我们只需要关心数据的改变。至于对DOM的一系列动作，在我们的数据改变之后，React/Vue会为我们代劳。这极大程度的提升了我们的开发效率。也是React/Vue的核心思想和初衷。

至于很多人都说，虚拟DOM会比操作原生DOM更快，这个说法并不全面。比如，首次渲染或者所有节点都需要进行更新的时候。这个时候采用虚拟DOM会比直接操作原生DOM多一重构建虚拟DOM树的操作。这会更大的占用内存和延长渲染时间。

举个例子

首次渲染👇不采用虚拟DOM的步骤

浏览器接受绘制指令
创建所有节点

首次渲染👇采用虚拟DOM的步骤

浏览器接受绘制指令
创建虚拟DOM
创建所有节点

不难发现，在首次渲染的时候，采用虚拟DOM会比不采用虚拟DOM要多一个创建虚拟DOM的步骤。

注意:虚拟DOM的存在，并不是免费的，比对新旧虚拟DOM树的差异会带来一定的性能开销。

虚拟DOM的优势在于我们更新节点时候。它会检查哪些节点需要更新。尽量复用已有DOM，减少DOM的删除和重新创建。并且这些操作我们是可以通过自己手动操作javascript底层api实现的。只是我们手动操作会非常耗费我们的时间和精力。这个工作由虚拟DOM代劳，会让我们开发更快速便捷。

举个例子👇

在采用虚拟DOM的前提下

假设我们有节点A，下辖两个子节点B/C.

然后我们删除了节点C

这个时候会有两棵虚拟DOM树，

一颗是修改前的，A->B/C。

另一颗是修改后的A->B。

diff算法会去比对两颗树的差异，然后发现A->B没有更改，那么A->B节点保留，C节点执行删除动作。

那么，A->B两个节点的删除和创建渲染操作就被省略了。

如果不采用虚拟DOM的话。使用JQ那时候的模板.

我们可能会把A->B/C三个节点全部删除.

再全都重新创建。而A->B是完全没有改动的。

他们的删除和创建则完全不必要。

框架的意义

我们需要知道:不论是React还是Vue或者是Angular。这些框架本身，都是基于原生的基础上创造的。它们，底层依赖的还是javascript，并不是一门新的语言。在他们的底层逻辑下。我们使用框架所做出的一切行为，都会被框架转化为对原生DOM的操作。框架，只是一个转化语法的工具。

既然原生DOM可以创造出这些框架。当然我们使用原生DOM自然是可以写出比这些框架更好的性能。

但是:为什么对原生DOM进行操作的性能明明可以比使用框架更好。为什么大家都在使用框架，而没有人去直接对原生DOM进行操作。

这背后涉及成本和普适性。

如果我们直接去操作真实DOM,当然，我们可以做到在性能上比虚拟DOM更快。但问题是，技术水准能做到这个地步的人，又有多少人呢。不说比虚拟DOM快。即使是做到和虚拟DOM不分上下的性能，拥有这种水平的前端玩家，也是寥寥无几。基于这样的客观情况下，框架的出现解决了这个问题。

框架存在的意义 : 在为我们提供只需要关注数据的前提下。框架本身已经做好了底层原理上的性能优化（包括但不限于,对DOM的调用,算法上的优化）已经是高度封装。这样就可以让我们使用一些简单的较为容易理解的技术去做我们原本做不到的事情。这其实就像调用网上的第三方包，某一个功能，自己写是写不出来，写出来性能也不会很好。但是同样的功能，我们去网上引入其他大神已经封装完成的第三方包。我们就会用，功能就可以实现并且性能上也过得去。

如果让大家直接对DOM进行操作完成比框架更优秀的性能。这绝不是大多数人可以做到的。让大多数可以接受，框架需要做的，就是让大多数人使用尽量使用简单的技术，完成相对困难的操作。这是普适性。

并且，如果完成同一个性能效果，需要我们去精通原生javascript和学习框架上的一些简单的API和结构。明显后者的学习成本更低。如果说使用框架我们所能完成的某一阶段的性能所需要的学习成本是2个月的话。那么学习javascript完成同一阶段的性能可能需要一年。

框架的初衷就是让用户使用尽量简单的技术，完成相对复杂的工作并提升一定的性能 （这其中包括但不限于:可维护性，可复用性，渲染效率等） 。这样，即使我们的水平不是很高，使用框架以后。项目在性能上也能过得去。

总结

虚拟DOM不一定会比操作原生DOM更快。
虚拟DOM的优势在于节点进行改动的时候尽量减少开销
React从来没说过虚拟DOM会比原生更快。
框架的本质是提升开发效率，让我们的注意力更集中于数据

209.[Redux] 为什么 Redux 的 reducer 中不能做异步操作？【web框架】【出题公司: 百度】

Redux 的 reducer 是纯函数，它的作用是接收一个旧的状态和一个操作，返回一个新的状态，是一个纯粹的状态转换函数，因此在 reducer 中不能执行异步操作，否则会破坏 reducer 的纯函数特性。如果在 reducer 中执行异步操作，会导致 reducer 不可预测和不可重现，因为异步操作的结果是不确定的，而 reducer 必须保证在相同的输入条件下，产生相同的输出结果。同时，在 reducer 中执行异步操作可能会导致应用的状态不一致或者有延迟的问题。

为了解决这个问题，Redux 提供了中间件的机制，比如 redux-thunk、redux-saga 等，可以在中间件中进行异步操作，然后再将异步操作的结果传递给 reducer 进行状态更新。这样就可以避免在 reducer 中执行异步操作，保证 reducer 的纯函数特性，同时也可以完成异步操作的需求。

214.this指向与对象继承数组方法：输出以下代码执行的结果并解释为什么？【JavaScript】【出题公司: 京东】

代码如下

var obj = {
    '2': 3,
    '3': 4,
    'length': 2,
    'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1);
obj.push(2);
console.log(obj);

执行结果如何，为什么？

执行结果

代码的执行结果是：

perlCopy code{ '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }

在代码中，我们创建了一个名为 obj 的对象，它包含了一些属性和方法：

2 和 3 是对象的属性名，对应的属性值分别为 3 和 4。
length 属性的值为 2。
splice 和 push 是对象的两个方法，它们均继承自 Array.prototype。

接下来，我们先调用了 obj.push(1) 方法，将值 1 加入到了 obj 对象中，此时 obj 对象的状态如下所示：

perlCopy code{ '2': 1, '3': 4, length: 3, splice: [Function: splice], push: [Function: push] }

接着，我们又调用了 obj.push(2) 方法，将值 2 加入到了 obj 对象中，此时 obj 对象的状态如下所示：

perlCopy code{ '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }

可以看出，obj 对象的属性值发生了变化。这是因为在调用 obj.push(1) 方法时，由于 obj 对象继承了 Array.prototype.push 方法，因此 push 方法中的 this 指向的是 obj 对象本身，因此将值 1 加入到了 obj 对象的第二个属性位置上（即 obj[2] = 1）。而在调用 obj.push(2) 方法时，push 方法同样将值 2 加入到了 obj 对象的第三个属性位置上（即 obj[3] = 2）。因此最终得到的 obj 对象的状态为 { '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }。

追问：上面的代码中 obj.push(1)，为什么会加入到第二个属性位置上？

在 JavaScript 中，数组是一种特殊的对象，其属性名是非负整数，称之为索引(index)，因此可以通过数组语法来访问这些属性。另外，对于非数组对象，其属性名可以是任意字符串。

在给数组对象添加属性时，如果属性名是非负整数，那么会被当作数组元素，会自动维护 length 属性；如果属性名是其他字符串，那么则被当作普通的对象属性。

根据这个规则，上述代码中的 obj 对象添加了两个属性 2: 3 和 3: 4，它们的属性名都是非负整数，因此被当作数组元素，被计入了 length 属性。而在执行 obj.push(1) 时，会向数组中添加一个新的元素，该元素的下标是数组的 length 属性值，也就是 2，因此添加到了第二个属性位置上。接着执行 obj.push(2) 时，同样会向数组中添加一个新的元素，该元素的下标是 3，也就是数组的第三个属性位置上。

最终，输出结果为：

perlCopy code{ '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }

其中，属性 2 和 3 被分别赋值为 1 和 2，而原来的值被覆盖了。因此，最终的结果是 { '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }。

2023.03.26 - 2023.03.28 更新前端面试问题总结（13道题）