前端实习生面试题（三）--JS

　　createDocumentFragment() //创建一个DOM片段 innerHTML，innerText大多数情况下，innerHTML更为快速且更加易用，每次操作DOM都要进行一系列的重绘，而且所有修改操作是按顺序同步执行的，这个过程叫做回流，而重绘和回流都是浏览器最昂贵的操作）　　createElement() //创建一个具体的元素　　createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入　　appendChild() //添加　　replaceChild() //替换　　insertBefore() //插入 removeChild() //移除

查询：（主要有w3c的DOM规范查询）

（1）document.getElementById(sle);也许就是最快的id选择器了。

（2）document.getElementsByClassName(cla);慢于第一种;

（3）document.getElementsByName(na);

（4）document.getElementsByTagName(tag);

和选择符API规范查询最核心的两个方法

querySelector() 接收一个css选则符，返回与该模式匹配的第一个元素

querySelectorAll() 接收一个css选则符，但返回的是所有匹配的元素

区别

（1）w3c的DOM规范查询获取的是动态集合，选择符API规范查询获取的是静态集合

（2）尽管DOM规范的查询效率高于选择符API规范的查询的效率，但是DOM规范的查询仅仅局限于通过tag，name，id等查询，如果想要更精确的查询，找到你需要的节点，除非使用比较复杂的正则表达式，不然就要用选择符api定义的规范来查询。

5. Js 事件绑定和事件监听的区别，冒泡

onclick事件只支持单个事件，如果添加会被覆盖

addEventListener 则可以添加多个事件，而且该函数可以设置是否，冒泡捕获

注：removeEventHandler 移除事件

事件冒泡：由具体的元素接受，然后逐级向上传播

事件捕捉：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的。

6. Js string对象

concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。

Length() – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。

substring(start,end) –提取字符串的一部分。传入参数是起始位置和结束位置。

slice(start,end) – 提取字符串的一部分，并返回一个新字符串。

replace(regexp/substr,replacement) – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。

split(separator,howmany) – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。

toLowerCase() – 将整个字符串转成小写字母。

toUpperCase() – 将整个字符串转成大写字母。

7. Js Array对象

arrObject.concat(arrayX,arrayX,......,arrayX) 连接两个或更多的数组，并返回结果。

toString() 把数组转换为字符串，并返回结果。

arrObject.join(separator) 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

arrayObject.slice(start,end) 从已有的数组中返回选定的元素。

splice(2,0,”abc”) 删除元素，并向数组添加新元素。

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

indexOf()返回数组中某个指定的元素一次出现的位置，如果没有返回-1

reverse() 颠倒数组中元素的顺序。

pop() 删除并返回数组的最后一个元素。

shift() 删除并返回数组的第一个元素

8. 比较typeof与instanceof

typeof的定义和用法：返回值是一个字符串，用来说明变量的数据类型。

Instanceof定义和用法：instanceof 用于判断一个变量是否属于某个对象的

9. 比较==与===

==在比较的时候可以自动类型转换

===用于严格比较，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回flase。

10. 数组深浅拷贝

（1）之所以会出现深浅拷贝问题，实质上是由于JS对基本类型和引用类型的处理不同。基本类型指的是简单的数据段，引用类型指的是对象，又因为js不允许我们直接操作内存中的地址，所以我们对对象的操作，其实只是操作它的引用而已。

（2）浅拷贝的话其实也就是正常的赋值，基本类型也就是值的赋值，引用对象则为指针的复制，二者指向的是同一内存。而ES6 对象提供了 Object.assign()这个方法来实现浅复制。可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。

（3）深拷贝则是增加了一个新的内存，无论怎样修改都不会影响其他的值。

有一种方法是使用JSON序列化，也就是先序列化为字符串，再解析还原成对象。但是json只支持简单值，对象和数组三种类型，不支持变量，函数和对象实例，因此有短板。

11. 如何理解This

是js的一个关键字，This是基于函数的执行环境绑定的。

如果有对象就指向调用对象；没调用对象就指向全局对象；用new构造就指向新对象；通过apply 或 call 或 bind 来改变 this 的所指。

12. New操作符具体干了什么

主要分为这几步

（1）var obj =new object（）；

创建一个空对象

（2）obj._proto_ = Func.prototype;

然后让空对象的内部指针__proto__指向函数的原型prototype

（3）Func.call(obj)

this指向obj对象

（4）返回新创建的对象。

instanceof用于判断引用类型属于哪个构造函数的方法

13. Js原型链

(1) js中每个对象都有一个叫原型的prototype属性，而原型的值也是一个对象，因此它也有自己的原型，就这样串起来就形成了一条原型链，而原型链链头是object，它的原型为null。

(2)原型链主要是用于对象的继承，假如函数A被用作构造函数来创建对象，该函数的原型属性将被作为原型赋值给对象实例。

(3)当访问对象的一个属性时，先查找对象本身，如果找不到会顺着原型链查找，如果还是找不到，就是undefined

function Name(){ function Firstname(){

this.name=function(){ this.firstname=function(){

console.log("killua") console.log("L")

} }

Name.prototype = new Firstname();

var he = new Name();

console.log(he.name); //"killua"

console.log(he.firstname); //"L"

14. Js作用域链和作用

作用域(scope)：一条数据可以在哪个范围中使用，这个范围就是作用域。

在页面加载后，会首先创建一个全局作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成一个作用域链，链头是全局作用域，链尾是当前函数的作用域。

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的

15. JavaScript变量声明提前

js编译器在执行函数的时候，会把它函数体里面的声明变量提前到最前面进行声明，而此时变量仅声明，未赋值。

16. Js如何理解闭包，使用闭包的注意点

闭包：形式函数中套了一个函数，

最大用处主要是：

（1）能在函数外部执行函数内部定义的方法，且访问内部的变量

（2）让变量的值始终保持在内存里

注意点：

（1）变量都被保存在内存里，因此对内存消耗很大，且导致内存泄漏，因此在退出函数之前，要删除不使用的局部变量。

function User(){

this.name = "Vicfeel"; //共有属性 var age = 23; //私有属性 this.sayAge:function(){

console.log("my age is " + age); }

}

var user = new User();

console.log(user.name); //"Vicfeel" console.log(user.age); //"undefined" user.sayAge(); //"my age is 23"

17. Js自执行函数（匿名函数）

匿名函数其实就是没有名字的函数，用大括号包起来，然后它可以

（1）开辟封闭的变量作用域环境，每一次执行都创建一个私有的环境，也就是说它可以模拟块级作用域，减少全局变量，执行完函数后，其储存在内存中变量就会被销毁，从而节省内存。

（2）自执行函数（匿名函数），其实并不是一个函数，而是一个结果，因为它已经执行过了。

18. j s事件循环 event loop

https://www.cnblogs.com/dong-xu/p/7000163.html

19. Js同源策略

同源策略是浏览器的一个安全功能，同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。这也是为什么产生跨域问题的原因

20. Js加载时间线

（1）创建document对象，开始解析web页面

（2）遇到link外部css，就会创建线程加载，并继续解析文档

（3）遇到script外部js，如果没有设置异步加载，就会阻塞，等js加载完后，继续解析文档，如果设置了浏览器就会创建线程加载，并继续解析文档

（4）遇到img等，会先正常解析dom结构，然后浏览器异步加载src，并继续解析文档

（5）所有脚本加载完并执行后，window对象就会触发load事件。

21. 图片轮播的思路

（1）所有的li左浮动成一排，实际过程就是将ul往左（右）边移动，改变left值。

（2）计时器和点击来改变index的值，然后根据index的值来渲染img

22. 垃圾回收机制方式及内存管理

垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

方法：标记清除\引用计数

23. 什么叫优雅降级和渐进增强

优雅降级：新式浏览器中都能正常工作的情况下，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。然后为那些无法支持功能的浏览器以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，当浏览器支持时，它们会自动地呈现出来并发挥作用。

24. 哪些操作会造成内存泄漏

内存泄漏指在浏览器进程结束之前的某一块内存既不使用，又不能回收，就会造成内存泄漏。

（1）dom清空或删除时，事件未清除导致的内存泄漏（移除元素绑定的事件）

（2）.setTimeout （计时器）的第一个参数使用字符串而非函数的话，会引发内存泄漏（先停止定时器，然后置空字符串）。

（3）闭包也可以引起内存泄漏

（4）没有清理console控制台日志

（5）定义全局变量

查看内存

Chrome自带的内存调试工具可以很方便地查看内存使用情况和内存泄露：

在Timeline -> Memory点击record即可：

25. 对JSON的了解

JSON是一种轻量级的数据交换格式，本质是一个字符串，使用文本表示一个js对象的信息，易于读写，且占用带宽小

26. JSON 与 JS 对象的关系

实现从JSON字符串转换为对象，使用JSON.parse() 方法，

要实现从对象转换为JSON 字符串，使用 JSON.stringify() 方法：

27. es6

（1）新增变量声明const，let

（2）新增模版字符串

（3）箭头函数

不需要function来创建函数

省略return 关键字

继承当前上下文的this关键字

（4）对象，数组的解构

在ES6之前我们获取对象信息的时候，是一个一个获取。现在，解构能让我们从对象或者数组里取出数据存为变量，

const people = {

name: 'lux',

age: 20

}

const { name, age } = people

（5）展开运算符，可以组装对象或数组

想获取数组或者对象除了前几项或者除了某几项的其他项

（6）import导入和export导出

（7）promise

用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

28. webpack打包

webpack是一个模块打包工具，可以用webpack来管理项目的模块依赖，并编译输出模块所需的静态文件。

29. 设计模式

Mvp，mvvm，

Mvp：MVP 模式将 Controller 改换为 Presenter，同时断开View和Model之间联系，通过Presenter做桥梁来沟通。

30. MVC

（1）MVC是模型-视图-控制器的缩写

（2）由屏幕获取响应指令，View 传送指令到 Controller，Controller 完成业务逻辑后，要求Model 改变状态Model 将新的数据发送到 View，用户得到反馈

31. VUE的MVVM的理解，如何实现

它采用双向绑定（data-binding）：View <->ViewModel , ViewModel作为Model中值的映射，数据发生改变时，通知View中发生改变，以后不需要考虑View和Model 之间的交互更新，只需着手界面布局逻辑即可