2023年JS面试题总结

悲伤的猪大肠
1,261 阅读15分钟

JavaScript面试题

img

内联样式>id选择器>Class选择器(类选择器)/伪类选择符/属性选择器>伪元素选择符/类型(元素)选择器

在javascript中,标识符不能以数字开头,即第一个字符不能为数字,必须是字母、下划线“_”或美元符号“$”

而任何不能被转换为数值的值都会导致这个函数返回true

isNaN(NaN); // true isNaN（NaN） 任何不能被转换为数值的值都会导致这个函数返回true isNaN(undefined); // true isNaN({}); // true

isNaN(true); // false isNaN(null); // false isNaN(37); // false

// strings isNaN("37"); // false: 可以被转换成数值 37 isNaN("37.37"); // false: 可以被转换成数值 37.37 isNaN("37,5"); // true isNaN('123ABC'); // true: parseInt("123ABC") 的结果是 123，但是 Number("123ABC") 结果是 NaN isNaN(""); // false: 空字符串被转换成 0 isNaN(" "); // false: 包含空格的字符串被转换成 0

// dates isNaN(new Date()); // false isNaN(new Date().toString()); // true

isNaN("blabla") // true: "blabla"不能转换成数值 // 转换成数值失败，返回 NaN

a++ 与 ++a 的区别

a++ 先赋值后自增

++a 先自增后赋值

var a = 10;b = 20; c = 4; ++b+c+a++的结果是？  35
++b 21
a++ 10
所以++b+c+a++为35

1、JavaScript的typeof返回那些数据类型

img

typeof null； // object

typeof NaN; // number

typeof isNaN; // function

typeof [] ; // object

typeof undefined； // undefined

2、3种强类型转换和2种隐式类型转换

强制：parseInt， parseFloat， Number（）

隐式： ( == )

1 == “1” // true

null == undefined // true

3、split() join() 的区别

split()是切割成数组的形式，join()是将数组转换成字符串

4、数组方法pop() push() unshift() shift()

pop()尾部删除 、 push() 尾部添加 、unshift()头部添加、shift()头部删除

5、事件绑定和普通事件的区别

传统事件绑定和符合 W3C 标准的事件绑定有什么区别？ div1.onclick=function(){}; 1、 如果说给同一个元素绑定了两次或者多次相同类型的事件， 那么后面的绑定会覆盖前面 的绑定 2、 不支持 DOM 事件流 事件捕获阶段 -> 目标元素阶段 -> 事件冒泡阶段

addEventListener

1.如果说给同一个元素绑定了两次或者多次相同类型的事件，所有的绑定将会依次触发

2.事件绑定支持DOM事件流的 事件捕获阶段 -> 目标元素阶段 -> 事件冒泡阶段

3.进行事件绑定传参不需要on前缀

ie9 以前： attachEvent/detachEvent 1、 进行事件类型传参需要带上 on 前缀 2、 这种方式只支持事件冒泡， 不支持事件捕获

事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件

6、IE 和 DOM 事件流的区别

1.执行顺序不一样

2.参数不一样

3.事件加不加on

4.this指向问题

IE9 以前： attachEvent(“ onclick” )、 detachEvent(“ onclick” ) IE9 开始跟 DOM 事件流是一样的， 都是 addEventListener

7、call 和 apply的区别

相同点：都是为了用一个本不属于一个对象的方法，让这个对象去执行

不同点：参数形式不同

call方法跟apply方法并没有明显区别，只是传递参数的形式不一样。

call(obj,pra,pra)：一个一个的传递参数,后面是单个参数；

apply(obj,[args])：以数组的形式传递,后面是数组。

toString.call([], 1,2,3) => [object Array]

toString.apply([],[1,2,3]) => [object Array]

Object.call(this.obj1,obj2,obj3)

Object.apply(this,arguments)

8、b继承a的方法

考点：继承的多种方式

function b() {}

b.prototype = new a;

9、JavaScript this 指针、 闭包、 作用域

this指针： 指向调用的上下文

闭包： 内层作用域可以访问外层作用域的变量

通俗的来说就是：JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。

作用域： 定义一个函数就开辟了一个局部作用域，整个js执行有一个全局作用域

10、事件委托

事件委托就是利用事件冒泡，把原本需要绑定在子元素上的响应事件，让父元素担当事件监听的职务

11、闭包是什么， 有什么特性， 对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

闭包的缺点：滥用闭包会造成内存泄漏，因为闭包中引用到的包裹函数中定义的变量都永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数。

写一个简单的闭包

function outer() {
    var num = 1;
    function inner() {
        var n = 2
        alert(n + num);
    }
    return inner;
}
outer()();

12、如何阻止事件冒泡和默认事件

e.stopPropagation(); // 标准浏览器

event.canceBubble = true; // ie9之前

阻止默认事件：

为了不让 a 点击之后跳转， 我们就要给他的点击事件进行阻止

return false

e.preventDefault();

13、添加 删除 替换 插入到某个接点的方法

obj.appendChild()

obj.insertBefore() // 将新的子节点添加到当前节点的末尾 原生的js中不提供 insertAfter();

obj.replaceChild() // 替换

obj.removeChild() // 删除

14、javascript 的本地对象， 内置对象和宿主对象

本地对象为 array obj regexp等可以new实例化

内置对象为 gload Math 等不可以实例化的

宿主为浏览器自带的document，window等

15、document load 和 document ready 的区别

Document.onload 是在结构和样式加载完才执行js

window.onload 不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，全部加载完才会触发window.onload事件

Document.ready原生中没有这个方法， jquery 中有 $(document).ready() ,是DOM结构绘制完毕后就执行，不必等到加载完毕。

16、“==”和“===”的不同

前者会自动转换类型

后者不会

1=“1” null==undefined

===先判断左右两边的数据类型，如果数据类型不一致，直接返回false之后才会进行两边值的判断

17、编写一个数组去重的方法

var arr = [1,1,3,4,2,4,7]; => [1,3,4,2,7] (推荐es6新特性Set方法)

一个比较简单的实现就是：

1、先创建一个空数组，用来保存最终的结果

2、循环原数组中的每个元素

3、再对每个元素进行二次循环，判断是否有与之相同的元素，如果没有，将把这个元素放到新数组中

4、返回这个新数组

  1. 第一种：用es6的新特性set去重
var arr = [1,1,3,4,2,4,7]
var newArr = new Set(arr);
console.log(newArr)
可以简写成，
var arr = [1,1,3,4,2,4,7]
var newArr = [...new Set(arr)]
console.log(newArr)

2.第二种用双层for循环方式去重（这个好像稍微有些复杂）

var arr=[1,2,3,3,4,5,5,6]
for(var i=0;i<arr.length;i++){
	for(var j=i+1;j<arr.length;j++){
			if(arr[i]==arr[j]){
			arr.splice(j,1)
				j--
			}
	}
}
console.log(arr)

3.第三种利用indexOf去重 indexOf（）要检索的值没有出现，该方法返回-1 要检索的值出现的话就返回0

var arr=[1,2,3,3,4,5,5,6]
	var newarr=[]
	for(var i=0;i<arr.length;i++){
		if(newarr.indexOf(arr[i]) == -1){
		newarr.push(arr[i])
		}
	}
	console.log(newarr)

18、JavaScript是一门什么语言，有哪些特点？

脚本编程语言，没有标准答案 。

运行环境：浏览器中的JS引擎（v8..)

语言特点：面向对象，动态语言

19、JavaScript的数据类型都有什么？

基本数据类型：number、Boolean、undefined、null、String、Object

引用数据类型：Object（Array，Date，RegExp，Function）

判断某变量是否为数组数据类型

① slice()方法

② obj instanceof Array

③ ES5中定义了新方法 Array.isArray()，保证其兼容性，最好方法如下：

toString.call(18); // [object Number]

toString.call(""); // [object String]

解析这种简单的数据类型直接通过 typeof 就可以直接判断

toString.call 常用于判断数组、正则这些复杂类型

toString.call(/ [0-9] {10} /) // [object RegExp]

if(typeof Array.isArray==="undefined"){
	Array.isArray = function(arg){
	return Object.prototype.toString.call(arg)==="[object Array]"
	};
}

20、已知 ID 的 Input 输入框， 希望获取这个输入框的输入值， 怎么做？ (不使用第三方框架)

document.getElementById('ID').value

21、获取页面中所有的checkbox怎么做？（不使用第三方框架）

var domList = document.getElementByTagName('input')
var checkBoxList = [];  //返回的所有的checkbox
var len = domList.length;  //缓存到局部变量
while (len--) {
	if(domList[len].type == 'checkbox') {
		checkBoxList.push(domList[len]);
	}
}

22、设置一个已知ID到DIV的html内容为xxxx，字体颜色设置为黑色

（不使用第三方框架）7

var dom = document.getElementById("ID")
dom.innerHTML = "xxxx"
dom.style.color = "#000"

23、当一个 DOM 节点被点击时候， 我们希望能够执行一个函数， 应该怎么做？

直接在DOM里绑定事件： <div onclick="test()"></div>

在JS里通过onclick绑定： xxx.onclick = test

通过事件添加进行绑定： addEventListener(xxx, 'click', test)

Javascript 的事件流模型都有什么？

"事件冒泡"：事件开始由最具体的元素接受，然后逐级向上传播

"事件捕捉"：事件由不具体的节点现接受，然后逐级向下，一直到最具体的

"DOM事件流"：三个阶段：事件捕捉，目标阶段，事件冒泡

24、看下列代码输出为何？ 解释原因

var a;
alert(typeof a); // “undefined”    	   原因：声明变量但并未对其赋值进行初始化
//alert(b); // not defined报错   		 原因：b 未声明
b=10;
alert(typeof b);//” number”

解释： undefined 是一个只有一个值的数据类型， 这个值就是“ undefined” ， 在使用 var 声明变量但并未对其赋值进行初始化时， 这个变量的值就是 undefined。 而 b 由于未声明将 报错。 注意未申明的变量和声明了未赋值的是不一样的。

undefined会在一下三种情况下产生：

1、一个变量定义了却没有被赋值

2、想要获取一个对象上不存在的属性或者方法；

3、一个数组中没有被赋值的元素

注意区分 undefined 跟 not defnied(语法错误)是不一样的

25、看下列代码,输出什么？ 解释原因

var a = null;
alert(typeof a); //object

解释：null是一个只有一个值的数据类型，这个值就是null。标识一个空指针对象，所以用typeof检测会返回“object”。

26、截取字符串abcdefg的edg

alert('abcdefg'.substring(4));

27、列举浏览器对象模型BOM里常用的至少4个对象，并举例window对象的常用方法至少5个

对象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

28、简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明

Document.getElementById 根据元素id查找元素

Document.getElementByTagName 根据指定的元素名查找元素

Document.getElementByName 根据元素name查找元素

29、javascript中有哪几种数据类型，分别写出中文和英文。

string字符串、boolean布尔、Number数值、undefined未定义、null空值 、object对象

30、简述创建函数的几种方式

第一种（函数声明）:

function sum1(num1,num2) {
    return num1+num2;
}

第二种（函数表达式）:

var sum2 = function(num1,num2) {
    return num1+num2
}
匿名函数：
function(){};只能自己执行自己

第三种（函数对象方式）:

var sum3 = new Function("num1", "num2", "return num1+ num2");

31、Javascript如何实现继承？

原型链继承、借用构造函数继承、组合继承、寄生式继承、寄生组合继承

32、JavaScript创建对象的几种方式？

工厂方式、构造函数方式、原型模式、混合构造函数原型模式、动态原型方式

33、把 Script 标签 放在页面的最底部的 body 封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

如果说放在 body 的封闭之前， 将会阻塞其他资源的加载 如果放在 body 封闭之后， 不会影响 body 内元素的加载

34、iframe的优缺点

优点：

1.解决加载缓慢的第三方内容如图标和广告等的加载问题

2.并行加载脚本

缺点：

1.iframe会堵塞主页面的onLoad事件

2.即使内容为空，加载也需要时间

3.没有语义

35、请你谈谈cookie的弊端

缺点：

1.cookie数量和长度的限制，每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉

2.安全性问题，如果cookie被人拦截了，那么就可以获取到所有的session信息，即使加密也于事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的。

3.有些状态不可能保存在客户端.例如， 为了防止重复提交表单， 我们需要在服务器端保存 一个计数器。 如果我们把这个计数器保存在客户端， 那么它起不到任何作用。

36、DOM操作----怎样添加、删除、移动、赋值、创建和查找节点

  1. 创建新节点
createDocumentFragment() // 创建一个DOM片段
createDocument() // 创建一个具体的元素
createTextNode() // 创建一个文本节点
  1. 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertChild()

3.查找

getElementByTagName() // 通过标签名称
getElementById() // 通过元素Id，唯一性
getElementByName()  // 通过元素的Name属性的值

37、js延迟加载的方式有哪些？

  1. defer和async
  2. 动态创建DOM方式（创建script，插入DOM中，加载完毕后callBack）
  3. 按需异步载入js

38、document.write和innerHTML的区别？

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

39、哪些操作会造成内存泄漏？

内存泄漏指任何对象在你不在拥有或需要它之后仍然存在。

  1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
  2. 闭包
  3. 控制台日志
  4. 循环（在两个对象批次引用且彼此保留时，就会产生一个循环）

40、JavaScript的typeof返回哪些数据类型？

object、undefined、number、boolean、functionn

41、解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

42、字符串反转，如将 ‘12345678’ 变成 ‘87654321’

split 是将字符串转换为数组的形式

join是将数组转换为字符串的形式

思路：先将字符串转换为数组 split(),利用数组的反序函数 reverse()颠倒函数，再利用join转为字符串。

var str = '12345678';

str = str.split('').reverse().join('')

43、生成5个不同的随机数

思路：5个不同的数，每生成一次就和前面的所有的数字相比较，如果有相同的，则放弃当前生成的数字

var num1 = [];
for (var i = 0; i < 5; i++) {
	num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1,10]
    for(var j = 0; j < 1; j++) {
        if(num1[i] == num1[j]) {
            i--;
        }
    }
}

44、阶乘函数

Number.prototype.N = function() {
	var re = 1;
	for(var i = 1; i <= this; i++) {
		re *= i;
	}
	return re;
}
var num = 5;
alert(num.N())

45、window.location.search返回的是什么？

查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获取相应的参数值

返回值： ?ver=1.0&id=timlq 也就是问号后面的！

//url:http://www.sina.com/getage?number=1&year=2023

46、window.loaction.hash 返回的是什么？

描点 返回值： #age

//url:http://www.sina.com/getage?#age

47、window.loaction.reload()作用？

刷新当前页面

48、JavaScript中的垃圾回收机制

​ 在JavaScript中，如果一个对象不再被引用，那么这个对象就会比GC回收。如果两个对象相互引用，而不再被第三者所引用，那么这两个相互引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。

49、精度

问题：js精度不能精确到0.1

var n = 0.3,m = 0.2, i = 0.2, j = 0.1;
alert((n - m) == (i - j)); //false
alert((n-m) == 0.1); //false
alert((i-j)==0.1); //true

50、加减运算

alert('5' + 3);   // 53 string
alert('5' + '3'); // 53 string
alert('5' - 3);   // 2  number
alert('5' - '3'); // 2  number

51、JS的继承性

window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
alert(this.color);
} 
考点： 1、 this 的指向
	  2、 call 的用法
sayColor(); //red
sayColor.call(this); //red this 指向的是 window 对象
sayColor.call(window); //red
sayColor.call(o); //blue

52、什么是同源策略？

指：同协议、端口、域名的安全策略，由网景公司提出来的安全协议。

53、为什么不能定义1px左右的div容器？

IE6 下这个问题是因为默认的行高造成的， 解决的方法也有很多， 例如：
overflow:hidden | zoom:0.08 | line-height:1px

54、结果是：

var bool = !!2;
alert(bool);  // true;

双向非操作可以把字符串和数字转换为布尔值

55、声明对象、添加属性，输出属性

var obj = {
    name: 'zhaoshiya',
    showName: function() {
        alert(this.name);
    }
}
obj.showName();

56、BOM对象有哪些，列举window对象？

1.window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

2.document对象，文档对象；

3.location对象，浏览器当前URL信息；

4.navigator对象，浏览器本身信息；

5.screen对象，客户端屏幕信息；

6.history对象，浏览器访问历史信息；

57、简述link和import的区别

  1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事物；@import属于CSS范畴，只能加载CSS。
  2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  3. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本浏览器不支持。
  4. link支持使用JavaScript控制DOM去改变样式；而@import不支持。

58、你如何优化自己的代码？

代码重用，

避免全局变量，

拆分函数避免函数过于臃肿：单一职责原则，

适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，都应该写出这个业务逻辑的具体过程，

内存管理，尤其是闭包中的变量释放。

59、简要描述web前端性能需要考虑哪些方面，进行优化。

（1）减少http请求：1.小图整合弄成大图，精灵图 2.合理的设置缓存 3.资源合并，压缩

（2）将外部的js文件置底

60、简述 readyonly 与 disabled 的区别

readyonly只针对input(text/password) 和 textarea有效，

而disabled对于所有的表单元素都有效，当表单元素在使用了disabled后，我们将表单以POST和GET的方式进行提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。

61、写出3个使用this的典型应用

构造函数中使用this，原型中使用this，对象字面量使用this

62、请尽可能详尽的解释ajax的工作

思路：先解释异步，再解释ajax的工作原理

Ajax的原理简单来说通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，它是IE5中首先引入的，是一种支持异步请求的技术。简单来说，也就是JavaScript可以及时向服务器提出请求和处理响应，而不堵塞用户，。达到无刷新的效果。

63、为什么扩展JavaScript内置对象不是好的做法？

因为扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性

64、三元表达式

:?

65、HTTP 协议中， GET 和 POST 有什么区别？ 分别适用什么场景 ？

get传送的数据长度有限制，post没有

get通过url传递，在浏览器地址栏可见，post是报文中传递

适用场景：

post一般用于表单提交

get一般用于简单的数据查询，严格要求不是那么高的场景

66、HTTP 状态消息 200 302 304 403 404 500 分别表示什么

200： 请求已成功， 请求所希望的响应头或数据体将随此响应返回。 302： 请求的资源临时从不同的 URI 响应请求。 由于这样的重定向是临时的， 客户端应当 继续向原有地址发送以后的请求。 只有在 Cache-Control 或 Expires 中进行了指定的情况下， 这个响应才是可缓存的 304： 如果客户端发送了一个带条件的 GET 请求且该请求已被允许， 而文档的内容（ 自上 次访问以来或者根据请求的条件） 并没有改变， 则服务器应当返回这个状态码。 304 响应禁 止包含消息体， 因此始终以消息头后的第一个空行结尾。 403： 服务器已经理解请求， 但是拒绝执行它。 404： 请求失败， 请求所希望得到的资源未被在服务器上发现。 500： 服务器遇到了一个未曾预料的状况， 导致了它无法完成对请求的处理。 一般来说， 这 个问题都会在服务器端的源代码出现错误时出现。

67、列举常用的web页面开发，调试以及优化工具

hbuider,vscode,webstorm,chrome,dw

68、如何判断一个js变量是数组类型

ES5: Array.isArray()

[] instanceof Array

Object.prototype.toString.call(); // "[object Array]"

69、请列举js数组类型中的常用方法

Array.concat() 连接数组

方法描述
concat()连接两个或更多的数组， 并返回结果。
join()把数组的所有元素放入一个字符串。 元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素， 并返回新的长度。
reverse()颠倒数组中元素的顺序。
shift()删除并返回数组的第一个元素
slice()从某个已有的数组返回选定的元素
sort()对数组的元素进行排序
splice()删除元素， 并向数组添加新元素。
toSource()返回该对象的源代码。
toString()把数组转换为字符串， 并返回结果。
toLocaleString()把数组转换为本地数组， 并返回结果。
unshift()向数组的开头添加一个或更多元素， 并返回新的长度。
valueOf()返回数组对象的原始值

70、 如何获取对象 a 拥有的所有属性（ 可枚举的、 不可枚举的，不包括继承来的属性）

Object.keys
或者使用 for...in并过滤继承的属性
for(o in obj) {
    if(obj.hasOwnproperty(o)) {
    // 把o这个属性放入到一个数组中
    }
}

71、不用任何插件，如何实现一个tab栏切换

通过改变不同层的css设置层的显示和隐藏

72、三种弹窗

prompt、confirm、alert

73、如何显示/隐藏一个 dom 元素？ 请用原生的 JavaScript 方法实现

dom.style.display=”none”;
dom.style.display=””;

74、JavaScript 的循环语句有哪些？

while、 for 、do while、 for…in

75、作用域-编译期执行期以及全局局部作用域问题

理解 js 执行主要的两个阶段： 预解析和执行期

76、列举浏览器对象模型 BOM 里常用的至少 4 个对象， 并列举 window 对象的常用方法至少 5 个

对象： window document location screen history navigator 方法： alert() confirm() prompt() open() close() setInterval() setTimeout() clearInterval() clearTimeout()

77、事件代理怎么实现·？

在元素的父节点注册事件，通过事件冒泡，在父节点捕获事件。

78、 输出今天的日期， 以 YYYY-MM-DD 的方式， 比如今天是 2014 年 9 月 26 日，则输出 2014-09-26

var d = new Date();
// 获取年， getFullYear()返回 4 位的数字
var year = d.getFullYear();
// 获取月， 月份比较特殊， 0 是 1 月， 11 是 12 月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

79、程序中铺货异常的方法？

window.error

try{} catch()  finally{}

80、在JavaScript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组） ： 无法直接调用数组方法或期望 length 属性有什么特殊的行为， 但仍可以对真正数组遍历方法来遍历它们。 典型的是函数的 argument 参数， 还有像调用getElementsByTagName,document.childNodes 之类的,它们都返回 NodeList 对象都属于伪数组。 可以使用 Array.prototype.slice.call(fakeArray)将数组转化为真正的 Array 对象。

avatar
文章
阅读
粉丝