前端面试题---2

38.影响js性能的操作

答：
for()语句性能优于for(…in…)语句
避免重复创建函数，避免使用闭包。推荐使用prototype追加方法
判断一个js对象是否支持某个属性或方法时使用if(typeof(person.attr)!=‘undefined’) ，考虑到当person.attr=null,0,false的情况
在IE中根据name属性取得SPAN元素：w3c规范中getElementsByName是按着name属性进行检索的，而MS的IE却是按着id来检索，导致不能得到应该得到的Elements。可用getElementsByTagName后再getAttribute(“name”)判断。
得到字符串所占的字符个数： if (intCode>=0&&intCode<=128) { totallength=totallength+1;//非中文单个字符长度加 1}else{ totallength=totallength+2; //中文字符长度则加 2}
原始类型(string,number,boolean,null,undefined)：值; 复合类型(object,array,function)：访问地址。
使用{}创建对象
使用[]创建数组,如果你不知道数组长度，使用Array#push。当你需要复制数组的时候，请使用Array#slice。
对于字符串，使用单引号’
字符串拼接，可以使用Array#join。尤其是对IE浏览器。
绝对不要在非函数块（if,while）申明一个函数。可以把函数申明变成一个函数表达式 var test = function test(){…}
访问属性使用点（.）操作符, 当以变量的方式访问属性的时候，用下标符号（[]）。——除非特殊需求,否则尽量避免使用obj[variable]的方式进行属性访问。
使用一个var定义多个变量，每个变量在一个新行上，把不进行赋值的变量放置到最后
在选择时，最好以ID选择符作为开头
尽量少用选择符，而使用逗号
在循环次数很多时避免使用KaTeX parse error: Unexpected character: '' at position 18: ….each,而使用for循环 ̲尽量减少对DOM的操作 如果…(“div”).css({ “display”: “block”, “background-color”: “blue” });。

39.谈谈对深浅拷贝的理解，怎么实现深浅拷贝的？

：浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
浅拷贝的实现方式：
（1）Object.assign()

（2）Array.prototype.concat()

（3）Array.prototype.slice()

深拷贝的实现方式：
（1）JSON.parse(JSON.stringify())

（2）手写递归方法：递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝（源码可参考：https://www.cnblogs.com/secretAngel/p/10188716.html）

40.谈谈this指向

答：this是函数运行时自动生成的一个内部对象，只能在函数内部使用，但总指向调用它的对象。它的指向由调用它的对象来决定，如：
1.在全局中this指向window
2.直接调用函数this指向window
3.事件处理函数中this指向绑定事件的元素
4.obj.fn(); fn函数中this指向obj
5.回调函数中this指向window
6.构造函数中this指向实例化对象

41.js里哪些操作会造成内存泄漏？什么是内存泄漏???

答：（1）在函数中定义全局变量（2）闭包。闭包可以维持函数内局部变量，使其得不到释放。（3）删除元素却没有清除DOM元素引用（4）被遗忘的定时器或者回调（5）子元素存在引用引起的内存泄漏

内存泄漏指我们无法在通过js访问某个对象，而垃圾回收机制却认为该对象还在被引用，因此垃圾回收机制不会释放该对象，导致该块内存永远无法释放，积少成多，系统会越来越卡以至于崩溃

42.js里什么是垃圾回收机制

答：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔,周期性的执行。
两种方法:1.标记清除 2.引用计数

43.js延迟加载都有哪些方式

答：JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。
1.script标签中加入defer属性
2.script标签中加入async属性
3.动态创建dom的方法
4.使用jQuery的getScript方法
5.setTimeout
6.最后 引入js

44.js缓存的三种方法及区别与特点

答：H5本地存储：sessionStorage：临时的会话存储，只要当前的会话窗口未关闭，存储的信息就不会丢失，即便刷新了页面或者在编辑器中更改了代码，存储的会话信息也不会丢失。localStorage是一种永久存储，会一直将数据存储在客户端的储存方式，即使关闭了浏览器，下次打开的时候仍然可以看到之前存储的未主动清除的数据（即便是杀毒软件或者浏览器自带的清除功能，也不能将localStorage存储的数据清除掉）
Cookie：Cookie是存储在用户计算机上的小文件，保存特定客户端和网站的适量数据，并可以由Web服务器或客户端浏览器访问，允许服务器提供针对特定用户定制的页面，或者页面本身可以包含一些知道cookie中的数据的脚本。
cookie和H5本地存储的区别
1.cookie兼容所有的浏览器（本地cookie谷歌不支持），storage不支持IE6~8;
2.二者对存储的内容均有大小限制，前者同源情况写一般不能存储4kb的内容，后者同源一般能存储只能存储5MB的数据
3.cookie有过期时间，localStorage是永久存储（如果你不手动去删除的话）
4.一些浏览器处于安全的角度可能会禁用cookie,但无法禁用localStorage

45.cookie有什么弊端

答：cookie兼容所有的浏览器，但其存储的数据是有大小限制的，一般同源是4kb；cookie本地存储的数据会被发送到服务器（所以建议在服务器环境下使用cookie）；存在跨域访问问题；浪费带宽等等；

46.怎么阻止冒泡和浏览器默认事件

答：标准浏览器: 阻止冒泡e.stopPropagation() 阻止默认事件e.preventDefault()
ie浏览器: 阻止冒泡e.cancleBubble=true 阻止默认事件e.returnValue = fasle;

47.什么是块作用域，什么是函数作用域？

答:块作用域:ES5中没有块作用域；ES6的块级作用域,任何一对花括号中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域
函数作用域:函数作用域是针对局部变量来说的，在函数中定义的变量在函数外不能获取

48.什么是面向对象编程，三个属性是什么

答：面向对象编程是一种编程开发思想。 它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。，每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。 因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。
三个属性:封装、继承、多态

49.我声明了一个构造函数，调用的时候 我写new 和没有写new有什么区别？

答:任何函数，如果不通过 new 操作符来调用，就是直接执行函数体。
如果使用 new调用，则不单执行函数，还会返回个实例对象。以这种方式调用构造函数实际上会经历以下4个步骤：
(1) 创建一个新对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
(3) 执行构造函数中的代码（为这个新对象添加属性）；
(4) 返回新对象。

50.前端调试bug都有哪些方法

答：
断点调试
console.log调试
检测dom事件执行顺序
打开控制台CSS调试

51.怎么实现图片懒加载

答：定义：当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。
作用：减少或延迟请求数，缓解浏览器的压力，增强用户体验
实现方式：
设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址
页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中
当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址

53.类数组有用过吗，什么情况下用，怎么转化成真正数组

答：有用过，比如document.getElementsByTagName()的返回值就是一个类数组，比如函数中的arguments对象也是一个类数组。
常用的类数组转数组的方法有3种:
Array.from(类数组);
[…类数组]
Array.prototype.slice.call(类数组)

54.数组里面的排序有哪些方法，怎么用

冒泡排序：

插入排序：

55.多维数组怎么拍平，扁平，怎么去实现这个方法呢！

答：方法1：ES6的方法数组.flat();
方法2：ES5的方法

56.数组元素的求和，除了循环还有没有更好的方式

答:不考虑算法复杂度，用递归做

函数式编程 map-reduce：

forEach遍历：

eval

57.假如有一个很长的数字，怎么给他做千分位的格式化分元呢！ （数字从右往左每三位一个逗号）

答:正则匹配

的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为对象。强烈要求不要用for in 遍历数组.

58.通过ES5的方法怎么把类数组转成真正的数组？

答:方法1：遍历类数组，将类数组里面的元素依次放入一个新的数组

方法2：使用 apply 和 call，apply方法的第二个参数是数组，也可以是类数组，在调用的时候会将第二个参数依次展开

59.简单说一下事件冒泡

答:IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深
的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。

所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒泡会跳过元素（从直接跳到 document）。IE9、Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象。

60.普通函数和箭头函数的this指向的区别

答：普通函数this指向由调用决定，this指向调用该函数的对象，而箭头函数this指向由定义时决定，this指定父级作用域的this

61.new一个关键字做了哪些事情

答：使用 new 操作符。以这种方式调用构造函数实际上会经历以下4个步骤：
(1) 创建一个新对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
(3) 执行构造函数中的代码（为这个新对象添加属性）；
(4) 返回新对象。

62.有一串手机号，我想把中间的四位替换成****，我要用什么方法实现？

答：利用正则表达式：
var tel = 15617076160;
tel = “” + tel;
var reg=/(\d{3})\d{4}(\d{4})/;
var newTel = tel.replace(reg, “$1****$2”)；
console.log(newTel);//156****6160

63.我现在有一个数组，数组里面是对象，我要给对象里面的每一项添加一个a:1我要怎么去做呢？

64.循环的方法有哪些，每个循环有哪些特点呢？

答：1.for循环：特点是先判断后执行，当条件成立才会执行，适用于循环次数已知的循环；2.while循环：特点也是先判断后执行，当条件成立才会执行，适用于循环次数未知的循环；3.do…while循环：特点是先执行后判断，先执行一遍循环体，再判断条件是否成立，成立则继续循环，不成立则结束循环。

65.Async函数用法和promise区别

答：简单的说async函数就相当于自执行的Generator函数，相当于自带一个状态机，在await的部分等待返回， 返回后自动执行下一步。而且相较于Promise,async的优越性就是把每次异步返回的结果从then中拿到最外层的方法中，不需要链式调用，只要用同步的写法就可以了。更加直观而且，更适合处理并发调用的问题。但是async必须以一个Promise对象开始 ，所以async通常是和Promise结合使用的。总的来说，async函数主要就是为了解决异步的并发调用使用的 ，直接将参数从then里取出来，相比promise的链式调用，传参更加方便，异步顺序更加清晰。

66.Async和promise如何捕捉错误信息

答: async可以使用try…catch语句；promise可以使用实例方法catch捕获异常

67.Extends继承和js5核心区别？

答：这道题面试官考查的是你对Es5与ES6继承的理解，它俩的区别主要集中在以下几点：
（1）ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）.
(2)ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），然后再用子类的构造函数修改this。
(3)ES5的继承时通过原型或构造函数机制来实现。
(4)ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工。如果不调用super方法，子类得不到this对象。

68.Js中如何处理同步和异步的

答：同步的话代码依次执行，异步的处理方式有：（1）回调函数 （2）promise (3)Generator (4)Async/await (5)定时器函数 （6）ajax等

69.call bind apply 的区别

答：（1）bind不会立刻执行，会返回绑定this之后的函数，call和apply会立即执行（2）三者都可以传参，但是apply是数组，而call和bind传过去的是一系列参数

70.javascript原型和原型链

答：原型：每一个javascript对象(除null外)创建的时候，都有一个__proto__属性指向与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。让我们用一张图表示构造函数和实例及原型之间的关系：

原型链：每个构造函数都有原型对象，每个构造函数实例都包含一个指向原型对象的内部指针（proto），如果我们让第一个构造函数的原型对象等于第二个构造函数的实例，结果第一个构造函数的原型对象将包含一个指向第二个原型对象的指针，再然第三个原型对象等于第一个构造函数的实例，这样第三个原型对象也将包含指向第一个原型对象的指针，以此类推，就够成了实例于原型的链条，这就是原型链的基本概念。

71.说说你对spa单页面应用的理解

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：
• 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
• 基于上面一点，SPA 相对对服务器压力小；
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
• 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
• 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
• SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

71.如何是一个对象可迭代