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({});
 }


目录
相关文章
|
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较高频知识点,可能不够完善,大家有兴趣可以留言补充,我会逐步完善,若发现哪里有错,还请多多斧正。