javascript面试题大全_Js基础面试题（附答案）

近年来，从事web前端开发的程序员越来越多，都需要使用JavaScript，这篇文章主要整理一些最常见的javascript面试题以及答案。

介绍JavaScript的数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（独一无二的值）。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

基本数据类型与引用类型在存储上有什么区别?

1.存储位置不同:

基本数据类型：以栈的形式存储, 保存与赋值指向数据本身, 用typeof 来判断类型,存储空间固定。

引用类型：以堆的形式存储, 保存于赋值指向对象的一个指针, 用instanceof 来判断类型 , 存储空间不固定。

2.传值方式不同：

基本数据类型按值传递，无法改变一个基本数据类型的值

引用类型按引用传递，应用类型值可以改变

判断 js 类型的方式

1. typeof

可以判断出'string','number','boolean','undefined','symbol'

但判断 typeof(null) 时值为 'object'; 判断数组和对象时值均为 'object'

2. instanceof

原理是构造函数的 prototype 属性是否出现在对象的原型链中的任何位置

functionA() {}
let a = new A();
a instanceof A     //true,因为 Object.getPrototypeOf(a) === A.prototype;

3. Object.prototype.toString.call()

常用于判断浏览器内置对象,对于所有基本的数据类型都能进行判断，即使是 null 和 undefined

Object.prototype.toString.call(null)//"[object Null]"Object.prototype.toString.call(undefined)//"[object Undefined]"Object.prototype.toString.call(Object)//"[object Function]"

4. Array.isArray()

用于判断是否为数组。

typeof运算符和instanceof运算符以及isPrototypeOf()方法的区别

typeof是一个运算符，用于检测数据的类型，比如基本数据类型null、undefined、string、number、boolean，以及引用数据类型object、function，但是对于正则表达式、日期、数组这些引用数据类型，它会全部识别为object

instanceof同样也是一个运算符，它就能很好识别数据具体是哪一种引用类型。它与isPrototypeOf的区别就是它是用来检测构造函数的原型是否存在于指定对象的原型链当中；

而isPrototypeOf是用来检测调用此方法的对象是否存在于指定对象的原型链中，所以本质上就是检测目标不同。

NaN 是什么

NaN 即非数值（Not a Number），NaN 属性用于引用特殊的非数字值，该属性指定的并不是不合法的数字。

NaN 属性 与 Number.Nan 属性相同。

提示： 请使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等，包括它自己。

Js中本地对象？内置对象？宿主对象？

本地对象：ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。包含了：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

内置对象：ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。包含了：Gobal 和 Math。

宿主对象：由ECMAScript实现的宿主环境提供的对象，可以理解为：浏览器提供的对象。所有的BOM和dom都是宿主对象。

栈和堆的区别？

栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；

堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。

描述以下变量的区别：null，undefined或undeclared

null 表示"没有对象"，即该处不应该有值，转为数值时为0。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义，转为数值时为NaN。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

undeclared :js语法错误，没有申明直接使用，js无法找到对应的上下文。

for..in 和 object.keys的区别

Object.keys不会遍历继承的原型属性

for...in 会遍历继承的原型属性

JS中的匿名函数是什么？

匿名函数：就是没有函数名的函数，如：

(function(x, y){
    alert(x + y);  
})(2, 3);

这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。

解释 JS 中的函数提升

JS允许将声明移动到顶部的默认行为称为提升。JS中创建函数的两种方法是函数声明和函数表达式。

函数声明

具有特定参数的函数称为函数声明，在JS中创建变量称为声明。如：

hoisted(); // logs "foo"functionhoisted() {
  console.log('foo');
}

函数表达式

当使用表达式创建函数时，称为函数表达式。如：

notHoisted(); // TypeError: notHoisted is not a functionvar notHoisted = function() {
   console.log('bar');
};

Js隐式转换介绍

在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算

这种无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换

例如1 > "0"这行代码在js中并不会报错，编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小

隐式转换规则：

1. 转成string类型： +（字符串连接符） 2..转成number类型：++/--(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !=== (关系运算符)

2. 转成boolean类型：!（逻辑非运算符）

例子：

console.log([] == []) // falseconsole.log([] == ![]) // trueconsole.log([] !== [])  // trueconsole.log(NaN != NaN) // trueconsole.log(null == undefined) // trueconsole.log(null === undefined) // falseconsole.log(1 == true) // trueconsole.log(null > 0) // falseconsole.log(true + 1) //2console.log(undefined + 1) // NaNconsole.log({} + 1) // [object Object]1console.log([] + {}) // [object Object]console.log([2,3] + [1,2])  //2,31,2

Object.is()与原来的比较操作符"==="、"==” 的区别？

（1）两等号判等，会在比较时进行类型转换；

（2）三等号判等(判断严格)，比较时不进行隐式类型转换，(类 型不同则会返回false)；

（3）Object.is 在三等号判等的基础上特别处理了NaN、-0和+0，保证-0和+0不再相同，但Object.is(NaN, NaN)会返回true。Object.is应被认为有其特殊的用途，而不能用它认为它比其它的相等对比更宽松或严格。

JS 中 == 和 === 区别是什么？

1、对于string,number等基础类型，==和===有区别

1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等。
2）同类型比较，直接进行“值”比较，两者结果一样。

2、对于Array,Object等高级类型，==和===没有区别

进行“指针地址”比较。

3、基础类型与高级类型，==和===有区别

1）对于==，将高级转化为基础类型，进行“值”比较。
2）因为类型不同，===结果为false。

ES5 和 ES6 分别几种方式声明变量

ES5 有俩种：var 和 function

ES6 有六种：增加四种，let、const、class 和 import

注意：let、const、class声明的全局变量再也不会和全局对象的属性挂钩。

什么是事件代理/事件委托？

事件代理/事件委托是利用事件冒泡的特性，将本应该绑定在多个元素上的事件绑定在他们的祖先元素上，尤其在动态添加子元素的时候，可以非常方便的提高程序性能，减小内存空间。

什么是事件冒泡？什么是事件捕获？

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。

注意：IE浏览器用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

如何阻止事件冒泡？

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。例如：

window.event.cancelBubble = true；e.stopPropagation();

return false也可以阻止冒泡。

如何阻止默认事件？

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false，比如：

functionstopDefault( e ) { if ( e && e.preventDefault )            e.preventDefault(); //IE中阻止函数器默认动作的方式  else   window.event.returnValue = false; }

return false也能阻止默认行为。

DOM 事件有哪些阶段？谈谈对事件代理的理解

分为三大阶段：捕获阶段--目标阶段--冒泡阶段

事件代理简单说就是：事件不直接绑定到某元素上，而是绑定到该元素的父元素上，进行触发事件操作时(例如'click')，再通过条件判断，执行事件触发后的语句(例如'alert(e.target.innerhtml)')

好处：(1)使代码更简洁；(2)节省内存开销

如何用原生js给一个按钮绑定两个onclick事件？

使用addEventListener的方式来绑定多个事件。例如

var btn = document.getElementById('btn')btn.addEventListener('click', fn1)btn.addEventListener('click', fn2)functionfn1 () {console.log('我是方法1')  }functionfn2 () {console.log('我是方法2')  }

响应事件有哪些？

onclick鼠标点击某个对象；onfocus获取焦点；onblur失去焦点；onmousedown鼠标被按下等，常用的如下：

1. 鼠标单击事件（ onclick ）

2. 鼠标经过事件（ onmouseover ）

3. 鼠标移开事件（ onmouseout ）