在学习完原生js之后结合面试当中的问题做了如下总结。
内容上没有做到精细,后续会逐渐完善,有什么不足和需要补充的欢迎大家给出宝贵意见,虚心接受,欢迎前来技术探讨。
document.write()和innerHTML的区别?
document.write是直接将内容写入页面的内容流,会导致页面全部重绘
innerHTML将内容写入某个DOM节点,不会导致页面全部重绘
JS中的数据类型有哪些?
基础数据类型 ,
Undefined
、Null
、Boolean
、Number
和String
引用数据类型 ,Object
JS中基本类型和引用类型的区别?
基本数据类型是按值访问的.
引用数据类型在栈内存中保存的实际上是对象在堆内存中的引用地址
JS中堆栈和队列的区别?
堆栈和队列都是动态的集合.
堆栈遵循先进后出的策略. 比如: 数组的push() 和 pop() 方法,实现类似栈的行为.
队列遵循先进先出的策略. 比如: 数组的shift() 和 unshift() 方法,实现类似队列的行为.
检测变量的数据类型的方法有哪些?
1.
typeof
, 可用于检测基本类型,但碰到引用类型均返回为object。(例 : typeof arr === “类型”)
2.instanceof
, 可用于引用类型的检测,但对于基本类型是不生效的
3.constructor
, 可用于检测js的基本类型和引用类型, 但当对象的原型更改之后,constructor便失效了
4.Object.prototype.toString.call()
, 可用于检测js所有的数据类型.
JS中==
和===
的区别是什么?
首先
==
用来检测两个操作数是否相等,这里的相等定义的非常宽松,可以允许进行类型转换, 只比较操作数的值
其次===
用来检测两个操作数是否严格相等, 会同时比较操作数的值, 操作数的类型, 操作数的引用地址.
js开启严格模式有哪些影响?
变量:
var
、delete
、变量关键字
对象: 只读属性、 对象字面量属性重复申明
函数:参数重名、arguments
对象、申明
其他:this
、eval
、关键字…
** break和continue的区别是什么**
break
和continue
的区别是 , break是直接结束循环, 继续执行循环后的其他语句, 而continue呢,它是跳过本次循环,继续执行下一次循环.
谈一谈你理解的变量提升, 函数提升?
所谓的变量提升和函数提升, 是将所有变量声明和函数声明提升到当前作用域的顶端
对于变量提升, 只是提升变量声明,并不会将赋值初始化提升
如果声明了同名的变量和函数,函数提升的优先级大于变量
函数上下文(this) 的几种情况.
1.普通函数执行, 内部this默认是window, 严格模式下是undefined
2.对象.方法()执行, 内部this是对象本身.
3.构造函数用new执行, 内部this指向新创建的实例对象
4.箭头函数,箭头函数没有自己的this,箭头函数中的this是箭头函数创建时当前上下文中的this。如果当前上下文没有this就会继续向上寻找 .
5.事件处理函数:函数中的this是当前元素本身
6.函数内部this被call,apply,bind强制修改,以修改后指向为准.
总结: 箭头函数是创建时就已经确定了this,又由于箭头函数本身没有this,所以使用call等方法也无法改变其this指向,第一个参数将被忽略. 普通函数则是执行时才明确this。
说一说call,apply,bind的区别?
相同点: 在JS中,这三者都是用来改变函数内this的指向的, 它们的第一个参数都是this要指向的对象.
不同点: 改变函数内this的指向时, 如果还需要传其他参数: 对于call, 多个参数只能逗号分隔一个一个传入; 对于apply, 多个参数以一个数组的形式传入; 对于bind可以像call那样传参, 由于bind的返回值仍然是一个函数,所以我们还可以在调用的时候再进行传参.
call(对象,参数1,参数2,.....)//返回对象
apply(对象,数组或argument)//返回对象
bind(对象,参数1,参数2)//返回函数
JavaScript中数组的常用方法,至少10个?
会改变数组自身的方法: push, pop, shift, unshift,splice,sort, reverse,
不会改变数组自身的方法: concat, join, slice, toString
ES5数组方法: forEach,map, every, some, filter, reduce, indexOf, lastIndexOf
ES6 数组扩展: from, of, find, findIndex
ES6的新特性有哪些?
1.变量声明: 新增了let和const;
2.模板字符串
3.数据结构: set, map, 对象键值重名简写 , 对象合并 Object.assign() , 解构, 展开运算符… ,
4.函数: 箭头函数, 函数的参数默认值
5.类的支持: 引入了class关键字。
6.模块import,export
7.Promise
如何理解箭头函数, 它有哪些特点?
1.不需要function关键字来创建函数。
2.省略return关键字。在箭头函数中 如果函数体中只有一句代码并且代码的执行结果就是函数的返回值 函数体大括号可以省略
3.改变this指向。箭头函数没有自己的this关键字,箭头函数中使用this,this关键字将指向箭头函数创建时上下文中的this。
ES7的新特性有哪些
数组新增
includes
方法
**求幂运算符
如何理解js中的闭包?
闭包实际上就是一个能够访问另一个函数作用域中变量的函数.
闭包的应用:模拟私有变量的实现, 防抖节流函数, 偏函数与柯里化, bind等等函数
JavaScript中实现异步编程的方式有哪些?
1.回调函数
2.事件监听
3.发布/订阅
4.Promise对象
** 什么是Promise?我们用Promise来解决什么问题**
Promise
是异步编程的一种解决方案. promise有三种状态:pending
(等待态),reslove
(成功态),rejected
(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行
Promise 用来解决传统异步回调出现的回调地狱问题.
** ES8的新特性有哪些,请列举?**
Object.values/Object.entries
String padding(字符串填充)
Object.getOwnPropertyDescriptors
函数参数列表和调用中的尾逗号(Trailing commas)
async/await
描述一下JavaScript防抖函数的原理?
防抖动是将短时间内的多次执行变为最后一次执行
function fangdou(fn,time){
var timer = null;
return function(e){
if(timer){
clearTimeout(timer)
}
console.log("防抖")
timer = setTimeout(()=>{
fn(e)
},time)
}
}
export default fangdou
描述一下JavaScript节流函数的原理?
节流是将短时间内的多次执行变成每隔一段时间执行一次
function jieliu(fn,time){
var timer = null;
return function(){
if(!timer){
timer = setTimeout(()=>{
clearTimeout(timer);
timer = null;
fn();
},time)
}
}
}
export default jieliu
JavaScript中实现继承有哪些方案?
原型链继承
构造函数继承
组合继承
寄生式继承
寄生组合式继承
什么是原型链,原型链的作用是什么?
每一个对象,都有一个原型对象与之关联,这个原型对象它也是一个普通对象,这个普通对象也有自己的原型对象,这样层层递进,就形成了一个链条,这个链条就是原型链.
通过原型链可以实现JS的继承,把父类的原型对象赋值给子类的原型,这样子类实例就可以访问父类原型上的方法了
Object原型上有哪些方法?
1.constructor
2.hasOwnProperty()
3.isPrototypeOf()
5.valueOf()
6.toString()
7.toLocaleString()
浏览器端 event loop 工作流程(原理)是什么?
1.js中有同步任务、异步任务两种
2.同步任务在JS引擎线程执行,形成执行栈
3.执行栈中的同步任务在执行过程中遇到异步任务,异步任务被放入任务队列, 等待执行
4.执行栈中的任务运行完成后(JS引擎空闲),从任务队列中读取异步任务,加入到执行栈,并执行
5.主线程不断重复上面的第三步
请描述一下JavaScript中的异步任务?
异步任务分为宏任务,微任务.
宏任务: script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering
微任务: process.nextTick(Nodejs), Promises, Object.observe, MutationObserver;
当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件,然后再去宏任务队列中取出一个事件。同一次事件循环中,微任务永远在宏任务之前执行.
原生js中获取元素节点的方法有哪些?
通过元素类型的方法来获取
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelector()
querySelectorAll()
getElementsByName()
根据节点关系来获取
parentElement
children
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling
根据特殊属性来获取
document.title
document.body
document.images
document.forms