2019前端面试题常见——js篇

js的数据类型
简单数据类型：Number String Boolean Object
引用类型：Object Array Function

判断 js 类型的方式
typeof
可以判断出’string’,‘number’,‘boolean’,‘undefined’,‘symbol’
但判断 typeof(null) 时值为 ‘object’; 判断数组和对象时值均为 ‘object’

Array.isArray()
用于判断是否为数组

数组操作的方法
shift：删除第一位 并返回删除的元素
unshift：数组最前面添加数据
pop:删除最后一位 并返回删除的元素
splice:第一位起始值 第二位删除的数量 第三到N是添加到数组中
join:将数组转化为字符串
push：向数组末尾添加元素并返回新的数组长度
reverse：翻转数组
slice：（start，end）截取数组
indexOf:查找数组中数据是否存在并返回其索引值
concat：将数组连接到数组末尾
sort：数组排序

null 与 undefined 的不同点是什么呢？
共同点：都是原始类型，保存在栈中变量本地。
不同点：
（1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值，例如：
var a; // a 自动被赋值为 undefined
（2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用，例如：
var emps = [‘ss’,‘nn’];
emps = null; // 释放指向数组的引用

懒加载的三种方式
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

举例说明一下什么是事件委托?
事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果

原型链
每个构造函数都有原型对象，每个构造函数实例都包含一个指向原型对象的内部指针（proto），如果我们让第一个构造函数的原型对象等于第二个构造函数的实例，结果第一个构造函数的原型对象将包含一个指向第二个原型对象的指针，再然第三个原型对象等于第一个构造函数的实例，这样第三个原型对象也将包含指向第一个原型对象的指针，以此类推，就够成了实例于原型的链条，这就是原型链的基本概念

闭包的概念：闭包就是能读取其他函数内部变量的函数。
优点：
避免全局变量的污染
希望一个变量长期存储在内存中（缓存变量）
缺点：
内存泄露（消耗）
常驻内存，增加内存使用量
删除闭包 直接 funtion= null; 就可以了。
function foo() {
var a = 20
function bar() {
a = a * 2;
return a
}
return bar //返回一个内嵌函数
}
var baz = foo() //函数在外面调用，能访问的a变量, 函数运行在定义他们的作用域中
//bar定义在foo中，就能访问foo定义的所有变量
console.log(‘222’, baz()) //40
console.log(‘222’, baz()) //80
console.log(‘222’, baz()) //160
var baz2 = foo()
console.log(‘222’, baz2()) //40

简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

json和jsonp的区别?
json返回的是一串json格式数据；而jsonp返回的是脚本代码（包含一个函数调用）
jsonp的全名叫做json with padding，就是把json对象用符合js语法的形式包裹起来以使其他的网站可以请求到，也就是将json封装成js文件传过去。

jQuery获取的dom对象和原生的dom对象有何区别？
js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。

js继承的几种方式
原型链继承
构造函数继承
组合继承（组合原型链与构造函数继承）

es6的新特性
新增变量声明方式：let 块级作用域 const常量声明
promise
箭头函数：不需要function关键字来创建函数，可以省略return关键字，继承当前上下文的this关键字
Object.assign 浅拷贝
…扩展符号 浅拷贝 let arr = [2,3,4]; let result = […arr];
函数参数可以直接设置默认值：function(name=“xiao”){}
``反斜号模板拼接，变量用${}
结构赋值：let [a,b,c] = [1,2,3]
Set 的成员具有唯一性: let set2 = new Set([4,5,6,5])
　 console.log(‘array to set 1:’, set2) =>{4, 5, 6}
Array.from([1,2,3]) // 返回和原数组一致
字符串操作
startsWith() 判断字符串是否以 XX 开头
endsWith() // 判断字符串是否以 XX 结尾
includes // let str = ‘liaoke’; str.includes(‘ao’);

事件冒泡与事件代理与事件队列
事件冒泡：当一个元素接收到事件的时候，会把它接收到的事件传给自己的父级，一直到window.
事件代理：
　$(“div”).on(“click”,function(){})
js是单线程，任务按顺序执行，如果一个任务很耗时，下一个任务不得不等待。为了避免这种阻塞，我们需要一种非阻塞机制。这种非阻塞机制是一种异步机制，即需要等待的任务不会阻塞主执行栈中同步任务的执行。
运行机制：
所有同步任务都在主线程上执行，形成执行栈。
等待任务的回调结果进入任务队列
当主执行栈中的同步任务执行完毕后才会读取任务队列，任务队列中的异步任务会塞入主执行栈
异步任务执行完毕后再次进入下一个循环
任务队列分为：
微任务：promises
宏任务: setTimeout、setInterval等

面向对象
面向对象是一种编程思想，简称OOP
面向对象的特征：封装、继承、抽象、多态
js的面向对象编程，用一句话说就是抽象，封装，继承，多态。
抽象就是把一类事物的主要特征跟问题相关的特征抽取出来，使用函数进行封装（不考虑内部实现原理，只考虑它功能使用）通过原型实现继承（通俗理解就是父母能干的事孩子也能干比如吃饭，睡觉。在JS中，比如有一个对象A，A中有一些功能，现在从A中继承出一个对象B，这个对象B就具有对象A的所有功能。）
js是弱类型语言天然具备多态的特性

怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

浅拷贝和深拷贝
浅拷贝
第一层为深拷贝
Object.assign()
Array.prototype.slice()
扩展运算符 …
深拷贝
JSON.parse(JSON.stringify())

ES6 的 Set 去掉数组重复的
let arr = [1,1,2,3,4,5,5,6]
let arr2 = […new Set(arr)]

四种常见的内存泄漏：全局变量，未清除的定时器，闭包，以及 dom 的引用
全局变量 不用 var 声明的变量，相当于挂载到 window 对象上。如：b=1; 解决：使用严格模式
被遗忘的定时器和回调函数
闭包
没有清理的 DOM 元素引用

在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。
数组去重的方法