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

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

157.什么是正则表达式模式?


正则表达式提供一组模式以匹配字符。基本上它们分为3种类型,


1.括号:这些用于查找一系列字符。例如,下面是一些用例,


[abc]:用于查找括号(a,b,c)之间的任何字符

[0-9]:用于查找括号之间的任何数字

(a|b):用于查找以 | 分隔的任何选项

2.元字符:这些是具有特殊含义的字符例如,以下是一些用例,


\d:用于查找数字

\s:用于查找空白字符

\b:用于在单词的开头或结尾查找匹配项

3.量词:这些对于定义量很有用,例如,下面是一些用例,


n+:用于查找任何包含至少一个 n 的字符串的匹配项

n*:用于查找包含零次或多次出现的 n 的任何字符串的匹配项

n?:用于查找包含零次或一次 n 的任何字符串的匹配项



158.什么是 RegExp 对象?


RegExp 对象是一个具有预定义属性和方法的正则表达式对象。下面来看看 RegExp 对象的简单用法,


var regexp = new RegExp('\\w+');

console.log(regexp);

// 预期输出: /\w+/



159.如何在字符串中搜索模式?


您可以使用正则表达式的 test() 方法来搜索字符串中的模式,并根据结果返回 true 或 false。


var pattern = /you/;

console.log(pattern.test("How are you?")); //true


160.exec方法的目的是什么?


exec 方法的目的类似于 test 方法,但它执行搜索指定字符串中的匹配项并返回结果数组,或者 null 而不是返回 true/false。


var pattern = /you/;

console.log(pattern.exec("How are you?")); //["you", index: 8, 输出: "How are you?", groups: 未定义]


161.如何更改 HTML 元素的样式?


您可以使用 javascript 更改 HTML 元素的内联样式或类名


使用样式属性:您可以使用样式属性修改内联样式


document.getElementById("title").style.fontSize = "30px";

1

使用 ClassName 属性:使用 className 属性很容易修改元素类


 document.getElementById("title").className = "custom-title";

1


162.1+2+‘3’ 的结果是什么?


输出将是33. 由于1和2是数值,前两位数字的结果将是数值3。下一个数字是字符串类型值,因为数值3和字符串类型值3的相加只是一个串联值33。



163.什么是调试器语句?


调试器语句调用任何可用的调试功能,例如设置断点。如果没有可用的调试功能,则此语句无效。


例如,在下面的函数中插入了一个调试器语句。因此,

执行在调试器语句处暂停,就像脚本源中的断点一样。


function getProfile() {

// 代码在这里

debugger;

// 代码在这里

}


164.调试中断点的目的是什么?


一旦执行调试器语句并弹出调试器窗口,您就可以在 javascript 代码中设置断点。在每个断点处,javascript 将停止执行,并让您检查 JavaScript 值。检查值后,您可以使用播放按钮恢复代码的执行。



165.我可以使用保留字作为标识符吗?


不,您不能将保留字用作变量、标签、对象或函数名称。让我们看一个简单的例子,


var else = "hello"; // 未捕获的 SyntaxError: 意外的标记 else

1


166.你如何检测移动浏览器?


您可以使用正则表达式,它会根据用户是否使用手机浏览来返回 true 或 false 值。


window.mobilecheck = function() {

  var mobileCheck = false;

  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) mobileCheck = true;})(navigator.userAgent||navigator.vendor||window.opera);

  return mobileCheck;

};


167.如何在没有正则表达式的情况下检测移动浏览器?


您可以通过简单地运行设备列表并检查用户代理是否匹配任何内容来检测移动浏览器。这是 RegExp 使用的替代解决方案,


function detectmob() {
  if( navigator.userAgent.match(/Android/i)
  || navigator.userAgent.match(/webOS/i)
  || navigator.userAgent.match(/iPhone/i)
  || navigator.userAgent.match(/iPad/i)
  || navigator.userAgent.match(/iPod/i)
  || navigator.userAgent.match(/BlackBerry/i)
  || navigator.userAgent.match(/Windows Phone/i)
  ){
     return true;
   }
  else {
     return false;
   }
 }


168.你如何使用JS获取图像的宽度和高度?


您可以使用 Javascript 以编程方式获取图像并检查尺寸(宽度和高度)。


var img = new Image();
 img.onload = function() {
   console.log(this.width + 'x' + this.height);
 }
 img.src = 'https://ucc.alicdn.com/images/user-upload-01/20210427214255127.png';


169.如何进行同步 HTTP 请求?


浏览器提供了一个 XMLHttpRequest 对象,可用于从 JavaScript 发出同步 HTTP 请求


function httpGet(theUrl)
 {
     var xmlHttpReq = new XMLHttpRequest();
     xmlHttpReq.open( "GET", theUrl, false ); // 同步请求为 false
     xmlHttpReq.send( null );
     return xmlHttpReq.responseText;
 }


170.如何进行异步 HTTP 请求?


浏览器提供了一个 XMLHttpRequest 对象,该对象可用于通过将第三个参数传递为 true 来从 JavaScript 发出异步 HTTP 请求。


function httpGetAsync(theUrl, callback)
 {
     var xmlHttpReq = new XMLHttpRequest();
     xmlHttpReq.onreadystatechange = function() {
         if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
             callback(xmlHttpReq.responseText);
     }
     xmlHttp.open("GET", theUrl, true); // 异步为 true
     xmlHttp.send(null);
 }



171.你如何在javascript中将日期转换为另一个时区?


您可以使用 toLocaleString() 方法将一个时区中的日期转换为另一个时区。例如,让我们将当前日期转换为英式英语时区,如下所示,


console.log(event.toLocaleString('en-GB', { timeZone: 'UTC' })); //21/06/2021, 08:00:00



172.用于获取窗口大小的属性是什么?


您可以使用窗口、文档元素和文档正文对象的innerWidth、innerHeight、clientWidth、clientHeight 属性来查找窗口的大小。让我们使用这些属性的组合来计算窗口或文档的大小,


var width = window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;


var height = window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;


173.什么是javascript中的条件运算符?


条件(三元)运算符是唯一的 JavaScript 运算符,它采用三个操作数作为 if 语句的快捷方式。


var isAuthenticated = false;

console.log(isAuthenticated ? 'Hello, welcome' : 'Sorry, you are not authenticated');//Sorry, you are not authenticated

1

2


174.你能在条件运算符上应用chaining吗?


是的,您可以在条件运算符上应用chaining,类似于 if … else if … else if … else 链。语法如下,


function traceValue(someParam) {

    return condition1 ? value1

         : condition2 ? value2

         : condition3 ? value3

         : value4;

}


// 上述条件运算符等价于:


function traceValue(someParam) {

    if (condition1) { return value1; }

    else if (condition2) { return value2; }

    else if (condition3) { return value3; }

    else { return value4; }

}



175.页面加载后执行javascript的方式有哪些?


您可以在页面加载后以多种不同方式执行 javascript,


窗口.onload:


window.onload = function ...

1

文件加载:


document.onload = function ...

1

身体加载:


<body onload="script();">

1


176.proto 和 prototype有什么区别?


该__proto__对象是在查找链中用于解析方法等的实际对象。而当您使用 new 创建对象时prototype,用于构建__proto__的对象是


( new Employee ).__proto__ === Employee.prototype;

( new Employee ).prototype === undefined;



177.举个例子你最好使用分号


建议在 JavaScript 中的每个语句后使用分号。例如,在下面的情况下,由于缺少分号,它在运行时会抛出错误“… is not a function”。


// 定义一个函数

var fn = function () {

    //...

} // 此行缺少分号

// 然后在闭包中执行一些代码

(function () {

    //...

})();


它将被解释为


var fn = function () {

    //...

}(function () {

    //...

})();


在这种情况下,我们将第二个函数作为参数传递给第一个函数,然后尝试将第一个函数调用的结果作为函数调用。因此,第二个函数将在运行时因“…不是函数”错误而失败。



178.什么是freeze 方法?


reeze()方法用于冻结对象。冻结对象不允许向对象添加新属性,阻止删除和阻止更改现有属性的可枚举性、可配置性或可写性。即,它返回传递的对象并且不创建冻结副本。


const obj = {

  prop: 100

};


Object.freeze(obj);

obj.prop = 200; // 在严格模式下抛出错误


console.log(obj.prop); //100


注意:如果传递的参数不是对象,则会导致 TypeError。


179.freeze 方法的目的是什么?


以下是使用冻结方法的主要好处,


1.它用于冻结对象和数组。

2.它用于使对象不可变。



180.为什么我需要使用freeze 方法?


在面向对象的范式中,现有 API 包含某些不打算在当前上下文之外扩展、修改或重用的元素。因此,它final用作各种语言中使用的关键字。



181.你如何检测浏览器语言首选项?


您可以使用导航器对象来检测浏览器语言首选项,如下所示,


var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox

               navigator.language ||   // All browsers

               navigator.userLanguage; // IE <= 10


console.log(language);



182.如何使用javascript将字符串转换为标题大小写?


标题大小写意味着每个单词的第一个字母大写。您可以使用以下函数将字符串转换为标题大小写,


function toTitleCase(str) {

    return str.replace(

        /\w\S*/g,

        function(txt) {

            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();

        }

    );

}

toTitleCase("good morning csdn"); // Good Morning Csdn



183.你如何检测页面中禁用的javascript?


您可以使用该标签来检测 javascript 是否禁用。当 JavaScript 被禁用时,里面的代码块会被执行,并且通常用于在 JavaScript 生成页面时显示替代内容。


<script type="javascript">

    // JS相关代码放这里

</script>

<noscript>

    <a href="next_page.html?noJS=true">JavaScript is disabled in the page. Please click Next Page</a>

</noscript>



184.javascript支持的各种运算符有哪些?


运算符能够操纵(数学和逻辑计算)某个值或操作数。JavaScript 支持的各种运算符如下,


算术运算符:包括 +(加法)、–(减法)、*(乘法)、/(除法)、%(模数)、++(增量)和 – –(减量)

比较运算符:包括 ==(等于)、!=(不等于)、===(与类型相等)、>(大于)、>=(大于或等于)、<(小于)、<= (小于或等于)

逻辑运算符:包括 &&(逻辑与)、||(逻辑或)、!(逻辑非)

赋值运算符:包括 =(赋值运算符)、+=(加法和赋值运算符)、–=(减法和赋值运算符)、*=(乘法和赋值)、/=(除法和赋值)、%=(模块和赋值) )

三元运算符:它包括条件(:?)运算符

typeof 运算符:用于查找变量的类型。语法看起来像typeof variable


185.什么是rest 参数?


Rest 参数是一种处理函数参数的改进方法,它允许我们将无限数量的参数表示为数组。语法如下,


function f(a, b, ...theArgs) {

  // ...

}


例如,让我们举一个 sum 示例来计算动态参数数量,


function total(…args){

let sum = 0;

for(let i of args){

sum+=i;

}

return sum;

}

console.log(fun(1,2)); //3

console.log(fun(1,2,3)); //6

console.log(fun(1,2,3,4)); //13

console.log(fun(1,2,3,4,5)); //15


注意:在 ES2015 或 ES6 中添加了 Rest 参数


186.如果不使用 rest 参数作为最后一个参数会发生什么?


rest 参数应该是最后一个参数,因为它的工作是将所有剩余的参数收集到一个数组中。例如,如果你定义一个像下面这样的函数,它没有任何意义并且会抛出一个错误。


function someFunc(a,…b,c){

//你的代码在这里

return;

}



187.什么是 JavaScript 中可用的按位运算符?


下面是 JavaScript 中使用的按位逻辑运算符列表


1.按位与 ( & )

2.按位或 ( | )

3.按位异或 (^)

4.按位非 ( ~ )

5.左移 (<<)

6.符号传播右移 ( >> )

7.零填充右移 ( >>> )



188.什么是spread operator(展开运算符)?


展开运算符允许将可迭代对象(数组/对象/字符串)扩展为单个参数/元素。让我们举个例子来看看这个行为,


function calculateSum(x, y, z) {

  return x + y + z;

}


const numbers = [1, 2, 3];


console.log(calculateSum(...numbers)); // 6

1

2

3

4

5

6

7


189.你如何确定对象是否被冻结?


Object.isFrozen() 方法用于确定对象是否被冻结。如果以下所有条件都成立,则对象被冻结,


1.如果不能扩展。

2.如果它的所有属性都是不可配置的。

3.如果它的所有数据属性都是不可写的。用法如下,


const object = {

   property: 'Welcome JS world'

};

Object.freeze(object);

console.log(Object.isFrozen(object));

1

2

3

4

5


190.你如何确定两个值相同或不使用对象?


Object.is() 方法确定两个值是否相同。例如,不同类型值的用法是,


Object.is('hello', 'hello');     // true

Object.is(window, window);   // true

Object.is([], []) // false

1

2

3

如果以下条件之一成立,则两个值相同:


1.两者都未定义

2.都为空

3.都是真的还是假的

4.相同长度的两个字符串以相同的顺序具有相同的字符

5.两个相同的对象(意味着两个对象具有相同的引用)

6.两个数字和两个 +0 两个 -0 两个 NaN 都是非零和都不是 NaN 并且两者都具有相同的值。



191.使用Object 的 is方法的目的是什么?


Object 的 is 方法的一些应用如下,


1.它用于比较两个字符串。

2.它用于比较两个数字。

3.它用于比较两个数字的极性。

4.它用于比较两个对象。



192.如何将属性从一个对象复制到另一个对象?


您可以使用 Object.assign() 方法将值和属性从一个或多个源对象复制到目标对象。它返回具有从目标对象复制的属性和值的目标对象。语法如下,


Object.assign(target, ...sources)

1

让我们以一个源和一个目标对象为例,


const target = { a: 1, b: 2 };

const source = { b: 3, c: 4 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 3, c: 4 }

console.log(returnedTarget); // { a: 1, b: 3, c: 4 }


正如在上面的代码中所观察到的,b从源到目标有一个共同的 property( ),因此它的值已被覆盖。




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