web前端必考的面试题

1.JS基本数据类型

Number String boolean null undefined Object

null类型进行typeof操作符后，结果是object，原因在于，null类型被当做一个空对象引用。

2.typeof的返回值类型

• number：NaN
• boolean
• string
• undefined：undefined 不存在的变量
• object：对象，数组，null
• Function：Array Date
• symbol：typeof Symbol() // ES6提供的新的类型

3.操作数组的方法

• shift:从数组中把第一个元素删除，并返回这个元素的值。
• unshift:在数组的开头添加一个或更多元素，并返回新的长度
• push:在数组的末尾添加元素，并返回新的长度
• pop:把数组的最后一个元素删除，并返回该元素的值
• slice:读取数组指定的元素，不会对原数组进行修改
• splice:操作数组指定的元素，会修改原数组，返回被删除的元素
• concat reverse join split sort

4.操作字符串的方法

• charAt(index):返回指定索引处的字符串
• concat(str1,str2,…):连接多个字符串，返回连接后的字符串的副本
• indexOf(str):返回str在父串中第一次出现的位置，若没有则返回-1
• match(regex):搜索字符串，并返回正则表达式的所有匹配
• replace(str1,str2):str1也可以为正则表达式，用str2替换str1
• substr(start，length)：从字符索引start的位置开始，返回长度为length的子串
• substring(from,to)：返回字符索引在from和to（不含）之间的子串
• search(regex):基于正则表达式搜索字符串，并返回第一个匹配的位置
• valueOf()：返回原始字符串值

5.JS有哪些内置对象

• 数据封装类对象：Object、Array、Boolean、Number、String
• 其他对象：Function、Arguments、Math、Date、RegExp、Error
• ES6新增对象：Symbol、Map、Set、Promises、Proxy、Reflect

6.函数声明和函数表达式的区别

函数声明有变量提升，现代浏览器不会对if语句中的函数声明进行提升

函数声明的自执行必用()将函数声明括起来后自执行,函数表达式可以直接自执行

7.JavaScript的原型，原型链？有什么特点？

• 每一个js对象（除了null）都有_proto_内部属性，这个属性会指向该对象的原型
• js中每个函数除了_proto_之外，还预置了prototype属性，当函数对象作为构造函数创建实例时，该prototype属性值将被作为实例对象的原型_proto_
• 每个原型都有一个 constructor 属性指向关联的构造函数 实例原型指向构造函数
• prototype属性的作用就是包含可以由特定类型的所有实例共享的属性和方法，也就是让该函数所实例化的对象们都可以找到公用的属性和方法Person === Person.prototype.constructorperson. proto === Person.prototypeObject.prototype. proto === null
• 原型链：当一个对象调用的属性/方法自身不存在时，就会去自己 _proto_关联的前辈 prototype 对象上去找，如果没找到，就会去该 prototype 原型_proto_关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
• 原型特点：JavaScript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变

8.call& apply& bind

• call和apply都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向（对象原本没有这个方法，借用别人的）。Call和apply会直接调用函数；bind可以指定this的指向，返回一个新的函数，不改调用函数
• apply、call 作用完全一样，只是接受参数的方式不太一样
  func.call(this, arg1, arg2); func.apply(this, [arg1, arg2])
  实例
• 数组追加 Array.prototype.push.apply(array1, array2);
• 获取数组中的最大值和最小值 Math.max.apply(Math,array1)
• 验证是否是数组，因为Array的toString方法被重写过，所以调用Object的toString(),Object的toString方法结果是[object 对象类型] Object.prototype.toString.call(obj) === ‘[object Array]’
• Javascript如何打印数组的值 console.log.apply(console,arr)
  使用bind改变setInterval等定时器中的this，这里的this原本指向window
  setInterval(function(){}.bind(this),1000);

9.实现继承

• 拷贝：把父对象的所有属性和方法，拷贝进子对象（不算继承）
• 原型链继承：将父类的实例作为子类的原型（创建子类实例时，无法向父类构造函数传参）
• 构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上（不能继承父类原型上的方法）

• 原型+构造组合继承（为了弥补上两种的不足）：借用构造函数继承父对象的属性，通过原型让子类继承父类的方法
• ES6 语法糖 extends

10.通过new创建一个对象的时候，函数内部有哪些改变 手写new方法

• 创建一个空对象
• 将所创建对象的__proto__属性值设为构造函数的prototype的属性值
  执行构造函数中的代码，构造函数中的this指向该对象，并且最后隐式的返回 this
  
• Object.create方法创建一个新对象，使用现有的对象来提供新创建的对象的proto

11.this对象的理解

• this 总是指向函数的直接调用者
• 如果有 new 关键字，this 指向 new 出来的实例对象
• 在事件中，this指向触发这个事件的对象，特：IE下 attachEvent 中的this总是指向全局对象Window

12.eval

• eval的功能是把对应的字符串解析成JS代码并运行
• 应该避免使用eval，不安全，非常耗性能（先解析成js语句，再执行）
• 由JSON字符串转换为JSON对象的时候可以用 eval(’(’+ str +’)’);

13.JavaScript实现异步编程

• 回调函数
• 事件监听
• 发布/订阅
  
• Promises对象
• Async await

14.事件冒泡 事件捕获 事件委托（代理）

• 事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止
• 事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
• 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获
  document.getElementById(‘box3’).addEventListener(‘click’, sayBox3, false);
• 事件委托通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度
• 老版IE不支持addEventListener removeEventListener而使用attachEvent detachEvent,IE里的事件对象是window.event，事件源是srcElement,阻止冒泡写法window.event.cancelBubble = true;

15.Jquery的on bind delegate

• $("#id").bind(“click”,function(){})
• $("#id").on(“click”,".class",function(){})
• $(“div”).delegate(“p”, “click”, function () {});
• on可以将子元素的事件委托给父元素进行处理；on可以给动态添加的元素加上绑定事件

16.Promise机制

• Promise有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)
• Promise对象接受一个回调函数作为参数, 该回调函数接受两个参数，分别是成功时的回调resolve和失败时的回调reject；另外resolve的参数除了正常值以外， 还可能是一个Promise对象的实例；reject的参数通常是一个Error对象的实例。
• Promise用来解决回调地狱问题, 可以链式调用
• Promise.all：将多个Promise实例包装成一个新的Promise实例。当所有的promise都返回成功时才成功同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
• Promise.race：当其中一个promise有返回结果时就返回该结果，无论结果本身是成功还是失败。

17.Ajax Asynchronous JavaScript and XML

• 原理：通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
• 优点: 实现局部刷新 异步 界面与应用分离
• 缺点：破坏了浏览器的机制（back），安全问题，对搜索引擎的支持较弱，不能很好地支持移动设备
• 参数： url type async cache默认为true，设置为false将不会从浏览器缓存中加载请求信息。 dataType success error
• XMLhttprequest对象：XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新
• 实现流程：创建XMLHttpRequest对象，创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息，设置响应HTTP请求状态变化的函数，发送HTTP请求，获取异步调用返回的数据，使用JavaScript和DOM实现局部刷新
• 解决浏览器缓存问题：anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。 jquery cache:false

18.ajax请求的时候get 和post方式的区别

• 一个在url后面 ，一个放在虚拟载体里面
• get有大小限制(只能提交少量参数)
• 安全问题
• 应用不同 ，请求数据和提交数据

19.内存泄漏

用动态存储分配函数内存空间，在使用完毕后未释放，导致一直占据该内存单元。直到程序结束。

常见内存泄漏：

• 不需要的全局变量（未声明或者this指向window）
• 被遗忘的定时器和回调。
• 脱离DOM的引用：DOM已经被动态删除了，但还保存着他的引用
  闭包

20.http协议状态码

• 1开头：信息状态码 （100 继续 101：切换协议）
• 2开头：成功状态码（200 请求成功 201 创建新资源 202 接受但未处理 203 非授权信息 204 无内容）
• 3开头：重定向状态码（302：临时移动 304：请求的网页未修改）
• 4开头：客户端错误状态码（400错误请求 401 未授权 404 找不到资源）
• 5开头：服务端错误状态码（500 服务器内部错误 502 错误网关 503 服务不可用 504 网关超时）

21.跨域

只要协议，域名，端口有任何一个的不同，就被当作是跨域。

解决办法：

• 跨域资源共享（CORS）：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败，服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的，只需要在后台中加上响应头来允许域请求
• 通过jsonp跨域:用使用script标签实现跨域访问，可在url中指定回调函数。缺点：只支持GET方式是一种脚本注入行为存在一定的安全隐患。如果返回的数据格式有问题或者返回失败了，并不会报错
• 通过修改document.domain来跨子域。两个网页一级域名相同，只是二级域名不同，只要设置相同的document.domain，两个网页就可以共享Cookie，这种方法只适用于 Cookie 和 iframe 窗口
• 使用window.name来进行跨域：window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个
• 使用HTML5的window.postMessage方法跨域
• 通过WebSocket进行跨域

22.js克隆

浅克隆：浅克隆的对象的引用值是拷贝对象里的引用，这两个对象里面的引用指向的地方是一致的。

深克隆：这两个对象里的引用的独立拷贝的，不指向同一个地方

深克隆方法：

• Object.assign（对于对象属性值为引用类型时只是浅拷贝）
• 使用JSON.parse（）和JSON.stringify（）对对象进行深拷贝
  JSON.parse(JSON.stringify(obj)); 不支持function，undefined，Date，不能克隆它继承的值
• 递归拷贝

23.js循环

• for-in 循环主要用于遍历对象 可以遍历原型属性，使用hasOwnProperty判断是否是自身属性
• for-of循环（ES6）可以获取到键值
• foreach循环
• Jquery的each
• map()循环 对原数组的每个元素进行操作，并返回一个新数组
• filter()过滤循环 返回结果为true的成员组成一个新数组返回
• some() 返回一个布尔值，判断数组成员是否符合某种条件,其中一个返回true，整个方法都返回true
• every()与some()相反，所有返回true，整个方法返回true，否则返回false
• reduce()依次处理每一个成员，最终累计为一个值（reduceRight从右向左执行）
• Object.keys方法遍历对象的属性
• Object.getOwnPropertyNames()能返回不可枚举的属性 比如length

24.js延迟加载的方式

defer：只支持IE async setTimeout 放在body后面

25.ES6新特性

• 变量声明：const和let局部变量，不提升，块级作用域，const声明时用大写，声明时必须被赋值
• 模板字符串 反引号(``)
• 箭头函数
  不需要 function 关键字来创建函数 省略return关键字 继承当前上下文的this关键字
• 函数的参数默认值function printText(text = ‘default’) {}
• 解构 const point = [10, 25, -34]; const [x, y, z] = point; console.log(x, y, z);
• for-of 循环
• 展开运算符(…) 结合数组const produce = […fruits,…vegetables]; 剩余参数；不确定参数
  class 继承

26.立即执行函数

jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库，好处在于隔离作用域，任何一个第三方库都会存在大量的变量和函数，为了避免变量污染（命名冲突）

两种常见形式：( function(){…} )()和( function (){…} () )

除了使用()运算符之外，！，+，-，=等运算符都能起到立即执行的作用

27.闭包

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域

特性：函数内嵌套函数；内层函数可以引用外层的参数和变量；闭包内的变量和参数不会被gc回收

闭包经典题目解决办法：使用let代替var或者使用立即执行函数

28.排序

• 冒泡排序 比较相邻的元素。如果第一个比第二个大，就交换他们两个
• 选择排序 依次找到剩余元素最小值，放置排好序的末尾（第一个放在开头）
• 插入排序 即构建有序序列，未排序数据依次从已排序数据按从后往前比较，插入到合适的位置
• 快速排序 找出一个基准值，通过比较大小分为两个序列，递归查找直到leng的长度小于
• 希尔排序
• 归并排序

还有其他想了解的可以私信我。