JS面试题总结(第三弹)

JS面试题总结(第三弹)

1null和undefined的区别是什么?

1.含义不同

null表示空，undefined表示定义未赋值

2.数据类型不同

null的数据类型是Object，undefined的数据类型是undefined

3.派生关系

undefined是从null派生出来的

null == undefined //true 

null === undefined //false

2请介绍一下XMLhttprequest对象

XMLhttprequest是AJAX的核心类，首次在IE5引入，是一种支持异步请求的技术，XMLhttprequest可以使JS向服务器发起请求并处理响应，而不阻塞用户，通过XMLhttprequest对象，可以在页面加载以后对页面进行局部更新

3简述同源策略与跨域？

同源策略是一种约定，它是浏览器最核心的也是最基本的安全功能。出于安全方面考虑，浏览器不允许跨域访问，只允许访问同一IP地址、协议和端口的文件。当协议，IP地址，和端口号有一个不同时，就是跨域

4箭头函数和普通函数的区别

1.this指向不同

箭头函数内的this指向其父级的前缀，普通函数的this指向调用此方法的元素本身

2.箭头函数都是匿名函数，普通函数可以是匿名函数也可以是有名函数

3.外观不同

普通函数被function关键字定义，箭头函数省略了function关键字，用箭头表示

4.箭头函数没有arguments属性，普通函数则有该属性

5.箭头函数不能用于构造函数，普通函数可以与new连用，表示创建了一个对象

6.箭头函数没有显示原型属性prototype，普通函数则有

7.当有一个参数时，箭头函数自带return

5Set和Map的API

Set的API：add(),delete(),has(),clear()

Map的API：set(k,v),get(k),has(),delete(),clear()

6面向过程的编程思想的缺陷

1.随着问题规模的增加，代码逐渐变得难以控制

2.复用性较差，只能复用函数

7数组API中Map和forEach的区别

Map:映射数组，forEach遍历数组

Map返回映射后的新数组，forEach不会返回执行的结果，返回undefined，需要return

8promise的特性都有哪些?优点和缺陷有哪些?

1.promise对象有三种状态，pedding、resolve、reject

2.promise对象的参数是一个回调函数，这个回调函数有两个参数，这两个参数也是回调函数，第一个参数表示成功时的响应，第二个参数表示失败时返回的信息，可以不写

3.then()方法返回一个新的promise实例，并接收两个参数：成功时的回调，失败时的回调(可以不写)

4.promise.all()方法，它的参数是一个所有请求对应响应的数组，数组的每一项都是Promise对象，该方法的作用是保证发送完所有请求后统一接收响应，当有一个请求失败时，所有的请求都会失败，是&&(并且)的关系

5.promise.race()方法中的参数和all方法的一样，该方法是同时向不同服务器发送相同的请求，使用返回最快的响应，提高效率

优点：

1.统一异步API

promise逐渐成为浏览器处理异步的主流API，统一现在各种各样的API，以及不兼容的模式和手法

2.解决回调地狱

promise的链式调用代替了回调地狱的写法，将异步操作以同步操作的流程表达出来

3.Promise包含了更好的错误处理方式（包含了异常处理），更易于书写

缺陷：

1.Promise无法取消，一旦新建了Promise就会立即执行，无法中途取消

2.需要设置回调函数，否则内部抛出的错误无法反应到外部

3.当处于pending状态时，无法得知具体处理到哪一个阶段，是刚开始还是快结束了

4.当执行多个promise对象时，一堆then看起来也不友好

9简述async,await

async和await是ES7提出的解决回调地狱的终极解决方案，它遵循的是generetor函数的语法糖，拥有内置的执行器，无需调用即可自动执行并且输出结果，async是修饰函数的关键字，被修饰的函数的返回值是一个promise对象，得到的是promise对象接收到的响应。await只能出现在被async修饰的函数里面，它本质是提供了异步等待机制，有阻断效果，将异步代码变成了同步代码

10运动的原理是什么?

一个元素发生运动必须要启动定时器

元素在页面的位移本质就是改变了其left和top

元素要发生移动一定要设置绝对定位

对元素连续触发运动效果是，每次需要清空定时器

11解构赋值的作用

1.按照容器属性批量赋值(数组、对象，对象主要是为了去掉前缀)

3.交换两个变量的值

12DOM和BOM分别是什么?有什么作用?

dom是文档对象模型，bom是浏览器对象模型

dom将html元素转换为js对象来操作其内容和属性

bom将浏览器的每个模块转换为js对象对其进行操作

13DOM对象主要围绕哪些属性操作?

主要围绕着内容和三种属性的读写

一是普通元素的读写，有两种方式，第一种是通过点运算符操作。读:dom元素.属性值;写:dom元素.属性名=属性值；第二种    是getattribute('属性名')，setattribute('属性名','属性值')

二是style属性的读写，读是getComputedStyle(dom元素,false)['属性名'];写是dom元素.style.属性名=属性值

三是offset属性，有offsetWidth(自身的宽) ，offsetHeight(自身的高) ，offsetLeft(距其父元素左侧的距     离),offsetTop(距其父元素顶部的距离)，读出来的所有数据都是数字,必须用offset相关属性（对象名.offset属性名）；写:写的时候必须写带px的字符串,要用style的写法

内容有innerHTML、innerText、value(form表单元素)

14什么是节点?

DOM元素就是节点，有文档节点(整个HTML文档是一个文档节点（document）)、元素(HTML标签)节点、文本(元素中的文本)节点、属性(HTML 属性)节点、注释节点等

15节点的操作有哪些?

节点的操作包括 1.节点的遍历、 2.节点的增加和 3.节点的删除

节点遍历有:1.通过选择器获取节点2.通过层级关系访问节点

节点的增加分两步:先创建一个节点，语法：document.createElement("标签名")，再将该节点追加到某个节点，语法：父节点.appendChild(子节点)

节点的删除是dom元素.remove()

16说一下节点的遍历

节点的遍历包括通过选择器获取节点和根据层级关系访问节点

获取节点有1.根据ID名获取2.根据class类名获取节点3.根据标签名获取节点4.根据name属性获取节点

访问节点有1.父找子2.兄弟节点之间的访问3.子找父

17console.log(0.1 + 0.2)的结果是什么?为什么?

0.1+0.2的结果不是0.3，而是0.3000000000000000004，因为js中两数相加是以二进制的形式进行的，当十进制小数的二进制表示的有限数字超过52位时，在JS里是不能精确储存的，这个时候就存在舍入误差

18什么是块级作用域?

凡是在{}内使用let/const声明的变量都有块级作用域，该变量无法在{}外部被访问，变量的值被绑定在该作用域内部

19块级作用域与局部作用域的异同是什么?

相同点：

二者的变量都只能在局部被访问

不同点：

1.局部的范围不同

局部作用域在函数体内部

块级作用域在{}内部

2.执行上下文不同

局部作用域优先级 > 块级作用域 (在函数体大括号内部，无论使用什么关键字声明var/let/const都是局部作用域)

20什么是预解析?

JS代码在执行的前一刻会有一个通读的过程，这个过程就是预解析，会寻找两个东西，一是var声明的变量，二是函数声明，将它们提升到当前作用域的最顶端，值为undefined，当命名冲突时，预解析阶段以函数为准 

21什么是数组的塌陷?如何消除数组塌陷造成的影响?

数组在执行删除操作时，删除数组单元之后，后面的数组单元会向前移动，出现在删除单元的位置上，造成数组长度减少的现象，就是数组的塌陷。

消除方法一：在if判断里面,进行删除操作后面添加i--

消除方法二：将数组倒着排，再进行删除操作

22js 的typeof返回有哪些数据类型?

返回7种数据类型，分别是number,string,boolean,undefined,object,function,symbol(ES6)

23闭包的原理是什么?

函数的执行分为两个阶段，分别是预编译阶段和执行阶段。

在预编译阶段如果发现内部函数使用了外部函数的变量，则会在内存中创建一个闭包对象来存储该变量的值，如果有了闭包对象则只需增加对应的属性值即可。

函数执行完后，执行上下文被销毁，函数对闭包对象的引用也会被销毁，但其内部函数还持有该闭包的引用，所以内部函数可以继续使用外部函数中的变量。

本质上利用了函数作用域链的特性，在父函数内部定义的子函数会将父函数的变量添加到它的作用域链中，父函数执行完毕，其执行作用域链被销毁，但因子函数的作用域链仍然在引用这个变量，所以其变量对象不会被销毁，直到子函数被销毁后才被销毁。

24跨域的解决方案有什么?

1.前端:JSONP

2.后端:CORS ----->全域资源共享

25JSONP的原理和实现跨域的步骤

JSONP是前端实现跨域访问的技巧，利用script的src属性实现跨域，参数只能通过url传入,JSONP只支持get方式

步骤：

1: 创建 callback 方法

2: 插入 script 标签

3: 后台接受到请求，解析前端传过去的 callback 方法，返回该方法的调用，并且数据作为参数传入该方法

4: 前端执行服务端返回的方法调用

26说一下ES6的扩展运算符

扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。

用法：

1.可以将数组转换为参数序列

2.可以将字符串转为真正的数组

3.可以与解构赋值结合起来，用于生成数组

注意点：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

27JS中的常见设计模式以及应用场景

1.单例模式

一个类的实例对象有且只有一个就是单例模式，当这个类没有对象时可以创建对象，当有了一个对象时则无法继续创建对象，创建的对象仍是之前的对象。应用十分广泛，如页面的登录框和消息的提示框

2.策略模式

将策略(算法)封装起来，实现算法和使用分离

3.代理模式

当无法直接使用目标函数时，可通过调用代理函数来实现对目标函数的使用

4.发布订阅模式

发布订阅模式定义了一种一对多的依赖关系，当“一”发生变化，通知多个依赖

5.命令模式

将要执行的业务逻辑封装到一个函数或类中，不需要具体谁来执行该命令的

28ES6新增特性有哪些?

1.let和const

2.模板字符串

3.解构赋值

4.扩展运算符

5.箭头函数

6.class定义类

7.for of循环

8.函数参数默认值

9.对象简写法

10.模块化规范

29介绍一下 typeof 区分类型的原理

不同的对象在底层都表示为二进制，在JS中二进制前三位存储其类型信息

000:对象

010:浮点数

100:字符串

110:布尔

1:整数

typeof null 为"object"，原因是因为null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回"object"

30for-in 循环会遍历出原型上的属性吗?怎么避免遍历到原型上的属性

for-in 循环会遍历出原型上的属性，可以使用hasnProperty方法进行过滤，只返回对象自己的属性