JavaScript、ES6基础⾯试题及答案解析
JavaScript、ES6基础⾯试题及答案解析②
1、js基本数据类型有哪些?
答:字符串String,数值Number,布尔 boolean,null,undefined,对象,数组
2、Ajax如何使⽤
⼀个完整的AJAX请求包括五个步骤:
创建XMLHTTPRequest对象
使⽤open⽅法创建http请求,并设置请求地址:
xhr.open(get/post , url , async , true(异步) )经常使⽤前三个参数
设置发送的数据,⽤send发送请求
注册事件(给ajax设置事件)
获取相应并更新页⾯
3、如何判断⼀个数据类型是NaN?
NaN ⾮数字 但是⽤typeof 检测是 Number 类型
利⽤NaN的定义,⽤typeof判断是否为Number类型并且判断是否满⾜isnan
利⽤NaN是唯⼀⼀个不等于任何⾃⾝的特点 n! == n
利⽤ES6中提供的Object.is()⽅法(判断两个值是否相等)n==nan
js中null与undefined的区别:
相同点:⽤if判断时,;两者都会被转为false
django框架和vue不同点:
number转换的值不同 number(null)为0 number(undefined)为NaN
null表⽰⼀个被值被定义了,但是这个值是空值
undefined 变量声明但未赋值
4、闭包是什么?有什么特性?对页⾯有什么影响?
闭包可以简单理解成:定义在⼀个函数内部的函数。其中⼀个内部函数在包含他们的外部函数之外被调⽤时,就会形成闭包。特点:
函数嵌套函数。
函数内部可以引⽤外部的参数和变量。
参数和变量不会被垃圾回收机制回收。
使⽤:
读取函数内部的变量;
这些变量的值始终保存在内存中,不会再外层函数调⽤后被⾃动清除。
优点:
变量长期驻扎在内存中;
避免全局变量的污染;
私有成员的存在;
**缺点:**会造成内存泄漏
5、谈谈js中常见的内存泄漏:
意外的全局变量
被遗忘的计时器或回调函数
脱离DOM的引⽤
闭包
6、事件委托是什么?如何确定事件源(Event.target 谁调⽤谁就是事件源)
js⾼程上将:事件委托就是利⽤事件冒泡,只制定⼀个时间处理程序,就可以管理某⼀类型的所有事件。
事件委托,称事件代理,是js中很常见的绑定事件的技巧,事件委托就是把原本需要绑定在⼦元素的所有响应事件委托给⽗元素,让⽗元素担当事件监听的职务,事件委托的原理是DOM元素的事件冒泡。
7、什么是事件冒泡?怎么阻⽌事件冒泡?
⼀个事件触发后,会在⼦元素和⽗元素之间传播,这种传播分为三个阶段:
捕获阶段:从window对象传导到⽬标节点(从⾥到外)
⽬标阶段:在⽬标节点上触发
冒泡阶段:从⽬标节点传回到window对象(从⾥到外)
事件委托/事件代理就是利⽤事件冒泡的机制把⾥层需要响应的事件绑定到外层
阻⽌事件冒泡
标准写法:e.stopPropagation()
IE6-8的⾮标准写法:e.cancelBubble = true
8、本地存储与cookie的区别
cookie是⼩饼⼲的意思。说以cookie确实⾮常⼩,他的⼤⼩限制为4kb左右。他的主要⽤途有保存⽤户登录信息。
localStorage
alter table 表名localStorage是HTML5标准中新加⼊的技术,他并不是什么划时代的新东西。早在IE6时代,就有⼀个叫userData的东西⽤于本地存储,⽽当时考虑到浏览器的兼容性,更通⽤的⽅案是Flsah。⽽如今,localStorage北⼤多数浏览器所⽀持,如果你的⽹站需要兼容IE6+,那么使⽤userData⽅案是不错的选择
sessionStorage
sessionStorage与localStorage的接⼝类似,但保存数据的⽣命周期与localStorage不同。session这个词的翻译的意思就是“会话”。⽽sessionStorage是⼀个前端的概念,他只是可以将⼀部分数据在当前会话中保存下来,刷新页⾯数据依旧存在。但当页⾯关闭后,sessionStorage中的数据就会被清空。
散着的异同
9、ES6新特性
const和let、模板字符串、箭头函数、函数的参数默认值、对象和数组解构、for…of 和 for…in、ES6中的类
10、谈谈对let、var与const的区别的理解
var声明的变量会挂载在window上,⽽let 和const 声明的变量不会
var 声明的变量存在变量提升,let和const不存在变量提升
同⼀作⽤域下var 可以声明同名变量,let 和const 不可以
let 和const 声明会形成块级作⽤域
let 暂存死区
const ⼀旦声明必须赋值,不能⽤null占位,声明后不能在修改,如果声明的是复合数据类型,可以修改属性
11、数组⽅法有哪些?请简述:
push() 从后⾯添加元素,返回值为添加完后新数组的长度
arr.pop() 从后⾯删除元素,只能是⼀个,返回值是删除的元素
arr.shift() 从前⾯删除元素,只能删除⼀个 返回值是删除的元素
arr.unshift() 从前⾯添加元素,返回值添加完后的数组的长度
arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
str.split() 将字符串转化为数组
arr.sort() 将数组进⾏排序,返回值是排好的数组,默认是按照最左边的数字进⾏排序,不是按照数字⼤⼩进⾏排序的
arr.slice(start,end) 切去索引值start到索引值end的数组,不包含end索引值的值,返回值是切出来的数组
arr.forEach(callback) 遍历数组,⽆return 即使有return,也不会返回任何值,并且会影响原来的数组
arr.map(callback) 映射数组(遍历数组),有return 返回⼀个新的数组
arr.filter(callback) 过滤数组,返回⼀个满⾜要求的数组
12、说出两种以上数组去重的⽅法
使⽤indexof()⽅法
使⽤lastindexof() ⽅法和indexof() ⽅法⼀样 indexof从头部开始匹配 lastindexof从尾部匹配
ES6的set结构 set不接受重复数据
使⽤sort⽅法先将数组升序排序,然后与相邻的⽐较,如果不同则存⼊新数组
使⽤filter和indexof⽅法
使⽤ES6的set和扩展运算符
使⽤set和Array.from() ⽅法 array.from可以将set结构转成数组
使⽤splice 和双重循环
使⽤includes⽅法
13、什么是⾯试对象(OOP)请简述
⾯向对象是⼀种思想,是基于⾯向过程⽽⾔的,就是说⾯向对象是将功能等通过对象来实现,将功能封装进对象之中,让对象去实现具体的细节;这种思想是将数据作为第⼀位,这是对数据的⼀种优化,操作起来更加的⽅便,简化了过程。
js本⾝是没有class类型的,但是每个函数都有⼀个prototype属性,prototype指向⼀个对象,当函数作为构造函数时,prototype就起到类似class的作⽤
⾯向对象有三个特点
封装(隐藏对象的属性和实现细节,对外提供公共访问⽅式)
继承(提⾼代码复⽤性,继承是多态的前提)
多态(是⽗类或接⼝定义的引⽤变量可以指向⼦类或具体实现类的实例对象)
14、说说普通函数和构造函数的区别
构造函数也是⼀个函数,创建⽅式和普通函数⼀样,但是构造函数习惯上⾸字母⼤写
调⽤⽅式不⼀样,普通函数直接调⽤,构造函数要⽤关键字new来调⽤
调⽤时,构造函数内部会创建⼀个新对象,就是实例,普通函数不回创建新的对象
构造函数内部的this指向实例,普通函数内部的this指向调⽤函数的对象(如果没有调⽤,默认为window)
构造函数默认的返回值是创建的对象(也就是实例),普通函数的返回值有return语句决定
构造函数的函数名与类名相同
15、请简述原型、原型链、(原型)继承
as integer什么意思什么是原型?
任何对象实例都有⼀个原型,也叫原型对象,这个原型对象由对象的内置属性proto指向它的构造函数的prototype指向的对象,即任何对象都是由⼀个构造函数创建的,但是不是每⼀个对象都有prototype,只有⽅法才有prototype。
web前端基础面试题
什么是原型链?
原型链基本思想是利⽤利⽤原型让⼀个引⽤类型继承另⼀个引⽤类型的属性和⽅法。我们知道,每个构造函数都有⼀个原型对象,每个原型对象都有⼀个指向构造函数的指针,⽽实例⼜包含⼀个指向原型对象的内部指针
原型链的核⼼就是依赖对象的proto的指向,当⾃⾝不存在的属性时,就⼀层层的扒出创建对象的构造函数,直⾄到Object时,就没有proto指向了。
因为proto实质的是prototype,所以我们只要到这个链条上的构造函数的prototype。其中Obiect.prototype是没有proto属性的,它==null。
每个构造函数都有⼀个原型对象,原型对象都包含⼀个指向构造函数对象内部的指针。我们让原型对象(1)等于另⼀个原型对象(2),此时原型对象(2)将包含⼀个指向原型对象(1)的指针,再让原型对象(2)的实例等于原型对象(3),如此层层递进就构成了实例和原型的链条,这就是原型练得概念
什么是原型继承?
每个构造函数都有⼀个原型对象,原型对象都包含⼀个指向构造函数理想指针(constructor),⽽实
例对象都包含⼀个指向原型对象的内部指针(proto)。如果让原型对象等于另⼀个原型对象的实例,此时的原型对象将包含⼀个指向另⼀个原型的指针(proto),另⼀个原型也包含着⼀个指向另⼀个构造函数的指针
(constructor)。假如另⼀个原型⼜是另⼀个类型的实例……这就构成了实例与原型的链条。也叫原型链
原型继承是js的⼀种继承⽅式,原型链作为实现继承的主要⽅法,其基本思路是利⽤原型让⼀个引⽤类型
继承另⼀个引⽤类型的属性和⽅法,
**原型继承:**利⽤原型中的成员可以被和其他相关的对象共享这⼀特性,可以实现继承,这种实现继承的⽅式,就叫原型继承。
16、Promise的理解
什么是Promise?我们⽤Promise来解决什么问题?
我们都知道,Promise是承诺的意思,承诺它过⼀段时间会给你⼀个结果。
Promise是⼀种解决异步操作编程的⽅案,相⽐回调函数和事件更合理和更强⼤。
从语法上讲,promise是⼀个对象,从它可以获取异步操作的信息。
Promise有三种状态
1、pending 初始状态也叫等待状态
2、fulfiled成功转态
3、rejected失败状态
Promise的两个特点
1、Promise对象的状态不受外界影响
2、Promise的状态⼀旦改变,就不会再变,任何时候都可以得到这个结果,状态不可逆
Promise的三个缺点
1、⽆法取消Promise,⼀旦新建他就会⽴即执⾏,⽆法中途取消
2、如果不设置回调函数,Promise内部抛出的错误,不会映到外部
3、当处于pending(等待)状态时,⽆法得知⽬前进展到哪⼀个阶段,是刚刚开始还是即将完成
Promise是⽤来解决两个问题的
isee考试1、回调地狱,代码难以维护,尝尝第⼀个的函数的输出是第⼆个函数的输⼊这种现象
2、promise可以⽀持多并发的请求,获取并发请求中的数据这个
这个Promise可以解决异步的问题吗,本⾝不能说Promise是异步的
17、请简述async的⽤法
Async就是generation和Promise的语法糖,async就是将generation的 * 换成async,将yiled换成awite。
函数前必须加⼀个async,异步操作⽅法前加⼀个await关键字,意思就是等⼀下,执⾏完了再继续⾛,注意:await只能在async函数中运⾏,否则会报错
Promise如果返回的是⼀个错误的结果,如果沒有做异常处理就会报错,所以try…catch捕获⼀下异常就可以了。springcloud商城项目
18、⼀个页⾯从输⼊url到页⾯加载显⽰完成,这个过程都发⽣了什么?
分四个步骤
当发送⼀个URL请求时,不管这个URL是Web页⾯的URL还是Web页⾯上每个资源的URL,浏览器都会开启⼀个线程来处理这个请求,同时在远程DNS服务器上启动⼀个DNS查询。这能使浏览器获得请求对应的IP地址。
浏览器与远程Web服务器通过TCP三次握⼿协商来建⽴⼀个TCP/IPl连接。该握⼿包括⼀个同步报⽂,⼀个同步-应答报⽂和⼀个应答报⽂,这三个报⽂在浏览器和服务端之间传递。该握⼿⾸先由客户端尝试建⽴起通信,然后服务器响应并接收客户端的请求,最后由客户端最后由客户端发出请求已被接受的报⽂。
⼀旦TCPIP连接建⽴,浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器到资源并使⽤HTTP响应返回该资源
此时,Web服务器提供资源服务,客户端开始下载资源。
19、请简述js中 .call()与 .apply() 的区别。
apply:调⽤⼀个对象的⼀个⽅法,⽤另⼀个对象替换当前对象。
call:调⽤⼀个对象的⼀个⽅法,⽤另⼀个对象替当前对象
从定义中可以看出,call和apply都是调⽤对象的⼀个⽅法,⽤另⼀个对象替换当前对象,⽽不同之处在于传递的参数,apply最多只能有两个参数—新this对象和⼀个数组argArray,如果arg不是数组则会报错。
相同点:两个⽅法产⽣的作⽤是完全⼀样的。call,apply作⽤就是借⽤别⼈的⽅法来调⽤,就像调⽤⾃⼰的⼀样。
不同点:⽅法传递的参数不同。
20、为什么会造成跨域?请简述同源策略。
出现跨域问题的原因:
在前后端分离的模式下,前后端的域名是不⼀致的,此时就会发⽣跨域访问问题。在请求的过程中我们要想获取数据⼀般都是post/get请求,所以…跨域问题出现。
同源策略:
是由NetScape提出的⼀个著名的安全策略。所谓的同源,指的是协议,域名,端⼝号相同,浏览器出于安全⽅⾯的考虑,只允许本域名下的接⼝交互,不同源的客户端脚本,在没有明授权的情况下,不能读写对⽅的资源。
21、请说说This的指向问题
在JavaScript中,this通常指向我们正在执⾏的函数本⾝,或者是指向该函数所属的对象。
全局的this → 指向的是Window
对象中的this → 指向其本⾝
事件中的this → 指向事件对象
22、什么是jsonp ⼯作原理是什么?他为什么不是真正的ajax?
jsonp其实就是⼀个跨域解决⽅案。
js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的。
所以可以把要请求的数据封装成⼀个js语句,做⼀个⽅法的调⽤。
跨域请求js脚本可以得到此脚本。得到js脚本之后⽴即执⾏。
可以把数据作为参数传递到⽅法中。就可以获得数据。从⽽解决跨域问题。
jsonp原理(动态创建scrpit标签,回调函数)
浏览器在js请求中,是允许通过script标签的src跨域请求,可以在请求的结果中添加回调⽅法名,在请求页⾯中定义⽅法,就可以获取到跨域请求的数据。
为什么不是真正的ajax?
ajax和jsonp这两种技术在调⽤⽅式上“看起来”很像,⽬的也不⼀样,都是请求⼀个url,然后把服务器返回的数据进⾏处理,因此jquery 和ext等框架都把jsonp作为ajax的⼀种形式进⾏了封装;
但ajax和jsonp其实本质上是不同的东西。ajax的核⼼是通过XmlHttpRequest获取本页⾯,⽽jsonp的核⼼则是动态添加
< script>标签来调⽤服务器提供的js脚本。
所以说ajsx和jsonp的区别不在于是否跨域,ajax通过服务端代理⼀样可以实现跨域,jsonp本⾝也不排斥同域的数据的获取。
还有就是,jsonp是⼀种⽅式或者说⾮强制协议,如同ajax⼀样,他也不⼀定⾮要json格式来传递数据,如果你愿意,字符串也⾏,只不过这样不利于jsonp提供公开服务。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论