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

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

103.stopPropagation方法有什么用?

stopPropagation 方法用于阻止事件在事件链中向上冒泡。例如,以下带有 stopPropagation 方法的嵌套 div 在单击嵌套 div(Div1) 时可防止默认事件传播

 <p>Click DIV1 Element</p>
 <div onclick="secondFunc()">DIV 2
   <div onclick="firstFunc(event)">DIV 1</div>
 </div>
 <script>
 function firstFunc(event) {
   alert("DIV 1");
   event.stopPropagation();
 }
 function secondFunc() {
   alert("DIV 2");
 }
 </script>


104.return false 涉及哪些步骤?


事件处理程序中的 return false 语句执行以下步骤,


1.首先它停止浏览器的默认操作或行为。

2.它阻止事件传播 DOM

3.停止回调执行并在调用时立即返回。




105.什么是BOM(浏览器对象模型)?


浏览器对象模型 (BOM) 允许 JavaScript 与浏览器“对话”。它由作为窗口子项的对象导航器、历史记录、屏幕、位置和文档组成。浏览器对象模型不是标准化的,可以根据不同的浏览器而变化。



106.setTimeout有什么用?


setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。例如,让我们使用 setTimeout 方法在 2 秒后记录一条消息,


setTimeout(function(){ console.log("Good morning"); }, 2000);

1


107.setInterval有什么用?


setInterval() 方法用于以指定的时间间隔(以毫秒为单位)调用函数或计算表达式。例如,让我们使用 setInterval 方法在 2 秒后记录一条消息,


setInterval(function(){ console.log("Good morning"); }, 2000);

1


108.为什么 JavaScript 被视为单线程?


JavaScript 是一种单线程语言。因为语言规范不允许程序员编写代码以便解释器可以在多个线程或进程中并行运行其中的一部分。而像 java、go、C++ 这样的语言可以制作多线程和多进程程序。



109.什么是event delegation(事件委托)?


事件委托是一种侦听事件的技术,您可以委托一个父元素作为其内部发生的所有事件的侦听器。


例如,如果您想检测特定表单内的字段变化,您可以使用事件委托技术,


var form = document.querySelector('#registration-form');

// 听从表单内字段的更改

form.addEventListener('input', function (event) {

// 记录已更改的字段

console.log(event.target);

}, false);



110.什么是 ECMAScript?


ECMAScript 是构成 JavaScript 基础的脚本语言。ECMAScript 由 ECMA 国际标准组织在 ECMA-262 和 ECMA-402 规范中标准化。ECMAScript 的第一版于 1997 年发布。



111.什么是 JSON?


JSON(JavaScript Object Notation)是一种用于数据交换的轻量级格式。它基于 JavaScript 语言的一个子集,对象是在 JavaScript 中构建的。



112.JSON的语法规则是什么?


下面是 JSON 的语法规则列表


1.数据在名称/值对中

2.数据以逗号分隔

3.花括号容纳对象

4.方括号保存数组



113.JSON 字符串化的目的是什么?


向 Web 服务器发送数据时,数据必须采用字符串格式。您可以通过使用 stringify() 方法将 JSON 对象转换为字符串来实现此目的。


var userJSON = {'name': 'Haiyong', age: 31}

var userString = JSON.stringify(user);

console.log(userString); //"{"name":"Haiyong","age":31}"



114.你如何解析 JSON 字符串?


从 Web 服务器接收数据时,数据始终为字符串格式。但是您可以使用 parse() 方法将此字符串值转换为 javascript 对象。


var userString = '{"name":"Haiyong","age":31}';

var userJSON = JSON.parse(userString);

console.log(userJSON);// {name: "Haiyong", age: 31}



115.为什么需要 JSON?


在浏览器和服务器之间交换数据时,数据只能是文本。由于 JSON 仅为文本,因此它可以轻松地与服务器之间进行发送和发送,并可用作任何编程语言的数据格式。



116.什么是 PWA?


渐进式 Web 应用程序 (Progressive web applications) 是一种通过 Web 交付的移动应用程序,使用常见的 Web 技术(包括 HTML、CSS 和 JavaScript)构建。这些 PWA 部署到服务器上,通过 URL 访问,并由搜索引擎索引。



117.clearTimeout 方法的目的是什么?


javascript 中使用 clearTimeout() 函数来清除之前由 setTimeout() 函数设置的超时。即, setTimeout() 函数的返回值存储在一个变量中,并将其传递给 clearTimeout() 函数以清除计时器。


例如,下面的 setTimeout 方法用于在 3 秒后显示消息。可以通过 clearTimeout() 方法清除此超时。


<script>

var msg;

function greeting() {

   alert('Good morning');

}

function start() {

  msg =setTimeout(greeting, 3000);


}


function stop() {

    clearTimeout(msg);

}

</script>



118.clearInterval 方法的目的是什么?


javascript 中使用 clearInterval() 函数清除 setInterval() 函数设置的间隔。即, setInterval() 函数返回的返回值存储在一个变量中,并将其传递给 clearInterval() 函数以清除间隔。


例如,下面的 setInterval 方法用于每 3 秒显示一次消息。可以通过 clearInterval() 方法清除此间隔。


<script>

var msg;

function greeting() {

   alert('Good morning');

}

function start() {

  msg = setInterval(greeting, 3000);


}


function stop() {

    clearInterval(msg);

}

</script>



119.你如何在javascript中重定向新页面?


在 vanilla javascript 中,您可以使用locationwindow 对象的属性重定向到新页面。语法如下,


function redirect() {

   window.location.href = 'newPage.html';

}



120.你如何检查一个字符串是否包含一个子字符串?


有 3 种可能的方法来检查字符串是否包含子字符串,


1.使用 includes: ES6 提供的String.prototype.includes方法来测试字符串是否包含子字符串


var mainString = "hello", subString = "hell";

mainString.includes(subString)

1

2

2.使用 indexOf:在 ES5 或更旧的环境中,您可以使用String.prototype.indexOfwhich 返回子字符串的索引。如果索引值不等于 -1,则表示子字符串存在于主字符串中。


var mainString = "hello", subString = "hell";

mainString.indexOf(subString) !== -1


3.使用 RegEx:高级解决方案是使用正则表达式的测试方法( RegExp.test),它允许针对正则表达式进行测试


var mainString = "hello", regex = /hell/;

regex.test(mainString)



121.你如何在 javascript 中验证电子邮件?


您可以使用正则表达式在 javascript 中验证电子邮件。建议在服务器端而不是客户端进行验证。因为可以在客户端禁用 javascript。


function validateEmail(email) {

    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    return re.test(String(email).toLowerCase());

}


上面的正则表达式接受 unicode 字符。




122.你如何使用 javascript 获取当前 url?


您可以使用window.location.href表达式来获取当前的 url 路径,也可以使用相同的表达式来更新 URL。您也可以document.URL用于只读目的,但此解决方案在 FF 中存在问题。


console.log('location.href', window.location.href); // 返回完整 URL



123.location对象的各种url属性是什么?


以下Location对象属性可用于访问页面的 URL 组件,


1.href - 整个 URL

2.protocol - URL 的协议

3.host - URL 的主机名和端口

4.hostname - URL 的主机名

5.port - URL 中的端口号

6.pathname - URL 的路径名

7.search - URL 的查询部分

8.hash - URL 的锚点部分



124.如何在javascript中获取查询字符串值?


您可以使用 URLSearchParams 在 javascript 中获取查询字符串值。让我们看一个从 URL 查询字符串中获取客户端代码值的示例,


const urlParams = new URLSearchParams(window.location.search);

const clientCode = urlParams.get('clientCode');



125.如何检查对象中是否存在键?


您可以使用三种方法检查对象中是否存在键,


使用 in 运算符:无论对象中是否存在键,您都可以使用 in 运算符


"key" in obj

1

如果你想检查一个键是否不存在,记得使用括号,


!("key" in obj)

1

使用 hasOwnProperty 方法:您可以使用hasOwnProperty专门测试对象实例的属性(而不是继承的属性)


obj.hasOwnProperty("key") // true

1

使用未定义的比较:如果从对象访问不存在的属性,则结果是未定义的。让我们将属性与 undefined 进行比较以确定该属性的存在。


const user = {

  name: 'Haiyong'

};


console.log(user.name !== undefined);     // true

console.log(user.nickName !== undefined); // false



126.你如何循环或枚举 javascript 对象?


您可以使用for-in循环来循环遍历 javascript 对象。您还可以确保您获得的密钥是对象的实际属性,而不是来自使用hasOwnProperty方法的原型。


var object = {
     "k1": "value1",
     "k2": "value2",
     "k3": "value3"
 };
 for (var key in object) {
     if (object.hasOwnProperty(key)) {
         console.log(key + " -> " + object[key]); // k1 -> value1 ...
     }
 }


127.你如何测试一个空对象?


基于 ECMAScript 版本有不同的解决方案


使用对象条目(ECMA 7+):您可以使用对象条目长度和构造函数类型。


Object.entries(obj).length === 0 && obj.constructor === Object // Since date object length is 0, you need to check constructor check as well


使用对象键(ECMA 5+):您可以使用对象键长度和构造函数类型。


Object.keys(obj).length === 0 && obj.constructor === Object // Since date object length is 0, you need to check constructor check as well

1

将 for-in 与 hasOwnProperty(ECMA 5 之前)一起使用:您可以将 for-in 循环与 hasOwnProperty 一起使用。


function isEmpty(obj) {
   for(var prop in obj) {
     if(obj.hasOwnProperty(prop)) {
       return false;
     }
   }
   return JSON.stringify(obj) === JSON.stringify({});
 }


目录
相关文章
|
19天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
40 5
|
8天前
|
JavaScript 前端开发 测试技术
「一劳永逸」送你21道高频JavaScript手写面试题(上)
「一劳永逸」送你21道高频JavaScript手写面试题
36 0
|
1月前
|
设计模式 JavaScript 前端开发
最常见的26个JavaScript面试题和答案
最常见的26个JavaScript面试题和答案
44 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面试题巩固一下知识