14万字 | 400多道JavaScript 面试题及详细答案04(建议收藏)

简介: 14万字 | 400多道JavaScript 面试题及详细答案(建议收藏)

42.localStorage 和 sessionStorage 的主要区别是什么?


LocalStorage 与 SessionStorage 相同,但即使浏览器关闭并重新打开(即它没有过期时间),它也会保留数据,而在 sessionStorage 中,当页面会话结束时,数据会被清除。



43.你如何访问web 存储?


Window 对象实现了WindowLocalStorage和WindowSessionStorage对象,它们分别具有localStorage(window.localStorage) 和sessionStorage(window.sessionStorage) 属性。这些属性创建 Storage 对象的实例,通过该实例可以为特定域和存储类型(会话或本地)设置、检索和删除数据项。

例如,您可以读写本地存储对象,如下所示


localStorage.setItem('logo', document.getElementById('logo').value);

localStorage.getItem('logo');


44.会话存储有哪些可用的方法?


会话存储提供了读取、写入和清除会话数据的方法


// 将数据保存到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取保存的数据
let data = sessionStorage.getItem('key');
// 从 sessionStorage 中删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 中删除所有保存的数据
sessionStorage.clear();



45.什么是存储事件及其事件处理程序?


StorageEvent 是在另一个文档的上下文中更改存储区域时触发的事件。而 onstorage 属性是一个用于处理存储事件的 EventHandler。

语法如下


window.onstorage = functionRef;


让我们以记录存储键及其值的 onstorage 事件处理程序的示例用法为例


window.onstorage = function(e) {

 console.log('The ' + e.key +

   ' key has been changed from ' + e.oldValue +

   ' to ' + e.newValue + '.');

};



46.为什么需要web 存储?


Web存储更安全,可以在本地存储大量数据,不影响网站性能。此外,信息永远不会传输到服务器。因此,这是比 Cookie 更推荐的方法。




47.你如何检查 Web 存储浏览器支持?


在使用网络存储之前,您需要检查浏览器对 localStorage 和 sessionStorage 的支持,


if (typeof(Storage) !== "undefined") {

 // localStorage/sessionStorage 的代码。

} else {

 // 对不起! 没有网络存储支持..

}


48.你如何检查web workers浏览器支持?


在使用之前,您需要检查浏览器对 Web Worker 的支持


if (typeof(Worker) !== "undefined") {

 // Web worker支持的代码。

} else {

 // 对不起! 没有 Web Worker 支持.

}



49.举个 web worker 的例子


您需要按照以下步骤开始使用网络工作者进行计数示例


创建 Web Worker 文件:您需要编写一个脚本来增加计数值。我们将其命名为 counter.js


let i = 0;
function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();
这里使用 postMessage() 方法将消息回传到 HTML 页面
创建 Web Worker 对象:您可以通过检查浏览器支持来创建 Web Worker 对象。让我们将此文件命名为 web_worker_example.js
if (typeof(w) == "undefined") {
  w = new Worker("counter.js");
}
我们可以接收来自网络工作者的消息
w.onmessage = function(event){
  document.getElementById("message").innerHTML = event.data;
};


终止 Web Worker:Web Worker 将继续侦听消息(即使在外部脚本完成后),直到它被终止。您可以使用 terminate() 方法终止对消息的侦听。


w.terminate();

1

重用 Web Worker:如果将 worker 变量设置为 undefined,则可以重用代码


w = undefined;



50.web worker 对 DOM 的限制是什么?


WebWorker 无权访问以下 javascript 对象,因为它们是在外部文件中定义的


窗口对象

文档对象

父对象



51.什么是promise?


promise是一个对象,它可能会在未来的某个时间产生一个单一的值,其中有一个已解决的值或一个未解决的原因(例如,网络错误)。它将处于 3 种可能状态之一:已完成、已拒绝或未决。


Promise 创建的语法如下所示,


const promise = new Promise(function(resolve, reject) {
      // promise description
    })
承诺的用法如下,
const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("I'm a Promise!");
  }, 5000);
}, reject => {
});
promise.then(value => console.log(value));


52.为什么需要promise?


Promise 用于处理异步操作。它们通过减少回调地狱和编写更干净的代码为回调提供了一种替代方法。



53.promise的三种状态是什么?


Promise 具有三种状态:


Pending:这是操作开始前 Promise 的初始状态

已完成:此状态表示指定的操作已完成。

Rejected:此状态表示操作未完成。在这种情况下,将抛出错误值。


54.什么是回调函数?


回调函数是作为参数传递给另一个函数的函数。这个函数在外部函数内部调用以完成一个动作。


我们举一个简单的例子来说明如何使用回调函数


function callbackFunction(name) {

 console.log('Hello ' + name);

}


function outerFunction(callback) {

 let name = prompt('Please enter your name.');

 callback(name);

}


outerFunction(callbackFunction);



55.为什么我们需要回调?


回调是必需的,因为 javascript 是一种事件驱动的语言。这意味着 javascript 将在侦听其他事件的同时继续执行,而不是等待响应。

让我们举一个例子,第一个函数调用 API 调用(由 setTimeout 模拟)和下一个函数记录消息。


function firstFunction(){
  // 模拟代码延迟
  setTimeout( function(){
    console.log('First function called');
  }, 1000 );
}
function secondFunction(){
  console.log('Second function called');
}
firstFunction();
secondFunction();
Output
// Second function called
// First function called


从输出中可以看出,javascript 没有等待第一个函数的响应,并且执行了剩余的代码块。因此,回调用于确保某些代码在其他代码完成执行之前不会执行。




56.什么是回调地狱?


回调地狱是一种具有多个嵌套回调的反模式,这使得在处理异步逻辑时代码难以阅读和调试。回调地狱看起来像下面,


async1(function(){

   async2(function(){

       async3(function(){

           async4(function(){

               ....

           });

       });

   });

});



57.什么是服务器发送事件?


服务器发送事件 (SSE) 是一种服务器推送技术,使浏览器能够通过 HTTP 连接从服务器接收自动更新,而无需求助于轮询。这些是一种单向通信通道 - 事件仅从服务器流向客户端。这已用于CSDN博客更新、股票价格更新、新闻提要等。



58.你如何接收服务器发送的事件通知?


EventSource 对象用于接收服务器发送的事件通知。例如,您可以从服务器接收消息,如下所示,


if(typeof(EventSource) !== "undefined") {

 var source = new EventSource("sse_generator.js");

 source.onmessage = function(event) {

   document.getElementById("output").innerHTML += event.data + "<br>";

 };

}



59.你如何检查浏览器对服务器发送事件的支持?


您可以在使用之前对服务器发送的事件执行浏览器支持,如下所示,


if(typeof(EventSource) !== "undefined") {

 // 支持服务器发送的事件。 让我们在这里有一些代码!

} else {

 // 不支持服务器发送的事件

}



60.服务器发送的事件有哪些可用的事件?


以下是可用于服务器发送事件的事件列表


活动 说明

打开 它在打开与服务器的连接时使用

留言 收到消息时使用此事件

错误 发生错误时发生



61.promise的主要规则是什么?


promise必须遵循一组特定的规则,


promise是提供符合标准的.then()方法的对象

挂起的promise可以转换为已完成或拒绝状态

已完成或被拒绝的promise已解决,并且不得转换为任何其他状态。

一旦promise被解决,价值就不能改变。



62.回调中的回调是什么?


您可以将一个回调嵌套在另一个回调中,以依次执行操作。这被称为回调中的回调。


loadScript('/script1.js', function(script) {
   console.log('first script is loaded');
  loadScript('/script2.js', function(script) {
    console.log('second script is loaded');
    loadScript('/script3.js', function(script) {
        console.log('third script is loaded');
      // 加载所有脚本后
    });
  })
});


目录
相关文章
|
3月前
|
JSON JavaScript 前端开发
Javascript基础 86个面试题汇总 (附答案)
该文章汇总了JavaScript的基础面试题及其答案,涵盖了JavaScript的核心概念、特性以及常见的面试问题。
63 3
|
3月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
4月前
|
JavaScript 前端开发
常见的JS面试题
【8月更文挑战第5天】 常见的JS面试题
62 3
|
1月前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
35 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
4月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
45 0
|
4月前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
4月前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
4月前
|
JavaScript 前端开发
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
|
5月前
|
缓存 JavaScript 前端开发
js高频面试题,整理好咯
中级前端面试题,不低于12k,整理的是js较高频知识点,可能不够完善,大家有兴趣可以留言补充,我会逐步完善,若发现哪里有错,还请多多斧正。