前端js面试题（基础） 怼烎@ 2022-05-26 04:44 190阅读 0赞 ###### 1、js中使用typeof能得到哪些类型？ ###### ——undefined、string、number、boolean、object、function ###### 2、===和==分别在何时使用？ ###### //==的使用情况为以下2种（其他情况下推荐使用===） if(obj.a == null){ //相当于obj.a === null || obj.a === undefined } function fn(a,b){ if(a == null）{ //a要先定义 } } ###### 3、js中哪些内置函数 ###### ——Object、Array、Boolean、Number、String、Function、Date、RegExp、Error ###### 4、js变量按照存储方式区分为哪些类型，并描述其特点 ###### —— 值类型：赋值不会相互干涉； 引用类型：是指针的赋值，都指向内存空间中的同一个对象，会相互干涉； ###### 5、如何理解json ###### ——js对象（有两个API ：JSON.stringify() 、JSON.parse()）和数据格式 ###### 6、如何准确判断一个变量是数组类型 ###### console.log(arr instanceof Array); ###### 7、写一个原型链继承的例子 ###### //DOM封装查询 function Elem(id){ this.elem = document.getElementById(id); } Elem.prototype.html = function(val){ var elem = this.elem; if(val){ elem.innerHTML = val; return this; }else{ return elem.innerHTML; } } Elem.prototype.on = function (type,fn){ var elem = this.elem; elem.addEventListener(type,fn); return this; } var div1 = new Elem('div1'); div1.html('<p>hello world</p>').on('click',function(){ alert('clicked'); }).html('<p>hello javascript</p>'); ###### 8、描述new一个对象的过程 ###### —— 1、创建一个新对象 2、this指向这个新对象 3、执行代码，即对this赋值 4、返回this ###### 9、说一下对变量提升的理解 ###### —— 变量定义； 函数声明（注意和函数表达式的区别） ###### ###### ###### 10、说明this几种不同的使用场景 ###### —— 1、作为构造函数执行 2、作为对象属性执行 3、作为普通函数执行 4、call、apply、bind **11、用js创建10个<a>标签，点击的时候弹出来对应的序号** var i; for(i=0;i<10;i++){ (function(i){ var a = document.createElement('a'); a.innerHTML = i + '<br>'; a.addEventListener('click',function(e){ e.preventDefault(); alert(i)； }); document.body.appendChild(a); })(i）； } ###### 12、如何理解作用域 ###### —— 自由变量 作用域链，即自由变量的查找 闭包的两个场景（返回函数、作为参数传递） ###### 13、实际开发中闭包的应用 ###### //闭包实际应用中主要用于封装变量，收敛权限 //Exp1 function F1(){ var a =100; return function(){ console.log(a); } } var f1 = F1(); function F2(fn){ var a = 200; fn() } F2(f1); //Exp2 function ifFirstLoad(){ var _list =[]; return function(id){ if(_list.indexOf(id)>=0){ return false; }else{ _list.push(id); return true; } } } var firstLoad = isFirstLoad(); firstLoad(10); //true firstLoad(10); //false **14、同步和异步的区别** ——同步会阻塞代码执行，而异步不会。 **15、setTimeout()** console.log(1); setTimeout(function(){ console.log(2); },1000); console.log(3); //1 3 2 **16、前端使用异步的场景有哪些** —— 1、setTimeout、setInverval 2、ajax请求、动态<img>加载 3、事件请求 （特点：都需要等待，由js是单线程语言所决定） **17、获取2018-4-26格式的日期** function formatDate(dt){ if(!dt){ dt = new Date(); } var year = dt.getFullYear(); var month = dt.getMonth() + 1; var date = dt.getDate(); if(month<10){ month = '0' + month; } if(date<10){ dae = '0' +date; } return year + '-' + month + '-' + date; } var dt = new Date(); var formatDate = formatDate(dt); console.log(formatDate); **18、获取随机数（要求长度一致的字符串格式）** var random = Math.random(); var random = random + '0000000000'; var random = random.slice(0,10); console.log(random); (Math.random():随时改变，清除缓存) **19、写一个能遍历对象和数组的通用的forEach函数** function forEach(obj,fn){ var key; if(obj instanceof Array){ obj.forEach(function(item,index){ fn(index,item); }); }else{ for(key in obj){ fn(key,obj[key]); } } } var arr = [1,2,3];//数组 forEach(arr,function(index,item){ console.log(index,item); }) var obj = {x:1,y:2};//对象 forEach(obj,function(key,val){ console.log(key,val); }) ###### 20、DOM是哪种基本的数据结构 ###### ——树 **21、DOM操作的常用API有哪些** —— 1、获取DOM节点，以及节点的property和Attribute 2、获取父节点，获取子节点 3、新增节点，删除节点 （<div><p></p></div>换行与不换行的div的子节点的数量是不一样的） **22、DOM节点的attr和property有何区别** —— property只是一个js对象的属性的修改 Attribute是对html标签属性的修改 **23、如何检查浏览器的类型** var ua = navigator.userAgent; var isChrome = ua.indexOf('Chrome'); console.log(isChrome); **24、拆解url的各部分** location.protocal //"https:" location.host //"blog.csdn.net" location.pathname //"/hannah1116" location.search //"" location.hash //"" location.href //"https://blog.csdn.net/hannah1116" ###### 25、编写一个通用的事件监听函数 ###### function bindEvent(elem,type,selector,fn){ if(fn == null){ fn = selector; selector = null; } elem.addEventListener(type,function(event){ var target; if(selector){ target = event.target; if(target.matches(selector)){ fn.call(target,event); }else{ fn(event); } } }); } //使用代理 var div1 = document.getElementById("div1"); bindEvent(div1,'click','a',function(event){ console.log(this.innerHTML); }); //不使用代理 var a = document.getElementById("a1"); bindEvent(div1,'click',function(event){ console.log(a.innerHTML); }); **26、描述事件冒泡流程** —— DOM树形结构 事件冒泡 阻止冒泡 **27、对于一个无限下拉加载图片的页面，如何给每个图片绑定事件** —— 使用代理：代码简洁；减少浏览器内存占用； **28、手动编写一个ajax，不依赖第三方库** var xhr = new XMLHttpRequest(); xhr.open("GET","/api",true); xhr.onreadystatechange = function(）{ if(xhr.readyState == 4){//客户端可以使用 if(xhr.status == 200){//表示成功处理请求 alert(xhr.responseText); } } } xhr.send(null); **29、跨域的几种方式** —— 1、CORS跨域资源共享 2、图像Ping 3、JSONP 4、Comet 5、服务器发送事件 6、Web Sockets **30、请描述一下cookie,sessionStorage和localStorage的区别** —— cookie：本身用于客户端和服务器端通信，但是有本地存储的功能 缺点：存储量太小，只有4KB;所有http请求都带着，会影响获取资源的效率；API简单，需要封装才能用document.cookie = …… localStorage和sessionStorage：HTML5专门为存储而设计 优点：最大容量为5M；API简单易用：loaclStorage.setItem(key,value);localStorage.getItem(key); 注意：iOS safari隐藏模式下：localStorage.getItem会报错；建议统一使用try-catch封装； 区别：容量、是否会携带到ajax中、API易用性 **31、上线流程和回滚的要点** —— 上线流程要点： （1）将测试完成的代码提交到git版本库的master分支 （2）将当前服务器的代码全部打包并记录版本号，备份 （3）将master分支的代码提交覆盖到线上服务器，生成新版本号 回滚流程要点： （1）将当前服务器的代码打包并记录版本号，备份 （2）将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号 **32、从输入url到得到html的详细过程** —— 1、浏览器根据DNS服务器得到域名的IP地址 2、向这个IP的机器发送HTTP请求 3、服务器收到、处理并返回HTTP请求 4、浏览器得到返回内容 ###### 33、window.onload和DOMContentLoaded的区别？ ###### —— window.onload：页面的全部资源加载完才可执行（包括图片、视频） DOMContentLoaded：DOM渲染完即可执行（此时图片、视频还没有加载完） **34、加载资源优化** —— 1、静态资源的压缩合并 2、静态资源缓存 3、使用CDN让资源加载更快 4、使用SSR后端渲染，数据直接输出到HTML中 **35、渲染优化** —— 1、CSS放前面，JS放后面 2、懒加载（图片懒加载、下拉加载更多） 3、减少DOM查询，对DOM查询做缓存 4、减少DOM操作，多个操作尽量合并在一起执行 5、事件节流 6、尽早执行操作（如DOMContentLoaded)
还没有评论，来说两句吧...