面试题系列均来自鱼皮的知识星球——编程导航

JS 中数组是如何在内存中存储的?

在 JavaScript 中,数组是一种特殊的对象,可以用于存储一组有序的数据。数组在内存中的存储方式与其他对象类似,都是存储在堆中。

JavaScript 中的数组是一种动态数组,可以自动扩展和收缩。当一个数组需要扩展时,JavaScript 引擎会为其分配更多的内存空间,同时将原有数据拷贝到新的内存空间中。当一个数组需要收缩时,JavaScript 引擎会将其内存空间释放掉。

在 JavaScript 中,数组的每个元素是通过其索引来访问的。索引是一个整数,用于指定数组中的一个元素。JavaScript 中的数组索引是以 0 开始的,也就是说,第一个元素的索引为 0,第二个元素的索引为 1,以此类推。

由于 JavaScript 中的数组是动态数组,所以它的索引可以随时改变。因此,当你访问一个数组时,需要确保你正在访问的索引是有效的,否则会导致数组越界的错误。

Vue 模板是如何编译的?经历了哪些过程?

Vue 模板在运行时会被编译成渲染函数,最终生成 Virtual DOM,进行页面渲染。

Vue 模板编译的过程主要分为以下三个步骤:

  1. 解析模板:Vue 会使用正则表达式解析模板字符串,解析出其中的指令、标签、属性等内容。
  2. 生成 AST(抽象语法树):将解析后的模板字符串转化为抽象语法树,抽象语法树是一个以 JavaScript 对象表示的树形结构,它将模板中的各个节点和属性用 JavaScript 对象的形式表示出来,方便后续对模板进行分析和处理。
  3. 生成渲染函数:将 AST 转化为渲染函数,渲染函数是一个纯 JavaScript 函数,用于将模板转化为 Virtual DOM。

在模板的编译过程中,还会涉及到动态指令、插槽、组件等特殊情况的处理,不同的编译器实现可能存在一些差异,但大体的编译流程是相似的。

通过模板的编译,我们可以将模板转化为可被 JavaScript 运行的函数,从而更高效地渲染页面,提高应用的性能。

JS 中 Map 和 WeakMap 有什么区别?

在 JavaScript 中,Map 和 WeakMap 都是键值对的集合,但它们有几个重要的区别:

  1. 键类型:Map 对象的键可以是任何类型,包括基本数据类型和对象类型,而 WeakMap 对象的键必须是对象类型。
  2. 垃圾回收:Map 对象中的键和值都会被常规垃圾回收机制回收,而 WeakMap 中的键是弱引用,即在对象被垃圾回收时,WeakMap 中对应的键值对也会被自动删除。这使得 WeakMap 通常用于缓存或元数据,当对象不再被使用时,WeakMap 可以自动清除对应的数据,避免内存泄漏。
  3. 迭代器:Map 对象有内置的迭代器,可以通过 for…of 循环来遍历键值对,而 WeakMap 没有内置的迭代器,因此不能直接遍历键值对。

综上所述,Map 和 WeakMap 在功能上有所重叠,但应用场景不同。Map 可以存储任何类型的键值对,适用于大部分情况;WeakMap 适用于需要自动清除的缓存和元数据场景。