前端面试题整理-JS

JS

1. For-in、Object.keys、Object.getOwnPropertyNames、Object.getOwnPropertySymbols、Reflect.ownKeys区别

   For-in:遍历自身和继承的可枚举属性，不含Symbol属性。

   Object.keys（obj）：返回数组，包含对象自身（不含继承）的可枚举属性，不含Symbol属性

   Object.getOwnPropertyNames返回数组，包含对象自身全部属性，包括不可枚举，不含Symbol

   Object.getOwnPropertySymbols(obj)返回数组，包含对象自身的全部Symbol

   Reflect.ownKeys（obj）：返回数组，包含对象自身的全部属性，无论是否枚举，Symbol或字符串

2. 判断数据类型的方法

   instanceof只能判断两个对象是否属于实例关系，而不能判断一个对象实例具体属于哪一种类型

   constructor不能判断null和undefined，当开发者重写prototype后constructor会默认为object

   type of 对null，array，object的返回值都是object

   Objet.prototype.toString.call(obj)能够正确判断出数据类型（string,number,boolean,undefined,null,object,array,function）

3. 说说写JavaScript的基本规范？

   • 不要在同一行声明多个变量。
   • 请使用 ===/!==来比较true/false或者数值
   • 使用对象字面量替代new Array这种形式
   • 不要使用全局函数。
   • Switch语句必须带有default分支
   • 函数不该该有时候有返回值，有时候没有返回值。
   • For循环必须使用大括号
   • If语句必须使用大括号
   • for-in循环中的变量 应该使用var关键字明确限定做用域，从而避免做用域污染。

4. JavaScript原型，原型链 ? 有什么特色？

   JS中每一个函数都存在有一个原型对象属性prototype。而且全部函数的默认原型都是Object的实例。

   每一个继承父函数的子函数的对象都包含一个内部属性_proto_。该属性包含一个指针，指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程当中就造成了原型链。

   原型链实现了继承。原型链存在两个问题：a 包含引用类型值的原型属性会被全部实例共享。b 在建立子类型时，没法向超类型的构造函数中传递参数。特色：JavaScript对象是经过引用来传递的，咱们建立的每一个新对象实体中并无一份属于本身的原型副本。当咱们修改原型时，与之相关的对象也会继承这一改变。当咱们须要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 若是没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。

5. JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？

   栈：原始数据类型（先入后出），由编译器自动分配释放，一级缓存，调用完毕当即释放

   堆：引用数据类型（利用彻底二叉树结构维护数据，时间复杂度为o(logn)），由程序员分配释放，二级缓存，垃圾回收

   彻底二叉树：除了最后一层树全满，最后一层全部节点连续集中在最左边。上浮、下沉、插入、弹出

   详细介绍

6. Javascript如何实现继承？

   使用原型链。subtype.prototype=new supertype()

   使用构造函数。function(){supertype.call(this)}

   组合继承

   具体示例

7. Javascript建立对象的几种方式？

   构造函数、对象字面量、原型模式、object.create()

8. Javascript做用链域?

   做用域链是函数被建立的做用域中对象的集合。做用域链能够保证对执行环境有权访问的全部变量和函数的有序访问。

   做用域链的最前端始终是当前执行的代码所在环境的变量对象（若是该环境是函数，则将其活动对象做为变量对象），下一个变量对象来自包含环境，全局执行环境的变量对象始终是做用域链中的最后一个对象。

9. 谈谈this对象的理解。

   this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，对象函数调用，哪一个对象调用就指向哪一个对象，使用 new 实例化对象，在构造函数中的this指向实例化对象

10. eval是作什么的？

    把字符串参数解析成JS代码并运行，并返回执行的结果。

    应该避免使用eval，不安全，很是耗性能（2次，一次解析成js语句，一次执行）。

11. 什么是window对象? 什么是document对象?

    window是顶层对象，而不是另外一个对象的属性，是浏览器的窗口。

    document是window和frames对象的一个属性，是显示于窗口或框架内的一个文档。

12. ["1", "2", "3"].map(parseInt) 为何为[1,NaN,NaN]?

    .map传值时，以parseInt(value,index,array)传入

    parseInt('1',0,[1,2,3])=1,由于进制位为0时以十进制转换。

    parseInt('2',2,[1,2,3])=NaN,由于进制位为低于数值。

    parseInt('3',2,[1,2,3])=NaN,由于进制位为低于数值。

13. 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

    事件流是从页面中接受事件的顺序，分为冒泡流和捕获流。事件冒泡是从最具体的元素接收，逐级向上传播。事件捕获是从上级节点开始，逐步到最具体的节点。

    IE是冒泡流，火狐同时支持冒泡流和捕获流。

    组织事件冒泡：e.stopPropagation()，IE使用e.cancelBuddle = true

14. js正常模式和严格模式有什么不一样？

    正常模式中，变量没有声明就赋值会默认为全局变量，严格模式禁止。

    严格模式this禁止指向全局，使用构造函数不加new会报错。

    严格模式通常禁止删除变量，只有configurable设置为true才可删除。

    严格模式对象不能有重名属性，正常模式能够。

    严格模式不能有重名参数，正常模式能够。

15. new操做符具体干了什么呢?

    建立一个空对象，设置原型链，让构造函数中的this指向建立的空对象，若是构造函数返回值类型，返回obj，若是构造函数返回引用类型，返回这个引用类型的对象。

16. Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

    hasOwnProperty

17. JSON

    Json有对象和数组两种格式，对象调用key,数组调用经过索引值。json转字符串使用JSON.stringify，字符串转对象用JSON.parse

18. js延迟加载的方式有哪些？

    defer属性、async属性、动态建立、jquery的getScript（）

19. Ajax 是什么? 如何建立一个Ajax？

    Ajax：请求数据的一种方式

    var xml = new XMLHttpRequest()
    xml.open('post',url,false)
    xml.send()
    xml.onreadystatechange=function () {
      if(xml.readyState === 4 && xml.status == 200){
        console.log(xml.responseText)
      }
    }

    0: 请求未初始化

    1: 服务器链接已创建

    2: 请求已接收

    3: 请求处理中

    4: 请求已完成，且响应已就绪

20. 页面编码和被请求的资源编码若是不一致如何处理？

    给请求的资源设置charset

21. 服务器代理转发时，该如何处理cookie？

    服务器代理转发时，能够根据set-cookie的path属性设置cookie有效路径实现是否发送cookie

22. 模块化开发怎么作？

    模块化开发是为了解决多人合做项目时，使用同一个变量名等形成的冲突，以及项目依赖文件等引用顺序。

    模块化开发使代码耦合度下降，以最少的模块、零部件知足更多的个性需求，更方便地使用别人的代码。

    模块化开发分为服务端规范和浏览器规范。

    服务器端规范：CommonJS ：nodejs

    浏览器端规范：AMD：RequireJS，对于依赖提早执行，依赖前置，API一个当多个用，模块加载完成后立刻执行，用户体验好

    CMD：SeaJS，对于依赖延后执行，依赖就近，API严格区分，职责单一，模块加载完成后没有当即执行而是等到require再执行，性能好

    使用模块式开发：页面A引入js1，调用js1中的方法。js1引入js2，调用js2中module.export的方法，以此类推

    AMD和CMD须要使用export和import，可是浏览器没有彻底支持，所以须要使用babel。实现这个转换到有browserify和webpack（gulp+browserify , node+webpack）

    CommonJS规范：若是在a.js使用b.js，必定要在a.js中require（'b.js'），在b.js中提供module.exports

    CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

    浏览器不兼容CommonJS是由于缺乏module 、exports、require、global四个变量

    Browserify可以转换export、import是由于将全部模块放入一个数组，id为模块编号，source是模块的源码，deps是模块的依赖。

    因为require是同步的，必须等上行代码加载完成后才能执行，服务器端不是问题，浏览器端须要使用异步，产生了AMD。所以，CommonJS主要是为了js再后端的表现制定的，AMD主要为前端js制定规范。

    AMD的require须要两个参数，module和callback。require([module],callback)

    RequireJS的诞生是为了实现js文件异步加载，避免网页失去响应，与管理模块间的依赖性。

    CMD：define(function(require,exports,module){...});

23. requireJS的核心原理是什么？（如何动态加载的？如何避免屡次加载的？如何 缓存的？）

    核心是js的加载模块，经过正则匹配模块以及模块的依赖关系，保证文件加载的前后顺序，根据文件的路径对加载过的文件作了缓存

24. 谈一谈你对ECMAScript6的了解？

    ES6时js的下一代标准，规定js的使用规范

    Let、const (暂时性死区)、变量解构、startsWith等函数、promise

25. .call() 和 .apply() 的做用和区别？

    .call(func,data1,data2…)

    .apply(func,[data1,data2…])

26. 数组和对象有哪些原生方法，列举一下？

    数组：concat、join、sort、push

    对象：map、each、tostring

27. 如何编写高性能的Javascript？

    • 不要用for-in访问数组，能够用for-in访问对象
    • 将耗费资源的DOM访问进行缓存（定义变量保存数组长度）
    • 不要再函数内使用多个if嵌套
    • 避免循环，防止内存泄漏
    • 避免返回未声明

28. 哪些操做会形成内存泄漏？

    意外的全局变量（未声明便赋值的变量）、闭包、没有清理的DOM元素引用、被遗忘的setInterval、子元素存在引发内存泄漏

29. JQuery的实现原理？

    采用构造函数进行开发，jquery是一个类，将经常使用方法定义在jquery.prototype上

30. jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

    实现原理：将后面的对象合并到前面的对象。

    当第一个参数为true时实现深拷贝，会在第一个对象上进行递归的合并。

    当第一个参数为false时实现浅拷贝，会用第二个对象相同的key值重写一个属性，值不会被合并。

    浅拷贝：只拷贝对象数据的引用，新旧数据没有彻底分离，还会互相影响。

    function shallowCopy( target ){
      if(typeof target !== 'object') return ;
      //判断目标类型，来建立返回值
      var newObj = target instanceof Array ? [] : {};
     
      for(var item in target){
        //只复制元素自身的属性，不复制原型链上的
        if(target.hasOwnProperty(item)){
          newObj[item] = target[item]
        }
      }
      return newObj
    }

    深拷贝：新旧数据彻底分离，互不影响

    function deepCopy( target ){
      if(typeof target !== 'object') return ;
      //判断目标类型，来建立返回值
      var newObj = target instanceof Array ? [] : {};
     
      for(var item in target){
        //只复制元素自身的属性，不复制原型链上的
        if(target.hasOwnProperty(item)){
          newObj[item] = typeof target[item] == 'object' ? deepCopy(target[item]) : target[item]  //判断属性值类型    }
      }
     
      return newObj
    }

31. jquery.extend 与 jquery.fn.extend的区别？

    jQuery.extend是拓展整个全局函数，$.ajax()这种，jQuery.fn.extend是给$的原型扩展函数，拓展选择器$('div').ajax()

32. 谈一下Jquery中的bind(),live(),delegate(),on()的区别？

    bind(event,data,function)直接绑定在元素上,对js添加的元素无效

    live(event,data,function)经过冒泡的方式绑定到元素上，更适合列表类型，支持动态数据

    delegate(childSelector,event,data,function)

    on(event,childselector,data,function)

33. JQuery一个对象能够同时绑定多个事件，这是如何实现的？

    有一个处理函数数组，监听到一个事件就往数组里放一个handle，而后触发事件的时候一次执行

34. 是否知道自定义事件。jQuery里的fire函数是什么意思，何时用？

    自定义事件就是咱们按照浏览器对事件的机制来自定义的函数，经过new Event()建立

    由咱们本身执行的函数就是函数调用，不是由咱们执行的函数就是事件触发。

    实现自定义事件

    callbacks.fire() 函数用于传入指定的参数调用全部的回调。

    callbacks.fire()示例

    使用：传入相同的参数，调用一系列函数时使用。

35. jQuery 是经过哪一个方法和 Sizzle 选择器结合的？

    Sizzle是一个纯javascript CSS选择器引擎。通常js匹配css是从左往右，Sizzle从右往左，提高了性能。

    jQuery.fn.find()进入Sizzle

36. 针对 jQuery性能的优化方法？

    jquery避免使用class选择器，尽可能用id

    缓存jquery对象

    压缩js

    事件委托（冒泡）

37. Jquery与jQuery UI有啥区别？

    jqueryui是jquery的一个插件，jquery是对javascript的封装，而jqueryui是一个基于jquery的一个UI方面的框架。

    (1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

    (2) jQueryUI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些经常使用的界面元素，诸如对话框、拖动行为、改变大小行为等等。

38. jQuery和Zepto的区别？各自的使用场景？

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着相似的api

    Zepto对象没有addEventListener事件

    Zepto选择器表达式中value值必须用单引号或双引号扩起来

    Zepto根据标准浏览器，只有width()，height（），没有innerHeight,outerHeight等，返回值与jquery不一样

    Zepto each不能遍历对象

    Zepto：移动端，jquery：web端

39. 如何判断当前脚本运行在浏览器仍是node环境中？

    经过判断Global对象是否为window，若是不为window，当前脚本没有运行在浏览器中

40. 移动端最小触控区域是多大？

    44pt x 44pt

41. jQuery 的 slideUp动画 ，若是目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

    jQuery中slideUp 、slideDown、animate等动画运用时，若是目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，其表现不雅。

    解决办法：

    一、在触发元素上的事件设置为延迟处理, 便可避免滞后反复执行的问题（使用setTimeout）

    二、在触发元素的事件时预先中止全部的动画，再执行相应的动画事件（使用stop）

42. 把 Script 标签 放在页面的最底部的body封闭以前 和封闭以后有什么区别？浏览器会如何解析它们？

    若是说放在body的封闭以前，将会阻塞其余资源的加载

    若是放在body封闭以后，不会影响body内元素的加载

43. 移动端的点击事件的有延迟，时间是多久，为何会有？ 怎么解决这个延时？

    click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是否是要双击操做。

44. 什么是“前端路由”?何时适合使用“前端路由”? “前端路由”有哪些优势和缺点?

    路由是根据不一样的 url 地址展现不一样的内容或页面，前端路由就是把不一样路由对应不一样的内容或页面的任务交给前端来作，以前是经过服务端根据 url 的不一样返回不一样的页面实现的。

    在单页面应用，大部分页面结构不变，只改变部份内容的使用前端路由

    优势：用户体验好，不须要每次都从服务器所有获取，快速展示给用户

    缺点：使用浏览器的前进，后退键的时候会从新发送请求，没有合理地利用缓存，单页面没法记住以前滚动的位置，没法在前进，后退的时候记住滚动的位置

45. 检测浏览器版本版本有哪些方式？

    使用navigator.userAgent的值来判断

46. 咱们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几回事件，会先执行冒泡仍是捕获？

    绑定在被点击元素的事件是按照代码顺序发生，其余元素经过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。全部事件的顺序是：其余元素捕获阶段事件 -> 本元素代码顺序事件 -> 其余元素冒泡阶段事件 。

47. Webpack热更新实现原理?

    热更新：热更新就是动态下发代码，它可使开发者在不发布新版本的状况下，修复 BUG 和发布功能。

    浏览器的网页经过websocket协议与服务器创建起一个长链接，当服务器的css/js/html进行了修改的时候，服务器会向前端发送一个更新的消息，若是是css或者html发生了改变，网页执行js直接操做dom，局部刷新，若是是js发生了改变，只好刷新整个页面。

48. 请介绍一下JS之事件节流？

    在监听浏览器滚动条的scroll事件时该事件会触发不少次，这样当快速滚动时会有不好的性能，因此要限制事件触发的频率，能够防抖和节流

    防抖：让在用户动做中止后延迟x ms再执行回调

    截流：在用户动做时没隔必定时间（如200ms）执行一次回调。

49. Object.is() 与原来的比较操做符“ ===”、“ ==”的区别？

    Object.is()相似于===，但在三等号判等的基础上特别处理了 NaN 、-0 和 +0 ，保证 -0 和 +0 再也不相同，但 Object.is(NaN, NaN) 会返回 true。

50. css-loader的原理？

    Css-loader:将js中的css加载进模块，处理css中路径引用等问题

    里面的每个对象都用正则表达式，对应着一种配对方案。loader加载器用于将不一样的文件加载到js文件中

51. React 使用场景？

    一些后台界面，或者是和后台数据比较多，又或者和用户交互比较多，dom操做频繁的均可以用react。

52. 实现组件有哪些方式？

    示例

53. 用js实现千位分隔符?

    var str = '1234567890000000';
    console.log(str.replace(/(?=(?:\d{3})+(?!\d))/g,','));