每日面试题系列--------02

原创已于 2023-07-12 11:36:18 修改 · 174 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2023-07-10 21:49:10 首次发布

本文介绍了DOM的基本操作，如获取元素、内容操作和事件处理，以及BOM的概念，包括窗口控制、导航和用户交互。还讨论了JavaScript的本地存储方式，如Cookies、WebStorage和IndexedDB，以及防抖和节流的概念和实现。最后，解释了作用域链的工作原理，它是如何影响变量查找的。

1. DOM常见的操作有哪些

获取元素：
- 通过标签名获取元素：document.getElementsByTagName('tagname')
- 通过类名获取元素：document.getElementsByClassName('classname')
- 通过 ID 获取元素：document.getElementById('id')
- 通过选择器获取元素：document.querySelector('selector') 或 document.querySelectorAll('selector')
操作元素内容和属性：
- 获取或设置元素的文本内容：element.textContent 或 element.innerText
- 获取或设置元素的 HTML 内容：element.innerHTML
- 获取或设置元素的属性值：element.getAttribute('attribute') 和 element.setAttribute('attribute', 'value')
修改样式：
- 获取或设置元素的 CSS 样式属性：element.style.property = 'value'
创建、插入和删除元素：
- 创建新元素：document.createElement('tagname')
- 插入元素到指定位置：parentElement.appendChild(newElement) 或 parentElement.insertBefore(newElement, referenceElement)
- 删除元素：parentElement.removeChild(element)
添加和移除事件监听器：
- 添加事件监听器：element.addEventListener('event', handler)
- 移除事件监听器：element.removeEventListener('event', handler)
遍历和查找节点：
- 遍历子节点：parentNode.childNodes 或 parentNode.children
- 查找特定节点：parentNode.querySelector('selector') 或 parentNode.querySelectorAll('selector')

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

BOM（Browser Object Model）是指浏览器对象模型，它提供了一组用于操作浏览器窗口、文档和其他组件的对象和方法。BOM 对象主要用于控制和操作浏览器窗口、导航、历史记录、定时器等功能。

BOM 对象的原理可以概括为以下几点：

全局对象：BOM 对象是在浏览器中作为全局对象存在的，例如在 JavaScript 中访问 window 对象即可获取到 BOM 的根对象。通过这个全局对象，可以访问各种 BOM 中定义的属性和方法。
层次结构：BOM 对象的结构是以树形结构组织的，其中最重要的是 window 对象作为根对象。从 window 对象衍生出了很多子对象，如 document、location、navigator、history 等，它们可以通过 window 对象来访问和操作。
提供了丰富的属性和方法：BOM 对象提供了各种属性和方法，用于控制和操作浏览器窗口、处理用户交互、导航到不同页面、操作历史记录、发送网络请求等。例如，通过 window 对象的方法可以打开新窗口、弹出对话框、设置定时器、处理事件等。
DOM 的一部分：BOM 对象与 DOM（Document Object Model，文档对象模型）相互关联，但又是 DOM 的一部分。BOM 对象提供了访问和操作网页的接口，而 DOM 对象则负责表示和操纵网页的内容。

总的来说，BOM 对象通过全局对象的方式在浏览器中实现，通过层次结构组织了一系列对象，提供了丰富的属性和方法用于控制、操作和交互浏览器窗口和文档。BOM 与 DOM 相互配合，共同构成了浏览器中 JavaScript 的编程环境，使开发人员能够对浏览器进行自定义操作和交互。

具体操作

控制窗口大小和位置：
- window.resizeTo(width, height): 将浏览器窗口调整为指定的宽度和高度。
- window.moveTo(x, y): 将浏览器窗口移动到指定的坐标位置。
操作浏览器的导航：
- window.location.href = url: 加载指定 URL 的网页。
- window.location.reload(): 重新加载当前页面。
- window.history.back(): 后退到上一个访问的页面。
- window.history.forward(): 前进到下一个访问的页面。
弹出对话框和确认框：
- window.alert(message): 弹出一个带有消息和确定按钮的对话框。
- window.confirm(message): 弹出一个带有消息、确定和取消按钮的确认框。
定时器：
- window.setTimeout(function, milliseconds): 在指定的毫秒数后执行函数。
- window.setInterval(function, milliseconds): 创建一个定时器，每隔指定的毫秒数执行函数。
操作浏览器的状态栏、工具栏等界面元素：
- window.status = text: 在状态栏中显示指定的文本。
- window.open(url, name, features): 打开一个新的浏览器窗口或标签页，可以指定 URL、窗口名称和窗口特性。
获取浏览器信息：
- window.navigator.userAgent: 获取浏览器的用户代理字符串，包含浏览器版本等信息。

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

Cookies:
- 区别：Cookies 是最古老的本地存储方式，用于在客户端存储少量的文本数据。它们以键值对的形式存储在浏览器中，并随着每个 HTTP 请求发送到服务器。
- 应用场景：适合存储小段文本数据，如用户偏好设置、会话信息等。
Web Storage (localStorage 和 sessionStorage):
- 区别：Web Storage 提供了更大的存储容量（至少 5MB）且存储在客户端中，不会随每个请求发送到服务器。localStorage 的数据没有过期时间，而 sessionStorage 的数据会话结束时自动清除。
- 应用场景：适合存储较大量的数据，如高分/游戏进度、用户登录令牌、本地缓存的数据等。
IndexedDB:
- 区别：IndexedDB 是一个功能强大的客户端数据库，类似于关系型数据库。它能够存储大量结构化数据，并提供事务支持和索引搜索等功能。
- 应用场景：适合需要存储大量、复杂结构化数据的应用，例如离线应用、数据缓存等。
Web SQL Database (已被废弃)：
- 区别：Web SQL Database 允许使用 SQL 查询语言来处理客户端数据，类似于传统数据库。它的支持已被停止，并不推荐在新项目中使用。
- 应用场景：不推荐使用。

选择合适的本地存储方式取决于你的具体需求：

如果只需要存储少量文本数据并与服务器通信，可以考虑使用 Cookies。
如果需要在客户端存储较大量的数据，如用户配置或登录状态，可以使用 Web Storage。
对于更复杂的结构化数据或需要高级查询功能的应用，可以使用 IndexedDB。

注意，在使用任何本地存储方式时，要考虑安全性和隐私保护，并根据具体情况选择合适的存储方式。

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

防抖：

当事件触发后，延迟一定时间再执行回调函数。如果在延迟时间内再次触发该事件，则重新计时。可以避免频繁触发事件导致的资源消耗或重复操作。常用于处理输入框输入、窗口大小调整等场景。

节流：

固定时间间隔内只执行一次回调函数。如果在时间间隔内再次触发该事件，则忽略该次触发。可以控制函数的执行频率，减少不必要的计算和操作。常用于处理滚动事件、鼠标移动事件等场景。

区别：

防抖：只有等触发事件后一定时间内没有再次触发才执行回调函数，适合处理连续触发的事件。节流：固定时间间隔内只执行一次回调函数，适合限制函数的执行频率。

防抖的实现：

function debounce(func, delay) {

     let timer;

     return function(...args) {

          clearTimeout(timer);

          timer = setTimeout(() => {

           	func.apply(this, args);

          }, delay);

     };

}

节流的实现（基于时间戳）：

function throttle(func, interval) {

     let lastTime = 0;

     return function(...args) {

          const now = Date.now();

          if (now - lastTime >= interval) {

               func.apply(this, args);

               lastTime = now;

          }

     };

}

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

instanceof data instanceof Array

constructor data.constructor == Array

Array.isArray() Array.isArray(data) 最推荐

typeof typeof(data)

Object.prototype.toSrtring.call()