WEB前端面试题(JS)

·  阅读 114

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.constructor

person. proto === Person.prototype

Object.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

bject.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的长度小于 希尔排序 归并排序

有想了解更多的小伙伴可以去链接看一下,应该对你们能够有所帮助。

分类:
前端
标签: