14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第五部分 371-424题)

·  阅读 9585
14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第五部分 371-424题)

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!」

本来今天上午可以更新完成所有面试题,但是上午实在是太忙,一直到现在才有时间,还请大家见谅

14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第一部分 1-100题)

14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第二部分 101-200题)

14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第三部分 201-300题)

14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第四部分 301-370题)

14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第五部分 371-424题)

在这里插入图片描述

编号问题
1在 JavaScript 中创建对象的可行方法有哪些?
2什么是原型链?
3call、apply、bind有什么区别?
4 什么是 JSON 及其常见操作?
5 数组slice()方法的目的是什么?
6 数组splice()方法的目的是什么?
7 slice()和splice()有什么区别?
8 你如何比较 Object 和 Map
9== 和 === 运算符有什么区别?
10什么是 lambda 或 箭头函数?
11 什么是头等函数?
12 什么是一阶函数?
13 什么是高阶函数?
14 什么是一元函数?
15 什么是柯里化函数?
16 什么是纯函数?
17let 关键字的用途是什么?
18let 和 var 有什么区别?
19为什么选择 let 这个名字作为关键字?
20你如何在没有错误的情况下重新声明 switch 块中的变量?
21什么是暂时性死区?
22什么是IIFE(立即执行函数表达式)?
23使用模块有什么好处?
24什么是memoization(记忆)?
25什么是Hoisting(变量提升)?
26ES6 中的类是什么?
27什么是closures(闭包)?
28什么是modules(模块)?
29为什么需要模块?
30javascript中的作用域是什么?
31什么是Service Worker?
32如何使用 Service Worker 操作 DOM?
33你如何在 Service Worker 重新启动时重用信息?
34什么是 IndexedDB?
35什么是 web storage?
36什么是 post message?
37什么是 Cookie ?
38为什么需要 Cookie ?
39cookie 中有哪些选项 ?
40你如何删除cookie ?
41cookie、本地存储和会话存储有什么区别 ?
42localStorage 和 sessionStorage 的主要区别是什么?
43你如何访问web 存储?
44会话存储有哪些可用的方法?
45什么是存储事件及其事件处理程序?
46为什么需要web 存储?
47你如何检查 Web 存储浏览器支持?
48你如何检查web workers浏览器支持?
49举个 web worker 的例子
50web worker 对 DOM 的限制是什么?
51什么是promise?
52为什么需要promise?
53promise的三种状态是什么?
54 什么是回调函数?
55为什么我们需要回调?
56什么是回调地狱?
57什么是服务器发送事件?
58你如何接收服务器发送的事件通知?
59你如何检查浏览器对服务器发送事件的支持?
60服务器发送的事件有哪些可用的事件?
61promise的主要规则是什么?
62回调中的回调是什么?
63什么是promise chaining?
64什么是 promise.all?
65promise中race方法的目的是什么?
66什么是javascript中的严格模式?
67为什么需要严格模式?
68你如何声明严格模式?
69双感叹号的目的是什么?
70删除运算符的目的是什么?
71什么是typeof运算符?
72什么是未定义属性?
73什么是空值?
74null 和 undefined 有什么区别?
75什么是eval?
76Window和Document有什么区别?
77你如何在 javascript 中访问历史记录?
78你如何检测大写锁定键是否打开?
79什么是isNaN?
80未声明变量和未定义变量有什么区别?
81什么是全局变量?
82全局变量有什么问题?
83什么是 NaN 属性?
84isFinite 函数的目的是什么?
85什么是event flow(事件流)?
86什么是event bubbling(事件冒泡)?
87什么是event capturing(事件捕获)?
88你如何使用 JavaScript 提交表单?
89你如何找到操作系统详细信息?
90document load 和 DOMContentLoaded 事件有什么区别?
91Native 、Host 和User objects之间有什么区别?
92用于调试 JavaScript 代码的工具或技术有哪些?
93promises相对于回调的优缺点是什么?
94attribute 和 property有什么区别?
95什么是 same-origin policy(同源策略)?
96void 0的目的是什么?
97JavaScript 是编译型语言还是解释型语言?
98JavaScript 是区分大小写的语言吗?
99Java 和 JavaScript 之间有什么关系吗?
100什么是event?
101谁创造了 JavaScript ?
102preventDefault 方法有什么用?
103stopPropagation方法有什么用?
104return false 涉及哪些步骤?
105什么是BOM(浏览器对象模型)?
106setTimeout有什么用?
107setInterval有什么用?
108为什么 JavaScript 被视为单线程?
109什么是event delegation(事件委托)?
110什么是 ECMAScript?
111什么是 JSON?
112JSON的语法规则是什么?
113JSON 字符串化的目的是什么?
114你如何解析 JSON 字符串?
115为什么需要 JSON?
116什么是 PWA?
117clearTimeout 方法的目的是什么?
118clearInterval 方法的目的是什么?
119你如何在javascript中重定向新页面?
120你如何检查一个字符串是否包含一个子字符串?
121你如何在 javascript 中验证电子邮件?
122你如何使用 javascript 获取当前 url?
123location对象的各种url属性是什么?
124如何在javascript中获取查询字符串值?
125如何检查对象中是否存在键?
126你如何循环或枚举 javascript 对象?
127你如何测试一个空对象?
128什么是参数对象?
129你如何使字符串的第一个字母大写?
130for循环的优缺点是什么?
131你如何在javascript中显示当前日期?
132你如何比较两个日期对象?
133你如何检查一个字符串是否以另一个字符串开头?
134你如何在javascript中修剪字符串?
135你如何在javascript中添加一个键值对?
136‘!–’ 符号是否表示一个特殊运算符?
137 你如何为变量分配默认值?
138你如何定义多行字符串?
139什么是app shell model?
140我们可以为函数定义属性吗?
141找到函数期望的参数数量的方法是什么?
142什么是 polyfill?
143什么是 break 和 continue 语句?
144什么是js标签?
145将声明放在首位有什么好处?
146 初始化变量有什么好处?
147创建新对象的建议是什么?
148你如何定义 JSON 数组?
149你如何生成随机整数?
150你能写一个随机整数函数来打印范围内的整数吗?
151什么是tree shaking(摇树)?
152tree shaking(摇树)需要什么?
153是否推荐使用 eval?
154什么是正则表达式?
155正则表达式中可用的字符串方法有哪些?
156正则表达式中的修饰符是什么?
157什么是正则表达式模式?
158什么是 RegExp 对象?
159如何在字符串中搜索模式?
160exec方法的目的是什么?
161如何更改 HTML 元素的样式?
1621+2+'3' 的结果是什么?
163什么是调试器语句?
164 调试中断点的目的是什么?
165我可以使用保留字作为标识符吗?
166你如何检测移动浏览器?
167如何在没有正则表达式的情况下检测移动浏览器?
168你如何使用JS获取图像的宽度和高度?
169如何进行同步 HTTP 请求?
170 如何进行异步 HTTP 请求?
171你如何在javascript中将日期转换为另一个时区?
172用于获取窗口大小的属性是什么?
173什么是javascript中的条件运算符?
174你能在条件运算符上应用chaining吗?
175页面加载后执行javascript的方式有哪些?
176proto 和 prototype有什么区别?
177举个例子你真的需要分号
178什么是freeze 方法?
179freeze 方法的目的是什么?
180为什么我需要使用freeze 方法?
181你如何检测浏览器语言首选项?
182如何使用javascript将字符串转换为标题大小写?
183你如何检测页面中禁用的javascript?
184javascript支持的各种运算符有哪些?
185 什么是rest 参数?
186如果不使用 rest 参数作为最后一个参数会发生什么?
187什么是 JavaScript 中可用的按位运算符?
188什么是spread operator(展开运算符)?
189你如何确定对象是否被冻结?
190你如何确定两个值相同或不使用对象?
191使用Object 的 is方法的目的是什么?
192如何将属性从一个对象复制到另一个对象?
193赋值方法有哪些应用?
194什么是Proxy(代理)对象?
195seal 方法的目的是什么?
196seal 方法的应用有哪些?
197freeze 和 seal 方法有什么区别?
198如何判断物体是否 seal?
199如何获得可枚举的键值对?
200Object.values 和 Object.entries 方法的主要区别是什么?
201如何获取任何对象的键列表?
202你如何用 prototype 创建一个对象?
203什么是WeakSet?
204WeakSet 和 Set 有什么区别?
205列出 WeakSet 上可用的方法集合?
206什么是 WeakMap?
207WeakMap 和 Map 有什么区别?
208列出 WeakMap 上可用的方法集合?
209uneval 的目的是什么?
210你如何 encode (编码)一个 URL?
211你如何 decode (解码)一个 URL?
212你如何打印网页的内容?
213uneval 和 eval 有什么区别?
214什么是 anonymous (匿名)函数?
215局部变量和全局变量的优先顺序是什么?
216什么是 javascript 访问器?
217你如何在对象构造函数上定义属性?
218 get 和defineProperty 有什么区别?
219Getter 和 Setter 的优点是什么?
220我可以使用defineProperty方法添加 getter 和 setter 吗?
221switch-case 的目的是什么?
222使用 swtich case 需要遵循什么约定?
223什么是原始数据类型?
224访问对象属性的不同方式有哪些?
225什么是函数参数规则?
226什么是错误对象?
227当你收到语法错误时
228错误对象有哪些不同的错误名称?
229错误处理中的各种语句是什么?
230javascript中的两种类型的循环是什么?
231什么是 nodejs?
232什么是 Intl 对象?
233你如何执行特定于语言的日期和时间格式化?
234什么是迭代器?
235同步迭代是如何工作的?
236什么是事件循环?
237什么是调用栈?
238什么是事件队列?
239什么是装饰器?
240Intl 对象的属性是什么?
241什么是一元运算符?
242如何对数组中的元素进行排序?
243排序数组时 compareFunction 的目的是什么?
244你如何反转数组?
245你如何在数组中找到最小值和最大值?
246如何在没有math函数的情况下找到最小值和最大值?
247什么是空语句及其目的?
248如何获取模块的元数据?
249什么是逗号运算符?
250逗号运算符的优点是什么?
251什么是 typescript ?
252javascript 和 typescript 有什么区别?
253typescript 相对于 javascript 的优势是什么?
254什么是对象初始值设定项?
255什么是构造方法?
256如果在一个类中多次编写构造函数会发生什么?
257如何调用父类的构造函数?
258你如何获得一个对象的原型?
259如果我为 getPrototype 方法传递字符串类型会发生什么?
260如何将一个对象的原型设置为另一个对象?
261你如何检查一个对象是否可以扩展?
262如何防止对象扩展?
263使对象不可扩展的不同方法有哪些?
264如何在一个对象上定义多个属性?
265JavaScript 中的 MEAN 是什么?
266什么是 javascript 中的混淆?
267为什么需要混淆?
268什么是Minification(缩小)?
269缩小有什么好处?
270混淆和加密有什么区别?
271常用的缩小工具有哪些?
272你如何使用 javascript 执行表单验证?
273如何在没有 javascript 的情况下执行表单验证?
274可用于约束验证的 DOM 方法有哪些?
275什么是可用的约束验证 DOM 属性?
276什么是有效性属性列表?
277举例使用 rangeOverflow 属性?
278javascript 中是否提供枚举功能?
279什么是枚举?
280你如何列出一个对象的所有属性?
281如何获取对象的属性描述符?
282属性描述符提供的属性是什么?
283你如何扩展类?
284如何在不重新加载页面的情况下修改 url?
285如何检查数组是否包含特定值?
286你如何比较标量数组?
287 如何从获取参数中获取值?
288你如何用逗号作为千位分隔符打印数字?
289java和javascript有什么区别?
290javascript是否支持命名空间?
291你如何声明命名空间?
292如何从父页面调用 iframe 中的 javascript 代码?
293如何从日期获取时区偏移量?
294如何动态加载 CSS 和 JS 文件?
295在 DOM 中查找 HTML 元素的不同方法有哪些?
296什么是jQuery?
297什么是 V8 JavaScript 引擎?
298为什么我们称javascript为动态语言?
299什么是空运算符?
300如何设置光标等待?
301你如何创建一个无限循环?
302为什么需要避免 with 语句?
303以下 for 循环的输出是什么?
304列出 ES6 的一些特性?
305什么是 ES6?
306我可以重新声明 let 和 const 变量吗?
307是 const 变量使值不可变吗?
308什么是默认参数?
309什么是模板字面量?
310如何在模板文字中编写多行字符串?
311什么是嵌套模板?
312什么是标记模板?
313 什么是原始字符串?
314什么是解构赋值?
315解构赋值中的默认值是什么?
316你如何在解构赋值中交换变量?
317什么是增强的对象字面量?
318什么是动态导入?
319动态导入的用例是什么?
320什么是typed arrays (类型数组)?
321模块加载器的优点是什么?
322什么是 collation?
323什么是...of 语句?
324下面展开运算符数组的输出是什么?
325PostMessage 安全吗?
326postmessage目标源作为通配符有什么问题?
327你如何避免收到来自攻击者的 postMessages?
328我可以完全避免使用 postMessages 吗?
329postMessages 是否同步?
330Javascript 是什么范式?
331内部和外部 javascript有什么区别?
332JavaScript 是否比服务器端脚本更快?
333你如何获得复选框的状态?
334双波浪号运算符的目的是什么?
335你如何将字符转换为 ASCII 码?
336什么是数组缓冲区?
337下面的字符串表达式的输出是什么?
338Error对象的目的是什么?
339EvalError 对象的目的是什么?
340从非严格模式到严格模式抛出的案例错误列表是什么?
341是否所有对象都有prototypes(原型)?
342参数和实参有什么区别?
343数组中 some 方法的目的是什么?
344你如何组合两个或多个数组?
345浅拷贝和深拷贝有什么区别?
346你如何创建一个字符串的特定数量的副本?
347你如何根据正则表达式返回所有匹配的字符串?
348你如何在开头或结尾修剪字符串?
349下面带有一元运算符的控制台语句的输出是什么?
350javascript 是否使用 mixins?
351什么是 thunk 函数?
352什么是异步 thunk?
353以下函数调用的输出是什么?
354如何从字符串中删除所有换行符?
355回流和重绘有什么区别?
356否定数组会发生什么?
357如果我们添加两个数组会发生什么?
358在假值上添加加法运算符的输出是什么?
359如何使用特殊字符创建自字符串?
360如何从数组中删除虚假值?
361你如何获得数组的唯一值?
362什么是解构别名?
363如何在不使用 map 方法的情况下映射数组值?
364你如何清空一个数组?
365你如何将数字四舍五入到某些小数?
366将数组转换为对象的最简单方法是什么?
367你如何用一些数据创建一个数组?
368控制台对象的占位符是什么?
369是否可以将 CSS 添加到控制台消息?
370控制台对象的dir方法的目的是什么?
371是否可以在控制台中调试 HTML 元素?
372如何使用控制台对象以表格格式显示数据?
373你如何验证参数是否为数字?
374你如何创建复制到剪贴板按钮?
375获取时间戳的快捷方式是什么?
376你如何展平多维数组?
377什么是最简单的多条件检查?
378你如何捕获浏览器后退按钮?
379如何禁用网页中的右键单击?
380什么是包装对象?
381什么是 AJAX?
382处理异步代码的不同方式有哪些?
383如何取消提取请求?
384什么是网络语音API?
385什么是最小超时限制?
386你如何在现代浏览器中实现零超时?
387事件循环中的任务是什么?
388什么是微任务?
389什么是不同的事件循环?
390queueMicrotask 的目的是什么?
391你如何在 typescript 文件中使用 javascript 库?
392promises 和 observables 有什么区别?
393什么是堆?
394什么是事件表?
395什么是微任务队列?
396shim 和 polyfill 有什么区别?
397你如何检测原始或非原始值类型?
398什么是Babel ?
399Node.js 是完全单线程的吗?
400可观察对象的常见用例是什么?
401什么是 RxJS?
402函数构造函数和函数声明有什么区别?
403什么是短路状态?
404调整数组大小的最简单方法是什么?
405什么是可观察的?
406函数声明和类声明有什么区别?
407什么是异步函数?
408你如何防止 promises swallowing errors?
409什么是 deno ?
410你如何在javascript中使对象可迭代?
411什么是正确的尾调用?
412你如何检查一个对象是否是一个承诺?
413如何检测函数是否被调用为构造函数?
414arguments 对象和rest 参数之间有什么区别?
415扩展运算符和rest 参数之间有什么区别?
416有哪些不同种类的 generators(生成器)?
417什么是内置可迭代对象?
418for...of 和 for...in 语句之间有什么区别?
419如何定义实例和非实例属性?
420isNaN 和 Number.isNaN 有什么区别?
421如何在没有任何额外括号的情况下调用 IIFE?
422可以在 switch case 中使用表达式吗?
423忽略承诺错误的最简单方法是什么?
424如何使用 CSS 设置控制台输出的样式?

371.是否可以在控制台中调试 HTML 元素?

是的,可以像检查元素一样在控制台中获取和调试 HTML 元素。

const element = document.getElementsByTagName("body")[0];
console.log(element);
复制代码

它在控制台中打印 HTML 元素,

在这里插入图片描述

⬆ 返回顶部 回到第350题


372.如何使用控制台对象以表格格式显示数据?

所述console.table()用于以表格形式显示在控制台的数据可视化复杂的数组或对象。

const users = [{ "name":"Haiyong", "id": 1, "city": "Beijing"}, { "name":"Max", "id": 2, "city": "London"}, { "name":"CSDN", "id": 3, "city": "Paris"} ];
console.table(users);
复制代码

以表格形式可视化的数据,在这里插入图片描述

==注意==:请记住,console.table() IE 不支持。

⬆ 返回顶部 回到第350题


373.你如何验证参数是否为数字?

IsNaN 和 isFinite 方法的组合用于确认参数是否为数字。

function isNumber(n){
   return !isNaN(parseFloat(n)) && isFinite(n);
}
复制代码

⬆ 返回顶部 回到第350题


374.你如何创建复制到剪贴板按钮?

您需要选择输入元素的内容(使用 .select() 方法)并使用 execCommand 执行复制命令(即 execCommand('copy'))。您还可以执行其他系统命令,如剪切和粘贴。

document.querySelector("#copy-button").onclick = function() {
 // 选择内容
 document.querySelector("#copy-input").select();
 // 复制到剪贴板
 document.execCommand('copy');
};
复制代码

⬆ 返回顶部 回到第350题


375.获取时间戳的快捷方式是什么?

您可以使用new Date().getTime()来获取当前时间戳。有一个替代的快捷方式来获取值。

console.log(+new Date());
console.log(Date.now());
复制代码

⬆ 返回顶部 回到第350题


376.你如何展平多维数组?

使用 Spread 运算符展平二维数组是微不足道的。

const biDimensionalArr = [11, [22, 33], [44, 55], [66, 77], 88, 99];
const flattenArr = [].concat(...biDimensionalArr); // [11, 22, 33, 44, 55,
复制代码

但是您可以通过递归调用使其适用于多维数组,

function flattenMultiArray(arr) {
   const flattened = [].concat(...arr);
   return flattened.some(item => Array.isArray(item)) ? flattenMultiArray(flattened) : flattened;
}
const multiDimensionalArr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenMultiArray(multiDimensionalArr); // [11, 22, 33, 44, 55, 66, 77, 88, 99]
复制代码

⬆ 返回顶部 回到第350题


377.什么是最简单的多条件检查?

您可以使用indexOf将输入与多个值进行比较,而不是将每个值都作为一个条件进行检查。

// Verbose approach
if (input === 'first' || input === 1 || input === 'second' || input === 2) {
 someFunction();
}
// Shortcut
if (['first', 1, 'second', 2].indexOf(input) !== -1) {
 someFunction();
}
复制代码

⬆ 返回顶部 回到第350题


378.你如何捕获浏览器后退按钮?

该window.onbeforeunload方法用于捕获浏览器后退按钮事件。这有助于警告用户丢失当前数据。

window.onbeforeunload = function() {
   alert("You work will be lost");
};
复制代码

⬆ 返回顶部 回到第350题


379.如何禁用网页中的右键单击?

可以通过从oncontextmenubody 元素上的属性返回 false 来禁用页面上的右键单击。

<body oncontextmenu="return false;">
复制代码

⬆ 返回顶部 回到第350题


380.什么是包装对象?

像字符串、数字和布尔值这样的原始值没有属性和方法,但是当您尝试对它们执行操作时,它们会被临时转换或强制转换为对象(包装对象)。例如,如果对原始字符串值应用 toUpperCase() 方法,它不会抛出错误而是返回字符串的大写。

let name = "csdn";
console.log(name.toUpperCase());  // 在后台处理为 console.log(new String(name).toUpperCase());
复制代码

即,除 null 和 undefined 之外的每个原语都有包装对象,包装对象列表是 String、Number、Boolean、Symbol 和 BigInt。

⬆ 返回顶部 回到第350题


381.什么是 AJAX?

AJAX 代表 Asynchronous JavaScript and XML,它是一组用于异步显示数据的相关技术(HTML、CSS、JavaScript、XMLHttpRequest API 等)。即我们可以在不重新加载网页的情况下向服务器发送数据并从服务器获取数据。

⬆ 返回顶部 回到第350题


382.处理异步代码的不同方式有哪些?

下面是处理异步代码的不同方法的列表。

1.回调 2.承诺 3.异步/等待 4.第三方库,如 async.js、bluebird 等

⬆ 返回顶部 回到第350题


383.如何取消提取请求?

直到几天前,原生 promise 的一个缺点是无法直接取消 fetch 请求。但是新AbortController的 js 规范允许您使用信号来中止一个或多个 fetch 调用。

取消获取请求的基本流程如下,

1.创建AbortController实例 2.获取实例的信号属性并将信号作为信号的获取选项传递 3.调用 AbortController 的 abort 属性来取消所有使用该信号的获取 例如,让我们将相同的信号传递给多个 fetch 调用将取消所有使用该信号的请求,

const controller = new AbortController();
const { signal } = controller;

fetch("http://localhost:8000", { signal }).then(response => {
   console.log(`Request 1 is complete!`);
}).catch(e => {
   if(e.name === "AbortError") {
       // 我们知道它已被取消!
   }
});

fetch("http://localhost:8000", { signal }).then(response => {
   console.log(`Request 2 is complete!`);
}).catch(e => {
    if(e.name === "AbortError") {
        // 我们知道它已被取消!
     }
});

// 等待 2 秒以中止两个请求
setTimeout(() => controller.abort(), 2000);
复制代码

⬆ 返回顶部 回到第350题


384.什么是网络语音API?

Web 语音 API 用于使现代浏览器能够识别和合成语音(即,将语音数据转换为 Web 应用程序)。该 API 由 W3C 社区于 2012 年引入。它有两个主要部分,

SpeechRecognition(异步语音识别或 Speech-to-Text):它提供了从音频输入中识别语音上下文并做出相应响应的能力。这是通过SpeechRecognition接口访问的。下面的例子展示了如何使用这个 API 从语音中获取文本,

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;  // webkitSpeechRecognition for Chrome and SpeechRecognition for FF
const recognition = new window.SpeechRecognition();
recognition.onresult = (event) => { // SpeechRecognitionEvent type
 const speechToText = event.results[0][0].transcript;
 console.log(speechToText);
}
recognition.start();
复制代码

在此 API 中,浏览器将要求您授予使用麦克风的权限

SpeechSynthesis(文本到语音):它提供了从音频输入中识别语音上下文并做出响应的能力。这是通过SpeechSynthesis接口访问的。例如,下面的代码用于从文本中获取语音/语音,

if('speechSynthesis' in window){
   var speech = new SpeechSynthesisUtterance('Hello World!');
   speech.lang = 'en-US';
   window.speechSynthesis.speak(speech);
}
复制代码

上面的例子可以在 chrome(33+) 浏览器的开发者控制台上进行测试。

==注意==: 这个 API 仍然是一个工作草案,只在 Chrome 和 Firefox 浏览器中可用(当然 Chrome 只实现了规范)

⬆ 返回顶部 回到第350题


385.什么是最小超时限制?

浏览器和 NodeJS javascript 环境都会以大于 0 毫秒的最小延迟进行节流。这意味着即使设置 0 毫秒的延迟也不会立即发生。

浏览器:它们的最小延迟为 4 毫秒。当由于回调嵌套(特定深度)或在一定数量的连续间隔后触发连续调用时,会发生此限制。

==注意==:旧版浏览器的最小延迟为 10 毫秒。

Nodejs:它们的最小延迟为 1 毫秒。当延迟大于 2147483647 或小于 1 时会发生 此限制。解释此超时限制行为的最佳示例是以下代码片段的顺序。

function runMeFirst() {
   console.log('My script is initialized');
}
setTimeout(runMeFirst, 0);
console.log('Script loaded');
复制代码

并且输出将在

Script loaded
My script is initialized
复制代码

如果不使用setTimeout,日志的顺序将是顺序的。

function runMeFirst() {
  console.log('My script is initialized');
}
runMeFirst();
console.log('Script loaded');
复制代码

输出是,

My script is initialized
Script loaded
复制代码

⬆ 返回顶部 回到第350题


386.你如何在现代浏览器中实现零超时?

由于大于 0ms 的最小延迟,您不能使用 setTimeout(fn, 0) 立即执行代码。但是您可以使用 window.postMessage() 来实现此行为。

⬆ 返回顶部 回到第350题


387.事件循环中的任务是什么?

任务是任何 javascript 代码/程序,它被安排通过标准机制运行,例如最初开始运行程序、运行事件回调或触发间隔或超时。所有这些任务都安排在一个任务队列中。

以下是将任务添加到任务队列的用例列表,

1.当一个新的 javascript 程序直接从控制台执行或由 <script> 元素运行时,该任务将被添加到任务队列中。 2.当事件触发时,事件回调添加到任务队列 3.当达到 setTimeout 或 setInterval 时,将相应的回调添加到任务队列中

⬆ 返回顶部 回到第350题


388.什么是微任务?

微任务是需要在当前正在执行的任务/微任务完成后立即执行的 javascript 代码。它们本质上是一种阻塞。即,主线程将被阻塞,直到微任务队列为空。

微任务的主要来源是 Promise.resolve、Promise.reject、MutationObservers、IntersectionObservers 等

==注意==:所有这些微任务都在事件循环的同一轮中处理。

⬆ 返回顶部 回到第350题


389.什么是不同的事件循环?

⬆ 返回顶部 回到第350题


390.queueMicrotask 的目的是什么?

⬆ 返回顶部 回到第350题


391.你如何在 typescript 文件中使用 javascript 库?

众所周知,并非所有 JavaScript 库或框架都有 TypeScript 声明文件。但是如果你仍然想在我们的 TypeScript 文件中使用库或框架而不会出现编译错误,唯一的解决方案是declare关键字和变量声明。例如,假设您有一个名为的库customLibrary,它没有 TypeScript 声明,并且customLibrary在全局命名空间中调用了一个命名空间。您可以在打字稿代码中使用这个库,如下所示,

declare var customLibrary;
复制代码

在运行时,typescript 会将类型customLibrary作为any类型提供给变量。不使用声明关键字的另一种选择如下

var customLibrary: any;
复制代码

⬆ 返回顶部 回到第350题


392.promises 和 observables 有什么区别?

表格形式的一些主要区别

promisesobservables
一次只发出一个值在一段时间内发出多个值(从 0 到多个的值流)
天生渴望;他们将被立即调用天性懒惰;他们需要调用订阅
Promise 总是异步的,即使它立即解决了Observable 可以是同步的也可以是异步的
不提供任何操作符提供map、forEach、filter、reduce、retry、retryWhen等操作符
不能取消使用 unsubscribe() 方法取消

⬆ 返回顶部 回到第350题


393.什么是堆?

堆(或内存堆)是我们定义变量时存放对象的内存位置。即,这是所有内存分配和取消分配发生的地方。堆和调用栈都是 JS 运行时的两个容器。

每当运行时遇到代码中的变量和函数声明时,它都会将它们存储在堆中。

⬆ 返回顶部 回到第350题


394.什么是事件表?

事件表是一种 数据结构,用于存储和跟踪将在一段时间间隔后或在某些 API 请求解析后异步执行的所有事件。即,每当您调用 setTimeout 函数或调用异步操作时,它都会被添加到事件表中。

它不会自行执行功能。事件表的主要目的是跟踪事件并将它们发送到事件队列,如下图所示。

⬆ 返回顶部 回到第350题


395.什么是微任务队列?

Microtask Queue 是一个新的队列,所有由 promise 对象发起的任务都在回调队列之前得到处理。

微任务队列在下一个渲染和绘制作业之前处理。但是,如果这些微任务运行很长时间,则会导致视觉质量下降。

⬆ 返回顶部 回到第350题


396.shim 和 polyfill 有什么区别?

shim 是一个库,它为旧环境带来新的 API,仅使用该环境的手段。它不一定限于 Web 应用程序。例如,es5-shim.js 用于在旧浏览器(主要是 IE9 之前)上模拟 ES5 功能。

而 polyfill 是一段代码(或插件),它提供您(开发人员)希望浏览器本地提供的技术。

简单来说,polyfill 是浏览器 API 的垫片。

⬆ 返回顶部 回到第350题


397.你如何检测原始或非原始值类型?

在 JavaScript 中,原始类型包括 boolean、string、number、BigInt、null、Symbol 和 undefined。而非原始类型包括对象。但是您可以使用以下功能轻松识别它们,

var myPrimitive = 30;
var myNonPrimitive = {};
function isPrimitive(val) {
   return Object(val) !== val;
}

isPrimitive(myPrimitive);
isPrimitive(myNonPrimitive);
复制代码

如果该值是原始数据类型,则 Object 构造函数为该值创建一个新的包装器对象。但是如果该值是非原始数据类型(一个对象),则 Object 构造函数将给出相同的对象。

⬆ 返回顶部 回到第350题


398.什么是Babel ?

Babel 是一个 JavaScript 转译器,用于在当前和旧浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。下面列出了一些主要功能,

1.转换语法 2.目标环境中缺少的 Polyfill 功能(使用@babel / polyfill) 3.源代码转换(或 codemods)

⬆ 返回顶部 回到第350题


399.Node.js 是完全单线程的吗?

Node 是单线程的,但是 Node.js 标准库中包含的一些函数(例如 fs 模块函数)不是单线程的。即,它们的逻辑在 Node.js 单线程之外运行,以提高程序的速度和性能。

⬆ 返回顶部 回到第350题


400.可观察对象的常见用例是什么?

一些最常见的 observable 用例是带有推送通知、用户输入更改、重复间隔等的网络套接字

⬆ 返回顶部 回到第400题


401.什么是 RxJS?

RxJS (Reactive Extensions for JavaScript) 是一个使用 observables 实现反应式编程的库,它可以更容易地编写异步或基于回调的代码。它还提供了用于创建和使用 observable 的实用函数。

⬆ 返回顶部 回到第400题


402.函数构造函数和函数声明有什么区别?

创建的函数Function constructor不会为其创建上下文创建闭包,但它们始终在全局范围内创建。即,函数只能访问它自己的局部变量和全局范围变量。而函数声明也可以访问外部函数变量(闭包)。

让我们通过一个例子来看看这种差异,

函数构造器:

var a = 100;
function createFunction() {
   var a = 200;
   return new Function('return a;');
}
console.log(createFunction()()); // 100
复制代码

函数声明:

var a = 100;
function createFunction() {
   var a = 200;
   return function func() {
       return a;
   }
}
console.log(createFunction()()); // 200
复制代码

⬆ 返回顶部 回到第400题


403.什么是短路状态?

短路条件适用于编写简单 if 语句的精简方式。让我们用一个例子来演示这个场景。如果您想登录带有身份验证条件的门户,则表达式如下,

if (authenticate) {
  loginToPorta();
}
复制代码

由于 javascript 逻辑运算符从左到右计算,因此可以使用 && 逻辑运算符简化上述表达式

authenticate && loginToPorta();
复制代码

⬆ 返回顶部 回到第400题


404.调整数组大小的最简单方法是什么?

数组的长度属性可用于快速调整数组大小或清空数组。让我们在数字数组上应用 length 属性以将元素数量从 5 调整为 2,

var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5

array.length = 2;
console.log(array.length); // 2
console.log(array); // [1,2]
复制代码

数组也可以清空

var array = [1, 2, 3, 4, 5];
array.length = 0;
console.log(array.length); // 0
console.log(array); // []
复制代码

⬆ 返回顶部 回到第400题


405.什么是可观察的?

Observable 基本上是一个函数,它可以随着时间的推移同步或异步地将值流返回给观察者。消费者可以通过调用subscribe()方法获取值。

让我们看一个 Observable 的简单例子

import { Observable } from 'rxjs';

const observable = new Observable(observer => {
 setTimeout(() => {
   observer.next('Message from a Observable!');
 }, 3000);
});

observable.subscribe(value => console.log(value));
复制代码

注意: Observable 还不是 JavaScript 语言的一部分,但建议将它们添加到语言中

⬆ 返回顶部 回到第400题


406.函数声明和类声明有什么区别?

函数声明和类声明之间的主要区别是hoisting. 函数声明被提升,但不是类声明。

Classes:

const user = new User(); // ReferenceError

class User {}
复制代码

构造函数:

const user = new User(); // No error

function User() {
}
复制代码

⬆ 返回顶部 回到第400题


407.什么是异步函数?

异步函数是一个用async关键字声明的函数,它可以通过避免承诺链以更简洁的风格编写异步的、基于承诺的行为。这些函数可以包含零个或多个await表达式。

让我们看一个下面的异步函数示例,

async function logger() {

 let data = await fetch('http://someapi.com/users'); // 暂停直到 fetch 返回
 console.log(data)
}
logger();
复制代码

它基本上是 ES2015 承诺和生成器的语法糖。

⬆ 返回顶部 回到第400题


408.你如何防止 promises swallowing errors?

在使用异步代码时,JavaScript 的 ES6 承诺可以让您的生活变得更轻松,而无需每两行都有回调金字塔和错误处理。但是 Promises 有一些陷阱,最大的一个是默认吞下错误。

假设您希望在以下所有情况下向控制台打印错误,

Promise.resolve('promised value').then(function() {
      throw new Error('error');
});

Promise.reject('error value').catch(function() {
      throw new Error('error');
});

new Promise(function(resolve, reject) {
      throw new Error('error');
});
复制代码

但是有许多现代 JavaScript 环境不会打印任何错误。你可以用不同的方式解决这个问题,

1.在每个链的末尾添加 catch 块:您可以在每个承诺链的末尾添加 catch 块

Promise.resolve('promised value').then(function() {
   throw new Error('error');
}).catch(function(error) {
 console.error(error.stack);
});
复制代码

但是很难为每个承诺链打字,而且也很冗长。

2.添加完成方法:您可以用完成方法替换第一个解决方案的 then 和 catch 块

Promise.resolve('promised value').done(function() {
   throw new Error('error');
});
复制代码

假设您想使用 HTTP 获取数据,然后异步处理结果数据。您可以编写done如下块,

getDataFromHttp()
 .then(function(result) {
   return processDataAsync(result);
 })
 .done(function(processed) {
   displayData(processed);
 });
复制代码

将来,如果处理库 API 更改为同步,则可以删除done块,如下所示,

getDataFromHttp()
  .then(function(result) {
    return displayData(processDataAsync(result));
  })
复制代码

然后您忘记添加done块到then块会导致无提示错误。

3.通过 Bluebird 扩展 ES6 Promises: Bluebird 扩展了 ES6 Promises API 以避免第二个解决方案中的问题。这个库有一个“默认”的 onRejection 处理程序,它将把所有错误从被拒绝的 Promise 打印到 stderr。安装后,您可以处理未处理的拒绝

Promise.onPossiblyUnhandledRejection(function(error){
   throw error;
});
复制代码

并丢弃拒绝,只需用空捕获处理它

Promise.reject('error value').catch(function() {});
复制代码

⬆ 返回顶部 回到第400题


409.什么是 deno ?

Deno 是一个简单、现代且安全的 JavaScript 和 TypeScript 运行时,它使用 V8 JavaScript 引擎和 Rust 编程语言。

⬆ 返回顶部 回到第400题


410.你如何在javascript中使对象可迭代?

默认情况下,普通对象不可迭代。但是您可以通过Symbol.iterator在其上定义属性来使对象可迭代。

让我们用一个例子来证明这一点,

const collection = {
 one: 1,
 two: 2,
 three: 3,
 [Symbol.iterator]() {
   const values = Object.keys(this);
   let i = 0;
   return {
     next: () => {
       return {
         value: this[values[i++]],
         done: i > values.length
       }
     }
   };
 }
};

const iterator = collection[Symbol.iterator]();

console.log(iterator.next());    // → {value: 1, done: false}
console.log(iterator.next());    // → {value: 2, done: false}
console.log(iterator.next());    // → {value: 3, done: false}
console.log(iterator.next());    // → {value: undefined, done: true}
复制代码

可以使用生成器函数简化上述过程,

const collection = {
  one: 1,
  two: 2,
  three: 3,
  [Symbol.iterator]: function * () {
    for (let key in this) {
      yield this[key];
    }
  }
};
const iterator = collection[Symbol.iterator]();
console.log(iterator.next());    // {value: 1, done: false}
console.log(iterator.next());    // {value: 2, done: false}
console.log(iterator.next());    // {value: 3, done: false}
console.log(iterator.next());    // {value: undefined, done: true}
复制代码

⬆ 返回顶部 回到第400题


411.什么是正确的尾调用?

首先,在谈论“正确的尾调用”之前,我们应该先了解尾调用。尾调用是作为调用函数的最终动作执行的子例程或函数调用。而适当的尾调用 (PTC)是一种技术,当函数调用是尾调用时,程序或代码不会为递归创建额外的堆栈帧。

例如,下面的经典或阶乘函数的头递归依赖于每个步骤的堆栈。每一步都需要处理到n * factorial(n - 1)

function factorial(n) {
 if (n === 0) {
   return 1
 }
 return n * factorial(n - 1)
}
console.log(factorial(5)); //120
复制代码

但是,如果您使用尾递归函数,它们会在不依赖堆栈的情况下继续将所需的所有数据传递到递归中。

function factorial(n, acc = 1) {
 if (n === 0) {
   return acc
 }
 return factorial(n - 1, n * acc)
}
console.log(factorial(5)); //120
复制代码

上述模式返回与第一个相同的输出。但是累加器将 total 作为参数进行跟踪,而无需在递归调用中使用堆栈内存。

⬆ 返回顶部 回到第400题


412.你如何检查一个对象是否是一个承诺?

如果你不知道一个值是否是一个承诺,包装该值作为Promise.resolve(value)它返回一个承诺

   function isPromise(object){
      if(Promise && Promise.resolve){
      return Promise.resolve(object) == object;
      }else{
      throw "Promise not supported in your environment"
      }
   }

   var i = 1;
   var promise = new Promise(function(resolve,reject){
      resolve()
   });

   console.log(isPromise(i)); // false
   console.log(isPromise(p)); // true
复制代码

另一种方法是检查.then()处理程序类型

function isPromise(value) {
   return Boolean(value && typeof value.then === 'function');
}
var i = 1;
var promise = new Promise(function(resolve,reject){
   resolve()
});

console.log(isPromise(i)) // false
console.log(isPromise(promise)); // true
复制代码

⬆ 返回顶部 回到第400题


413.如何检测函数是否被调用为构造函数?

您可以使用new.target伪属性来检测函数是作为构造函数(使用 new 运算符)还是作为常规函数调用调用的。

如果使用 new 运算符调用构造函数或函数,则 new.target 返回对构造函数或函数的引用。 对于函数调用,new.target 是未定义的。

function Myfunc() {
   if (new.target) {
      console.log('called with new');
   } else {
      console.log('not called with new');
   }
}
new Myfunc(); // called with new
Myfunc(); // not called with new
Myfunc.call({}); not called with new
复制代码

⬆ 返回顶部 回到第400题


414.arguments 对象和rest 参数之间有什么区别?

arguments 对象和 rest 参数之间有三个主要区别

1.arguments 对象是一个类似数组的对象,但不是一个数组。而rest 参数是数组实例。 2.arguments 对象不支持 sort、map、forEach 或 pop 等方法。而这些方法可用于rest 参数。 3.rest 参数只是那些没有被赋予单独名称的参数,而参数对象包含传递给函数的所有参数

⬆ 返回顶部 回到第400题


415.扩展运算符和rest 参数之间有什么区别?

Rest 参数将所有剩余元素收集到一个数组中。而Spread运算符允许将可迭代对象(数组/对象/字符串)扩展为单个参数/元素。即,Rest 参数与扩展运算符相反。

⬆ 返回顶部 回到第400题


416.有哪些不同种类的 generators(生成器)?

有五种生成器,

1.生成器函数声明:

function* myGenFunc() {
    yield 1;
    yield 2;
    yield 3;
}
const genObj = myGenFunc();
复制代码

2.生成器函数表达式:

const myGenFunc = function* () {
    yield 1;
    yield 2;
    yield 3;
};
const genObj = myGenFunc();
复制代码

3.对象字面量中的生成器方法定义:

const myObj = {
  * myGeneratorMethod() {
     yield 1;
     yield 2;
     yield 3;
  }
};
const genObj = myObj.myGeneratorMethod();
复制代码

4.class 中的生成器方法定义:

class MyClass {
  * myGeneratorMethod() {
     yield 1;
     yield 2;
     yield 3;
  }
}
const myObject = new MyClass();
const genObj = myObject.myGeneratorMethod();
复制代码

5.生成器作为计算属性:

const SomeObj = {
*[Symbol.iterator] () {
 yield 1;
 yield 2;
 yield 3;
}
}

console.log(Array.from(SomeObj)); // [ 1, 2, 3 ]
复制代码

⬆ 返回顶部 回到第400题


417.什么是内置可迭代对象?

下面是 javascript 中内置的可迭代对象列表,

1.数组和类型数组 2.字符串:迭代每个字符或 Unicode 代码点 3.Maps:迭代其键值对 4.集合:迭代它们的元素 5.参数:函数中类似数组的特殊变量 6.NodeList 等 DOM 集合

⬆ 返回顶部 回到第400题


418.for…of 和 for…in 语句之间有什么区别?

for...in 和 for...of 语句都遍历 js 数据结构。唯一的区别在于它们迭代的内容:

for..in 迭代对象的所有可枚举属性键 for..of 迭代可迭代对象的值。 让我们用一个例子来解释这种差异,

let arr = ['a', 'b', 'c'];

arr.newProp = 'newVlue';

// key 是属性键
for (let key in arr) {
console.log(key);
}

// value 是属性值
for (let value of arr) {
console.log(value);
}
复制代码

由于 for..in 循环遍历对象的键,第一个循环在遍历数组对象时记录 0、1、2 和 newProp。for..of 循环遍历 arr 数据结构的值并在控制台中记录 a、b、c。

⬆ 返回顶部 回到第400题


419.如何定义实例和非实例属性?

Instance 属性必须在类方法中定义。例如,名称和年龄属性定义的内部构造函数如下,

class Person {
constructor(name, age) {
  this.name = name;
  this.age = age;
}
}
复制代码

但是必须在 ClassBody 声明之外定义 Static(class) 和原型数据属性。让我们为 Person 类分配年龄值,如下所示,

Person.staticAge = 30;
Person.prototype.prototypeAge = 40;
复制代码

⬆ 返回顶部 回到第400题


420.isNaN 和 Number.isNaN 有什么区别?

1.isNaN:全局函数isNaN将参数转换为数字,如果结果值为 NaN,则返回 true。 2.Number.isNaN:此方法不转换参数。但当类型为 Number 且值为 NaN 时,它返回 true。 让我们通过一个例子来看看区别,

isNaN(‘hello’);   // true
Number.isNaN('hello'); // false
复制代码

⬆ 返回顶部 回到第400题


421.如何在没有任何额外括号的情况下调用 IIFE?

立即调用函数表达式(IIFE)需要一对括号来包装包含语句集的函数。

(function(dt) { 
 console.log(dt.toLocaleTimeString()); 
})(new Date());
复制代码

由于 IIFE 和 void 运算符都会丢弃表达式的结果,因此您可以避免使用void operatorfor IIFE的额外括号,如下所示,

void function(dt) { 
 console.log(dt.toLocaleTimeString()); 
}(new Date());
复制代码

⬆ 返回顶部 回到第400题


422.可以在 switch case 中使用表达式吗?

您可能已经看到在 switch 条件中使用的表达式,但也可以通过为 switch 条件分配真值来用于 switch case。让我们以基于温度的天气状况为例,

const weather = function getWeather(temp) {
 switch(true) {
     case temp < 0: return 'freezing';
     case temp < 10: return 'cold';
     case temp < 24: return 'cool';
     default: return 'unknown';
 }
 }(10);
复制代码

⬆ 返回顶部 回到第400题


423.忽略promise 错误的最简单方法是什么?

忽略promise 错误的最简单和最安全的方法是使该错误无效。这种方法也是 ESLint 友好的。

await promise.catch(e => void e);
复制代码

⬆ 返回顶部 回到第400题


424.如何使用 CSS 设置控制台输出的样式?

您可以使用 CSS 格式内容说明符 %c 将 CSS 样式添加到控制台输出。控制台字符串消息可以附加在另一个参数中的说明符和 CSS 样式之后。让我们使用 console.log 和 CSS 说明符打印红色文本,如下所示,

console.log("%cThis is a red text", "color:red");
复制代码

还可以为内容添加更多样式。比如上面的文字可以修改font-size

console.log("%cThis is a red text with bigger font", "color:red; font-size
复制代码

⬆ 返回顶部 回到第400题


我已经写了很长一段时间的技术博客,这是我的一篇面试题文章。希望你们会喜欢!

更多相关文章及我的联系方式我放在这里:

github.com/wanghao221
gitee.com/haiyongcsdn…

如果你真的从这篇文章中学到了一些新东西,喜欢它,收藏它并与你的小伙伴分享。🤗最后,不要忘了❤或📑支持一下哦

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改