公司面试题总结（三）

13.说说你对 BOM 的理解，常见的 BOM 对象你了解哪些？

BOM (Browser Object Model)，浏览器对象模型，

⚫ 提供了独立于内容与浏览器窗口进行交互的对象

⚫ 其作用就是跟浏览器做一些交互效果

⚫ 比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及

获取客户的一些信息如：浏览器品牌版本，屏幕分辨率

⚫ 浏览器的全部内容可以看成 DOM， 整个浏览器可以看成 BOM

⚫ window 对象：

        ◼ BOM 的顶层对象，代表整个浏览器窗口。

        ◼ 所有全局变量、函数以及 BOM 的其他对象都是 window 对象的属性。

        ◼ 提供了许多方法和属性 open(),alert(), prompt(), setTimeout(), location, navigator 等。

⚫ location 对象：

        ◼ 提供有关当前页面 URL 的信息，并且可以用来导航到新的 URL。

        ◼ 常用属性有 href(完整 URL), pathname(路径名), search(查询字符串)等，

        ◼ 方法有 assign(), reload(), replace()等。

⚫ navigator 对象：

        ◼ 提供了关于浏览器的信息，如名称、版本号和用户代理字符串等。

        ◼ 常用于检测浏览器类型和能力。

⚫ history 对象：

        ◼ 通过脚本访问浏览器的浏览历史。

        ◼ 对象只提供了前进(forward())、后退(back())和重载当前页面(go())等有限的方法，并

        不能读取具体的历史记录条目。

⚫ screen 对象：

        ◼ 提供了关于用户屏幕的信息，如宽度、高度、可用宽度、可用高度、色彩深度等。

⚫ localStorage/sessionStorage 对象：

◼ 这两者都是 Web Storage API 的一部分，用于在用户的浏览器上存储数据。

◼ localStorage 用于持久化存储，而 sessionStorage 的数据仅在当前会话期间有效。

⚫ document 对象：

        ◼ 代表当前页面的 HTML 文档。

        ◼ 虽然严格来说它属于 DOM（Document Object Model）的一部分，但因为可以直

        接通过 window.document 访问，所以也常被视为 BOM 的一部分。

        ◼ 它提供了操作文档内容、结构和样式的方法，如 getElementById(), querySelector(),

        createElement()等。

14.Javascript 本地存储的方式有哪些？区别及应用场景？

⚫ Cookie

◼ 小型文本文件，为了辨别用户身份而储存在用户本地终端上的数据

◼ 不超过 4KB 的小型文本数据

◼ 由 Name、Value 和几个控制 cookie 有效期、安全性、使用范围的可选属性组成

◼ 每次请求中都会被发送，不使用 HTTPS 对其加密，保存的信息很容易被窃取，导

致安全风险。

◼ 应用场景： 标记用户与跟踪用户行为的情况

⚫ sessionStorage

◼ 持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

◼ 存储的信息在同一域中是共享的

◼ 无法像 Cookie 一样设置过期时间

◼ 只能存入字符串，无法直接存对象

◼ 应用场景：适合长期保存在本地的数据（令牌）

⚫ localStorage

◼ 一旦页面（会话）关闭，sessionStorage 将会删除数据

◼ 应用场景： 敏感账号一次性登录

⚫ indexedDB

◼ 一种低级 API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。

◼ 该 API 使用索引来实现对该数据的高性能搜索

◼ 应用场景： 存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况

◼ 优点 ：

        ◆ 储存量理论上没有上限

        ◆ 所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量

        较大时

        ◆ 原生支持储存 JS 的对象

        ◆ 是个正经的数据库，意味着数据库能干的事它都能干

◼ 缺点 ：

        ◆ 操作非常繁琐

        ◆ 本身有一定门槛

◼ 关于 indexedDB 的使用基本使用步骤 如下：

◆ 打开数据库并且开始一个事务 ◆ 创建一个 object store

◆ 构建一个请求来执行一些数据库操作，像增加或提取数据等。

◆ 通过监听正确类型的 DOM 事件以等待操作完成。

◆ 在操作结果上进行一些操作（可以在 request 对象中找到）

◆ 关于使用 indexdb 的使用会比较繁琐，大家可以通过使用 Godb.js 库进行缓

存，最大化的降低操作难度

15.什么是防抖和节流？有什么区别？如何实现？

⚫ 防抖：

在事件触发后，等待一段时间后再执行处理函数。如果在等待时间内又发生了该

事件，就重新开始计时。简单来说，就是将多次连续触发的事件合并成一次执行。

◼ 应用场景：

◆ 用户输入搜索框时，可以使用防抖来减少实时搜索接口的请求次数。

◆ 窗口大小调整时，可以使用防抖来避免频繁调整布局。

◼ 实现方式：

◆ 使用 setTimeout 延迟执行函数。

◆ 每次触发事件时先清除之前设置的定时器，再重新设置新的定时器。

⚫ 节流：

节流是指在一定时间间隔内只触发一次事件。无论事件触发多频繁，在指定时间

间隔内，只会执行一次处理函数。

◼ 应用场景：

页面滚动、resize 等频繁触发的事件，可以使用节流来限制处理函数的

执行频率。

◼ 实现方式：

◆ 使用定时器控制事件的触发间隔。

◆ 在定时器执行时，更新标志位以防止重复触发事件。

◆ 在指定时间间隔后清除定时器，再次允许事件触发。

区别：

⚫ 防抖是等待一段时间后再执行，而节流是在时间间隔内只执行一次。

⚫ 防抖合并连续的触发事件，节流限制事件的触发频率。

防抖会延迟执行处理函数，节流会按照固定的时间间隔执行处理函数。

16.如何通过 JS 判断一个数组

⚫ 使用 Array.isArray()

◼ 这是 ES6 引入的一个原生方法，专门用来检测给定的对象是否为数组。

◼ let arr = [1, 2, 3];

◼ console.log(Array.isArray(arr)); // 输出: true

⚫ 使用 Object.prototype.toString.call():

◼ 这个方法会返回一个表示该对象的字符串，对于数组，它会返回 “[object Array]”。

◼ let arr = [1, 2, 3];

◼ console.log(Object.prototype.toString.call(arr) === '[object Array]'); // 输出: true

⚫ 使用 instanceof:

◼ 这个操作符检查构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

◼ let arr = [1, 2, 3];

◼ console.log(arr instanceof Array); // 输出: true

⚫ 通过 constructor 属性:

◼ 虽然这种方法可行，但是不推荐，因为 constructor 属性可以被轻易篡改。

◼ let arr = [1, 2, 3];

◼ console.log(arr.constructor === Array); // 输出: true

⚫ 通过原型链上的 isPrototypeOf() 方法:

◼ 这种方法相对较少使用，也是基于原型链的检查。

◼ let arr = [1, 2, 3];

◼ console.log(Array.prototype.isPrototypeOf(arr)); // 输出: true

创建一个数组

⚫ 使用 Array 构造函数

◼ let array1 = new Array(); // 创建一个空数组

◼ let array2 = new Array(3); // 创建一个长度为 3 的空数组

◼ let array3 = new Array("Apple", "Banana", "Cherry");

⚫ 使用字面量语法

◼ 最常见的创建数组，更简洁且推荐使用。

◼ let array4 = []; // 创建一个空数组

◼ let array5 = ["Apple", "Banana", "Cherry"]; // 创建包含三个初始元素的数组

⚫ 使用 Array.of()

◼ 将一组参数转换为数组

◼ let array6 = Array.of(1, 2, 3); // 创建包含三个元素的数组

◼ let array7 = Array.of(0); // 正确创建只有一个元素 0 的数组，与 new Array(0)不同

⚫ 通过扩展运算符(...)

◼ 复制或合并数组，快速创建数组。

◼ let array8 = [..."hello"]; // ["h", "e", "l", "l", "o"]

⚫ 通过 Array.from()

◼ 将类数组对象（拥有 length 属性和索引元素）或可迭代对象转换为真正的数组。

◼ let arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};

◼ let array9 = Array.from(arrayLike); // 创建数组 ["a", "b", "c"]

◼ let iterable = new Map([["a", 1], ["b", 2]]);

◼ let array10 = Array.from(iterable); // 创建数组 [["a", 1], ["b", 2]]

17.说说你对作用域链的理解

作用域 ，即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合

⚫ 一个包含一系列作用域的列表，这个列表定义了变量的可访问性。 ⚫ 每个函数在创建时都会生成自己的作用域链，这个链最初由全局作用域组成。

⚫ 当函数嵌套时，内部函数的作用域链会包含外部函数的作用域，以此类推，形成了一个

链条。

将作用域分成：

⚫ 全局作用域

◼ 任何不在函数中或是大括号中声明的变量

◼ 可以在程序的任意位置访问

⚫ 函数作用域

◼ 也叫局部作用域，如果一个变量是在函数内部声明的它就在一个函数作用域下面。

◼ 这些变量只能在函数内部访问，不能在函数以外去访问

⚫ 块级作用域

◼ ES6 引入了 let 和 const 关键字,和 var 关键字不同

◼ 在大括号中使用 let 和 const 声明的变量存在于块级作用域中。

◼ 在大括号之外不能访问这些变量

词法作用域 ，又叫 静态作用域 ，变量被创建时就确定好了，而非执行阶段确定的。也就是说

我们写好代码时它的作用域就确定了，JavaScript 遵循的就是词法作用域

作用域链

⚫ 当在 Javascript 中使用一个变量的时候

⚫ 首先 Javascript 引擎会尝试在当前作用域下去寻找该变量，

⚫ 如果没找到，再到它的上层作用域寻找，

⚫ 以此类推直到找到该变量或是已经到了全局作用域

⚫ 如果在全局作用域里仍然找不到该变量，它就会在全局范围内隐式声明该变量(非严格

模式下)或是直接报错

18.JavaScript 原型，原型链 ? 有什么特点？

原型：

⚫ 每个实例都会被分配到一个 prototype 属性，指向一个对象，此对象为函数的原型对象，

这个原型对象的所有属性和方法供函数所拥有。

⚫ 默认情况下创建函数时，函数的原型上都会添加 constructor，这个 constructor 指向当

前函数对象。

原型链：

⚫ 每个对象都有__proto__属性，由于原型本身也是一个对象，也有该属性，那么就可以利

用这一属性继续向上一级查找，这样就形成一条链式结构。

⚫ 最顶级的对象是 Object（window）,在往上就是 null。

原型链的查找机制：

⚫ 查找属性时，先在对象自身查找，如果对象本身没有，就去原型中查找

⚫ 如果还没有就继续向原型链的上一级查找，找到就输出。

⚫ 如果指导 object 层还没有，最终返回 undefined。

事件

用户和浏览器交互瞬间