当前位置: 首页 > Web前端 > HTML

36道JS面试题助你金九银10

时间:2023-04-02 12:13:15 HTML

来源:javapoint以前好评文章的分类,也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。回馈各位读者,文末送5份《你不知道 的 JavaScript 上劵》下周一抽奖,祝大家好运!https://mp.weixin.qq.com/s/A5...1.let和const在JS中有什么用?在现代js中,let和const是创建变量的不同方式。在早期的js中,我们使用var关键字来创建变量。ES6版本引入了let&const关键字,目的是在js中创建两种不同类型的变量,一种是不可变的,一种是可变的。const:用于创建不可变变量。不可变变量是其值在程序的整个生命周期中都不会改变的变量。let:let用于创建一个可变变量,它是一个像var一样的普通变量,可以更改任意次。2、JS中的错误主要有哪些JS中的错误分为三种类型:加载错误:加载网页时出现的错误(如语法错误)称为加载错误,它是动态产生错误的。运行时错误:由于滥用HTML语言中的命令而导致的错误。逻辑错误:这些错误是在不同操作的函数上执行了错误的逻辑导致的3.如何通过类名获取dom元素在JS中使用document.getElementsByClassName()方法获取类名元素。4、什么是JS的作用域链及其作用?通常,变量的值取自创建该变量的函数的作用域。但是,如果在当前作用域中没有找到值,则会在上层作用域中检查,直到找到全局作用域。这样一个搜索过程形成的链称为作用域链。JS中的作用域链主要用来解析变量的值。如果没有这个,很多变量定义在不同的作用域中,JS很难为一个变量选择一个特定的值。5.解释JS中的MUL函数。MUL表示数字的简单乘法。在这种技术中,一个值作为参数传递给返回另一个函数的函数,第二个值传递给该函数,然后重复该过程。例如:x*y*z可以表示为functionmul(x){returnfunction(y){returnfunction(z){returnx*y*z;}}}6.用纯JS写程序实现字符反转字符串使用内置函数:内置函数reverse()直接对字符串进行反转。str="jQuery";str=str.split("")str=str.reverse()str=str.join("")alert(str);先把字符串拆分成一个数组,然后把这个数组倒过来,把最近的字符拼接成一个字符串。使用循环:首先,计算字符串中的字符数,然后对从最后一个字符开始的原始字符串应用递减循环,并打印每个字符,直到计数变为零。7.如何在JS中将一个页面重定向到另一个页面?使用location.href:window.location.href="https://www.onlineinterviewquestions.com/"使用location.replace:window.location.replace("https://www.onlineinterviewquestions.com/;");8.列举一些JS中的设计模式:设计模式是软件设计中常见问题的通用可重用解决方案,以下是一些设计模式:创建模式:该模式抽象了对象实例化过程。结构模式:这些模式处理不同的类和对象以提供新功能。行为模式:也称为发布-订阅模式,定义了一个被观察对象与多个观察者之间的一对多对象关系。并行设计模式:这些模式处理多线程编程范例。架构设计模式:这些模式用于处理架构设计。9.JS中的Array.splice()和Array.slice()方法有什么区别?话不多说,先看第一个例子:vararr=[0,1,2,3,4,5,6,7,8,9];//设置一个数组console.log(arr.slice(2,7));//2,3,4,5,6console.log(arr.splice(2,7));//2,3,4,5,6,7,8//由此我们简单猜测两个函数参数的含义,slice(start,end)的第一个参数表示起始位置,第二个表示截取位置位置(不包括这个位置)splice(start,length)第一个参数开始位置,第二个参数截取长度然后看第二个:varx=y=[0,1,2,3,4,5,6,7,8,9]console.log(x.slice(2,5));//2,3,4console.log(x);[0,1,2,3,4,5,6,7,8,9]原数组没有变化//然后用同样的方法测试spliceconsole.log(y.splice(2,5));//2,3,4,5,6console.log(y);//[0,1,7,8,9]表示原数组中的值已经被消去。虽然slice和splice都是截取数组对象,但是两者还是有明显区别的。函数参数slice和splice第一个参数是截取的起始位置,slice的第二个参数是截取的结束位置(不包含),splice的第二个参数(表示从起始截取的长度position),slice不会改变原数组,splice会直接移除原数组中截取的数据!10.如何在JS中动态增删对象属性?我们可以使用object.property_name=value为对象添加属性,deleteobject.property_name用于删除属性。例如:letuser=newObject();//添加一个属性user.name='Anil';user.age=25;console.log(user);deleteuser.age;console.log(user);11.解释什么是承诺?promise是js中的一个对象,它产生一个值,将来可能产生一个结果。该值可以是已解析的值或未解析该值的原因。Promise可以有三种状态:pending:初始状态,既不成功也不失败fulfilled:表示操作完全成功rejected:表示操作失败处于等待状态的promise对象可以在成功后返回一个值,也可以在成功后带回一个值failureError当这两种情况发生时,handler函数将被排队等待执行,然后调用then方法。大家都说简历里没项目可写,所以给大家找了一个项目,还给了一个【搭建教程】。我和阿里云服务器合作,优惠价格比较便宜:89/年,223/3年,比学生便宜9.9/月,买了建了一个项目,熟悉技术栈比较香(老用户可以买用他们的家庭账户,我用我妈妈的)推荐购买三年的便宜货,点击本文查看。12、数组去重有哪些方法1、使用setfunctionuniquearray(array){letunique_array=Array.from(set(array))returnunique_array;}2、使用filterfunctionunque_array(arr){letunique_array=arr.filter(函数(elem,index,self){returnindex==self.indexOf(elem);})返回unique_array;}console.log(unique_array(array_with_duplicates));3.使用for循环Arraydups_names=['Ron','Pal','Fred','Rongo','Ron'];functiondups_array(dups_names){letunique={};名字。forEach(function(i){如果(!unique[i]){unique[i]=true;}});returnObject.keys(unique);}//Ron,Pal,Fred,RongoDups_array(names);13.undefined、null和undeclared有什么区别?1.null表示“无对象”,即这里不应该有值,转为值时为0。典型的用法是:(1)作为函数的参数,表示函数的参数不是对象。(2)作为对象原型链的终点。2.undefined表示“缺失值”,即这里应该有一个值,但是还没有定义,转换成一个值就是NaN。典型的用法是:(1)当一个变量被声明但没有赋值时,等于undefined。(2)调用函数时,应该提供的参数没有提供,参数等于undefined。(3)对象没有赋值属性,该属性的值未定义。(4)当函数没有返回值时,默认返回undefined。3.undeclared:js语法错误,没有声明直接使用,js找不到对应的context。14.列出JS原始数据类型和非原始数据类型的一些区别?1、目前JS中有6种基本数据类型:Undefined、Null、Boolean、Number、Symbol和String。还有一种复杂的数据类型——Object,Object本质上是由一组无序的名值对组成的。Object、Array和Function是引用类型。2.基本数据类型是不可变的,非基本数据类型是可变的。3.原始数据类型是不可变的,因为它们一旦创建就不能改变,但是非原始数据类型是刚性的,这意味着一旦创建了一个对象,它就可以改变。4.原始数据类型与其值进行比较,意思是两个值如果是相同的数据类型并且具有相同的值则严格相等。5.非基本数据类型不与值进行比较。例如,如果两个对象具有相同的属性和值,则它们严格不相等。15.如何向现有函数添加新属性向现有函数添加新属性很容易,只需为现有函数赋值即可。例如,已有一个对象person,下面的代码用于给person增加新的属性:person.country="India";16、JS中深拷贝和浅拷贝有什么区别?深拷贝递归地拷贝新对象中的所有值或属性,而拷贝只拷贝引用。在深拷贝中,新对象的改变不会影响原对象,而在浅拷贝中,新对象的改变也会影响原对象。在深拷贝中,原始对象与新对象不共享相同的属性,而在浅拷贝中,它们具有相同的属性。17.如何在JavaScript中每隔x秒调用一个函数在JS中,我们使用函数setInterval()来每隔x秒调用一个函数。如:setInterval(function(){alert("Hello");},3000);18.解释一下JS的展开运算符?扩展运算符扩展了一个表达式,其中需要多个参数/变量/元素,它使用三个点(...)。例如:varmid=[3,4];varnewarray=[1,2,...mid,5,6];控制台日志(新数组);//[1,2,3,4,5,6]19.JS中的宿主对象和原生对象有什么区别?宿主对象:这些是运行时环境提供的对象。这意味着它们在不同的环境中是不同的。例如,浏览器包含窗口这样的对象,但是Node.js环境提供了节点列表这样的对象。本机对象:这些是JS中的内置对象。它们也被称为全局对象,因为内置对象如果使用JS则不受运行环境的影响。20.解释JS中的高阶函数?高阶函数是JS函数式编程的最佳特性。它是一个函数,它接受一个函数作为参数并返回一个函数作为结果。一些内置的高阶函数有map、filter、reduce等。21.JS中==和===有什么区别?1.对于string、number等基本类型,==和===是有区别的1)不同类型之间的比较,==比较“转换成同一类型的值”,看“值”是否是相等,===如果类型不同,结果不相等。2)同类型比较,直接进行“值”比较,两者结果相同。2、对于Array、Object等高级类型,对于“指针地址”的比较,==和===没有区别。3、基本类型和高级类型有区别,==和===1)对于==,高级类型转换为基本类型,进行“值”比较。2)因为类型不同,===结果为false。22.什么是JS中的匿名函数?匿名函数:就是没有函数名的函数,如:(function(x,y){alert(x+y);})(2,3);这里创建了一个匿名函数(第一个括号内),第二个括号用于调用匿名函数并传入参数。23.JS可以做301重定向吗?JS完全运行在客户端。301是服务器发送的响应代码。所以不可能在JS中进行301重定向。24.解释JS中的事件冒泡和事件捕获事件捕获和冒泡:在HTMLDOMAPI中,有两种事件传播的方法,它们决定了接收事件的顺序。这两种方法是事件冒泡和事件捕获。第一种方法事件冒泡将事件定向到其预期目标,第二种方法称为事件捕获,其中事件向下传播到元素。事件捕捉捕捉过程很少用到,但一旦用到,就证明非常有用。此过程也称为涓流模式。在这个过程中,事件首先被最外层元素捕获,然后传播到最内层元素。例如:

从上面的例子来看,假设点击事件发生在li元素中,此时捕获事件会先处理div,再对ul进行处理,最后命中目标元素li。事件冒泡冒泡的工作原理类似于冒泡,事件由最内层元素处理,然后传播到外层元素。
从上面的例子来看,假设冒泡模型中的li元素确实发生了click事件,那么该事件会先由li处理,然后由ul处理,最后由div元素处理。24.如何将一个文件的所有导出作为一个对象?import*asobjectnamefrom'./file.js'用于将所有导出的成员导入为对象。可以使用对象的点(.)运算符访问导出的变量或方法,如:objectname.member1;对象名.member2;对象名.memberfunc();25.解释什么是箭头函数?箭头函数是在es6或更高版本中编写函数表达式的一种简洁方式。箭头函数不能用作构造函数,也不支持this、arguments、super或new.target关键字,最适合非方法函数。通常,箭头函数看起来像constfunction_name=()=>{}。constgreet=()=>{console.log('hello');}greet();25解释函数在JS中的提升JS中允许将声明移动到顶部的默认行为称为提升。JS中创建函数的两种方式是函数声明和函数表达式。函数声明带有特定参数的函数称为函数声明,在JS中创建变量称为声明。如:吊装();//logs"foo"functionhoisted(){console.log('foo');}函数表达式当使用表达式创建函数时,它们被称为函数表达式。如:notHoisted();//类型错误:notHoisted不是函数varnotHoisted=function(){console.log('bar');};26.module.exports和exports有什么区别?module和exports是Node.js内置到每个js文件中的两个对象。可以通过console.log(module)和console.log(exports)打印出来。如果你在main.js中写了下面两行,那么运行$nodemain.js:console.log(exports);//output:{}console.log(module);//output:Module{...,exports:{},...}(注:...表示省略其他一些属性)我们从打印中可以看出,module.exports和exports一开始都是一个空对象{}。事实上,这两个对象指向同一块内存。这意味着module.exports和exports是等价的(有一个前提:不要改变它们指向的内存地址)。例如:exports.age=18和module.export.age=18,这两种写法是一致的(都相当于在初始的空对象{}上加了一个属性,通过require得到的结果是{age:18})。27.什么是进出口?import和exports帮助我们编写模块化的JS代码。使用导入和导出,我们可以将代码拆分到多个文件中。import只允许访问文件的某些特定变量或方法。可以导入模块导出的方法或变量。//index.jsimportname,agefrom'./person';控制台日志(名称);控制台日志(年龄);//person.jsletname='Sharad',occupation='developer',age=26;导出{姓名,年龄};28.列出一些单元测试框架下面列出一些最流行的JS单元测试框架:Unit.jsJasmineKarmaChaiAVAMochaJSUnitQUnitJest框可用,即:AlertConfirmPrompt30。如何将JS日期转换为ISO标准toISOString()方法用于将js日期转换为ISO标准。它使用ISO标准将jsDate对象转换为字符串。如:vardate=newDate();varn=date.toISOString();console.log(n);//YYYY-MM-DDTHH:mm:ss.sssZ31。如何在JS中克隆对象Object.assign()方法用于在JS中克隆对象。如:varx={myProp:"value"};vary=Object.assign({},x);32.如何在JS中进行编码和解码URLencodeURI()函数用于在JS中对URL进行编码。它以url字符串作为参数并返回编码后的字符串。注意:encodeURI()不会像这样编码字符:/?:@&=+$#,如果需要对这些字符进行编码,请使用encodeURIComponent()。用法:varuri="myprofile.php?name=sammer&occupation=pāntiNG";varencoded_uri=encodeURI(uri);decodeURI()函数用于在js中对URL进行解码。它以编码后的url字符串为参数,返回解码后的字符串,用法:varuri="myprofile.php?name=sammer&occupation=pāntiNG";varencoded_uri=encodeURI(uri);decodeURI(encoded_uri);33。BOM与DOM的关系BOM的全称是BrowserObjectModel,即浏览器对象模型,主要处理浏览器窗口和框架。DOM的全称是DocumentObjectModel,即文档对象模型。它是HTML和XML的应用程序接口(API)。它遵循W3C标准和所有浏览器遵循的标准。JS通过访问BOM(BrowserObjectModel)对象来访问、控制和修改客户端(浏览器)。由于BOM的window包含了document,可以直接使用和感知window对象的属性和方法,所以可以直接使用window对象的document属性来访问、检索、修改其中的内容和结构XHTML文档通过document属性。因为文档对象是DOM的根节点。可以说BOM包含了DOM(对象),浏览器提供了对BOM对象的访问,然后从BOM对象中访问DOM对象,这样js就可以操作浏览器和浏览器读取的文档了。34.JS中的substr()和substring()函数有什么区别?substr()函数的形式是substr(startIndex,length)。它从startIndex返回子字符串并返回'length'个字符。vars="hello";(s.substr(1,4)=="ello")//truesubstring()函数的形式为substring(startIndex,endIndex)。它返回从startIndex到endIndex-1的子字符串。vars="hello";(s.substring(1,4)=="ell")//true35。解释“使用严格”?“usestrict”是es5中引入的一条js指令。使用“usestrict”指令的目的是在严格模式下强制执行代码。在严格模式下,我们不能在不声明变量的情况下使用变量。早期版本的js忽略了“usestrict”。36.解释一下JS的事件委托模型?在JS中,有一些很酷的东西。其中之一是委托模型。在捕获和冒泡时,允许一个函数在特定时间对多个元素实现一个处理程序,这称为事件委托。事件委托允许将事件监听器添加到父节点而不是指定节点。这个特定的侦听器分析冒泡事件以匹配子元素。原文:https://www.javatpoint.com/ja...代码部署后可能出现的bug无法实时获知。之后为了解决这些bug,花费了大量的时间在日志调试上。顺便在这里推荐给大家。一个简单易用的BUG监控工具Fundebug。干货交流系列文章总结如下。我觉得点个Star就好了。欢迎加群,互相学习。https://github.com/qq44924588...我是小智,公众号《大招天下》的作者,前端技术爱好者。我会经常分享自己学习看到的干货,在进步的路上互相鼓励!关注公众号,后台回复福利,就能看到福利,你懂的。