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');
      // 加载所有脚本后
    });
  })
});


目录
相关文章
|
21天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
44 5
|
10天前
|
JavaScript 前端开发 测试技术
「一劳永逸」送你21道高频JavaScript手写面试题(上)
「一劳永逸」送你21道高频JavaScript手写面试题
36 0
|
1月前
|
设计模式 JavaScript 前端开发
最常见的26个JavaScript面试题和答案
最常见的26个JavaScript面试题和答案
47 1
|
1月前
|
存储 JavaScript 前端开发
【JavaScript】面试手撕浅拷贝
引入 浅拷贝和深拷贝应该是面试时非常常见的问题了,为了能将这两者说清楚,于是打算用两篇文章分别解释下深浅拷贝。 PS: 我第一次听到拷贝这个词,有种莫名的熟悉感,感觉跟某个英文很相似,后来发现确实Copy的音译,感觉这翻译还是蛮有意思的
45 6
|
1月前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
53 3
|
2月前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
36 0
|
2月前
|
前端开发 JavaScript 算法
【JavaScript】面试手撕数组排序
这章主要讲的是数组的排序篇,我们知道面试的时候,数组的排序是经常出现的题目。所以这块还是有必要进行一下讲解的。笔者观察了下前端这块的常用算法排序题,大概可以分为如下
24 2
|
2月前
|
JavaScript 前端开发 索引
【JavaScript】面试手撕数组原型链(易)
续借上文,这篇文章主要讲的是数组原型链相关的考题,有些人可能会纳闷,数组和原型链之间有什么关系呢?我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰,如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和,该如何做呢?我们知道数组没有sum函数,于是我们需要在数组的原型上定义这个函数,才能方便我们调用,具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。
39 6
|
2月前
|
JavaScript 前端开发
【JavaScript】面试手写题精讲之数组(上)
该专题主要是讲解我们在面试的时候碰到一些JS的手写题, 确实这种手写题还是比较恶心的。有些时候好不容易把题目写出来了,突然面试官冷不丁来一句有没有更优的解法,直接让我们僵在原地。为了解决兄弟们的这些困扰,这个专题于是就诞生啦。我们会将一些常见的不是最优解的答案作为对比,方便大家更好理解。
38 3
|
3月前
|
存储 人工智能 JavaScript
【利用AI刷面试题】AI:十道JavaScript面试题巩固一下知识
【利用AI刷面试题】AI:十道JavaScript面试题巩固一下知识