前端开发面试经典试题

173 阅读7分钟

关于常见javasript的面试题

1. javascript的typeof返回那些数据类型?

stringnumberbooleanundefinedfunctionobject

2. 列举三种强制类型转换和两种隐式类型转换

强制:parseInt , parseFloat,number
隐式:number+stringif条件语句

3. split()和join()的区别

split 字符串转数组
join 数组转字符串

4. 数组方法pop(),push(),unshift(),shift()

pop()尾部删除,push() 尾部添加, unshift() 头部添加,shift()头部删除

5. Ajax get和post的区别

get拼在url里,post放在虚拟载体里 ,get大小有限制,get请求数据,post提交数据

6. ajax解析json字符串

json.parse()

7. 事件委托是什么

利用事件冒泡让作用在自身触发的事件由父元素代替执行;
事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。

8. 闭包是什么

闭包就是能读取其他函数内部变量的函数,使得函数不被gc回收,闭包过多容易导致内存泄漏

9. 如何阻止事件冒泡

ie: ev.cancelBubble = true; 非ie: ev.stopPropagation()

10. 如何阻止默认事件

return false ;  ev.preventDefault()

11. JS延迟加载的方式

deferasync ;动态创建dom,按需异步引入

12. 写一个获取非行间样式的函数

    function getStyle(obj,attr){       
     if(obj.currentStyle){       
         return obj.currentStyle[attr];       
           }else{            
           getComputedStyle(obj,false)[attr]         } 
              }

13. 获取页面所有的checkbox

var check = []for(const obj in arr){   
 if(obj.type == ‘checkbox’){   
  check.push(obj)    }
  } 

14. cookie在客户机上如何存储

  1. cookies就是服务器暂时存放在电脑里的文本文件,好让服务器用来辨认你的计算机。
    当你在浏览网站的时候,web服务器会先送一份资料放在你的计算机上,cookies会帮你在网站上所打的文字或是一些选择都记录下来,当你下次在访问同一个网站,web服务器会先看看有没有上次留下的cookies资料,有的话就根据cookie内容判断使用者,送出特定网页

15. 获取三个数中的最大值和最小值

 Math.max() //最大值  Math.min() //最小值 

16. javaScript是面向对象的,怎么体现javaScript的继承关系

使用prototype

17. from中的input可以设置为readonly和disabled,请问两者有什么区别

readonly 不可编辑,可以选择复制,
值可以传到后台disabled 不可编辑,
不能选择复制,值不能传到后台

18. 列举JavaScript的三种主要数据类型,2中复合数据类型,和两种特殊数据类型

主要数据类型:string number boolean
复合数据类型:function object
特殊数据类型:undefined null

19. ajax原理

(1)创建对象;(2)打开请求;(3)发送请求;(4)接受响应

20. 解释什么是json

(1)json是一种轻量级数据交换格式
(2)json独立于语言数据平台,json解析器和json库支持多种语言
(3)json语法表示三种类型 
 1. 值简单值(字符串,数值,布尔值,null);
 2. 数组;
 3. 对象

21. js中三种弹出消息提醒

1.alert;2.confirm;3.prompt

22. 浏览器的滚动距离

可视区域距离页面顶部的距离scrollTop =document.documentElement.scrollTop || document.body.scrollTop 

23. 可视区的大小

window.innerHeightwindow.innerWidth(不兼容IE)
document.documentElement.clientWidthdocument.documenElement.clientHeight(兼容IE)

24. 节点的类型有几种,分别是什么

1.元素节点:nodetype == 12.
属性节点:nodetype == 23.
文本节点:nodetype == 3

25. innerHtml和outerHtml的区别

innerHtml不包括自身outerHtml包括自身

26. 闭包的好处

1.希望一个变量长期驻扎在内存当中
2.避免全局变量的污染
3.私有成员的存在
4.安全性的提高

27. 冒泡排序算法

var array = [5,4,3,2,1]    var temp =0   
 for(var i =0 ;i < array.length ;i++){     
    for(var n = 0; n < array.length; n++){        
        if(array[n] > array[n+i]){          
              temp = array[n+i]              
                array[n+1] = array[n]                
                array[n] = temp        
                    }     
                   } 
                      }

28. js实现一个函数对JavaScript中的json对象进行克隆

    function(){       
     var obj = {id:123}     
        var newObj = JSON.parse(JSON.stringify(obj))   
          }

29. js实现一个函数,获取url参数

  function getQueryString(name){     
       var reg = new RegEXP("(^|&)" + name+ "=([^&]*)(&|$)","i");     
          var r = window.localtion.search.substr(1).match(reg);     
             if(r!=null) return unescape(r[2]); return null;   
              }

30. 写出三个使用this的典型应用

事件: onclick this -> 发生事件的对象构造函数:
this -> new 出来的objectcall/apply 改变this指向

31. 为什么利用多个域名来储存网站资源会更有效

确保用户在不同地区能用最快的速度打开网站,其中某个域名崩溃用户也能用其它域名访问

32. 请说出三种降低页面加载时间的方法

1.压缩js,css
2.合并js,css
3.外部js,css放在页面底部
4.减少dom操作

33. 文档类型的作用是什么,你知道多少种文档类型

影响浏览器对代码的编译渲染html2.0 xhtml html5

34. 标准模式和怪异模式的区别是什么

盒模型解释不同

35. 请解释什么是JavaScript的模块模式,并列举出实用案例

js模块化MVC seajs 命名空间

36. 你如何优化自己的代码

1.代码重用。
2.避免全局变量。
3.拆分函数避免函数过于臃肿。
4.注释

37. javaScript中的继承是如何工作的

子函数中执行父构造函数,并用call/apply改变this克隆父构造函数原型上的方法

38. dom事件委托的原理,有什么缺点

事件委托原理:事件冒泡机制
1.可以节省大量内存占用,减少事件注册
2.可以实现当新增子对象时,无需再对其进行事件绑定缺点:可能会出现事件误判

39. dom选择器的优先级以及权重值计算

行内样式  1000id 100类选择器,伪类选择器,属性选择器 10标签选择器 伪元素选择器 1通配符 子选择器 相邻选择器 0

40. vue数据双向绑定的原理

采用数据劫持,通过object.definePropety()劫持settergetter在数据变动时发送消息给订阅者,触发监听回调

41. 网页布局有哪几种

* 静态* 自适应* 流式布局* 响应式

42.左边宽度固定右边自适应

    body{        display:flex;    }  
      .left{        width:200px;        height:200px;    }   
       .right{        height:200px;        flex:1;    }

43.垂直水平居中

    body{        position:relative;    } 
       .box{  position:absolute; top:0; right:0;bottom:0;left:0;        margin:auto;    }

44.四种定位的区别

static是默认值absolute是绝对定位relative是相对定位fixed是根据视图定位

45.怎么判断两个对象相等

JSON.stringify(obj) == JSON.stringify(obj)

46.Vue router除了router-link实现跳转

router.go()router.push()

47.vue router 和 location.href有什么区别

router是虚拟路由,不刷新页面href是页面跳转,刷新页面

48.CSS margin重叠问题

外间距均为正数,会选择最大的外边距作为间距设置
display:inner-block不会出现重叠
position:absolute也不会重叠

49.cssx选择器优先级

id>类>标签>相邻>子选择器>后代选择器>属性>伪类

50.跨域相关

协议、域名、端口有一个不同都属于不同的域解决方案
  • 服务器设置响应头
  • jsonp
  • document.domain+iframe
  • window.name+iframe
  • window.postMessage

51.foreach和map的区别

  • 相同点

    • 都是循环遍历数组中每一项
    • 每次执行都支持三个匿名参数(item,index,arr)
    • 匿名函数中的this指向都是window
    • 只能遍历数组
    • 都有兼容问题
  • 不同点

    • map速度比foreach快
    • map会返回一个新数组,对原数组无影响,foreach不会产生新数组
    • map返回数组可以链式操作,foreach不能

喜欢文章的博友们,麻烦关注一波,你的一个关注,成就你我!!!

我的公众号

在这里插入图片描述
还请麻烦关注一波!!

创作挑战赛

新人创作奖励来咯,坚持创作打卡瓜分现金大奖