JS的100道经典面试题(一)只看这四篇就够了,收藏起来以后偷偷看

article/2025/11/7 9:29:48

年轻人你不讲武德,耗子尾汁~~~
在这里插入图片描述

总结就是为了形成自己的js知识网,提升自己,加油!

开始干

1、介绍js的基本数据类型  
答: Undefined、Null、Boolean、Number、String

2、js有哪些内置对象? 
答:数据封装类对象:Object、Array、Boolean、Number 和 String
  其他对象:Function、Arguments、Math、Date、RegExp、Error
  
3、this对象的理解 
答:this总是指向函数的直接调用者(而非间接调用者);
  如果有new关键字,this指向new出来的那个对象;
  在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window。
  可以看看我前面的文章 this在不同情况下的指向
  
4、eval是做什么的? 
答:它的功能是把对应的字符串解析成JS代码并运行;
  应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。
  由JSON字符串转换为JSON对象的时候可以用eval,var obj =eval(’(’+ str +’)’)。

5、DOM怎样添加、移除、移动、复制、创建和查找节点
答:// 创建新节点
  createDocumentFragment() //创建一个DOM片段
  createElement() //创建一个具体的元素
  createTextNode() //创建一个文本节点
  // 添加、移除、替换、插入
  appendChild()
  removeChild()
  replaceChild()
  insertBefore() //在已有的子节点前插入一个新的子节点
  // 查找
  getElementsByTagName() //通过标签名称
  getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
  getElementById() //通过元素Id,唯一性

6、null和undefined的区别?
答:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
  undefined
  (1)变量被声明了,但没有赋值时,就等于undefined。
  (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
  (3)对象没有赋值的属性,该属性的值为undefined。
  (4)函数没有返回值时,默认返回undefined。
  null
  (1) 作为函数的参数,表示该函数的参数不是对象。
  (2) 作为对象原型链的终点。
  
7、new操作符具体干了什么呢?
答:
  (1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
  (2)属性和方法被加入到 this 引用的对象中。
  (3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。

8、JSON 的了解?
答:
  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
  格式:采用键值对,例如:{“age”:“12”, “name”:“back”}

9、call() 和 apply() 的区别和作用?
答:
  apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。
  如:function.apply(this,[1,2,3]);
  call()的第一个参数是上下文,后续是实例传入的参数序列。
  如:function.call(this,1,2,3);

10、如何获取UA?
答:
  function whatBrowser() {
  document.Browser.Name.value=navigator.appName;
  document.Browser.Version.value=navigator.appVersion;
  document.Browser.Code.value=navigator.appCodeName;
  document.Browser.Agent.value=navigator.userAgent;
  }
  
11、哪些常见操作会造成内存泄漏?
答:
  内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
  垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
  setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
  闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)。
  
12、线程与进程的区别
答:
  一个程序至少有一个进程,一个进程至少有一个线程。
  线程的划分尺度小于进程,使得多线程程序的并发性高。
  另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。
  线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。
  从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

13、如何解决跨域问题
JSONP:
原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。
由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
优点是兼容性好,简单易用,支持浏览器与服务器双向通信。缺点是只支持GET请求。
JSONP:json+padding(内填充),顾名思义,就是把JSON填充到一个盒子里

<script>function createJs(sUrl){var oScript = document.createElement('script');oScript.type = 'text/javascript';oScript.src = sUrl;document.getElementsByTagName('head')[0].appendChild(oScript);}createJs('jsonp.js');box({'name': 'test'});function box(json){alert(json.name);}
</script>

14、javascript垃圾回收方法

  • 标记清除(mark and sweep)
    这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。
    垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了
  • 引用计数(reference counting)
    在低版本IE中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为0的时候,说明没有变量在使用,这个值没法被访问了,因此可以将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
    在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收,但BOM与DOM对象却是通过引用计数回收垃圾的,也就是说只要涉及BOM及DOM就会出现循环引用问题。

15、快速 排序的思想并实现一个快排?
“快速排序”的思想很简单,整个排序过程只需要三步:
  (1)在数据集之中,找一个基准点
  (2)建立两个数组,分别存储左边和右边的数组
  (3)利用递归进行下次比较
  
注意:只能是数值类型的数据,不能是字符数值类型

<script type="text/javascript">function quickSort(arr){if(arr.length<=1){return arr;//如果数组只有一个数,就直接返回;}var num = Math.floor(arr.length/2);//找到中间数的索引值,如果是浮点数,则向下取整var numValue = arr.splice(num,1);//找到中间数的值var left = [];var right = [];for(var i=0;i<arr.length;i++){if(arr[i]<numValue){left.push(arr[i]);//基准点的左边的数传到左边数组}else{right.push(arr[i]);//基准点的右边的数传到右边数组}}return quickSort(left).concat(numValue,quickSort(right));//递归不断重复比较}alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”</script>

16、ES6的了解
新增模板字符串(为JavaScript提供了简单的字符串插值功能)、箭头函数(操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。)、for-of(用来遍历数据—例如数组中的值。)arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范,提供了原生的Promise对象。增加了let和const命令,用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定,var命令和function命令声明的全局变量,属于全局对象的属性;let命令、const命令、class命令声明的全局变量,不属于全局对象的属性。。还有就是引入module模块的概念。

17、用过哪些设计模式?
(1)工厂模式:
主要好处就是可以消除对象间的耦合,通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
(2)工厂模式解决了重复实例化的问题 ,但还有一个问题,那就是识别问题,因为根本无法 搞清楚他们到底是哪个对象的实例。


function createObject(name,age,profession){//集中实例化的函数var obj = new Object();obj.name = name;obj.age = age;obj.profession = profession;obj.move = function () {return this.name + ' at ' + this.age + ' engaged in ' + this.profession;};return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例

(3)构造函数模式
使用构造函数的方法 ,即解决了重复实例化的问题 ,又解决了对象识别的问题,该模式与工厂模式的不同之处在于:
构造函数方法没有显示的创建对象 (new Object());
直接将属性和方法赋值给 this 对象;
没有 renturn 语句。
(4)原型链模式
(5)构造和原型链的组合模式

18、说说你对闭包的理解
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念
闭包有三个特性
(1)函数嵌套函数
(2)函数内部可以引用外部的参数和变量
(3)参数和变量不会被垃圾回收机制回收

19、请你谈谈Cookie的弊端
cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。
第一:每个特定的域名下最多生成20个cookie
(1)IE6或更低版本最多20个cookie
(2)IE7和之后的版本最后可以有50个cookie。
(3)Firefox最多50个cookie
(4)chrome和Safari没有做硬性限制
IE和Opera 会清理近期最少使用的cookie,Firefox会随机清理cookie。
cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节。
IE 提供了一种存储可以持久化用户数据,叫做userdata,从IE5.0就开始支持。每个数据最多128K,每个域名下最多1M。这个持久化数据放在缓存中,如果缓存没有清理,那么会一直存在。
优点:极高的扩展性和可用性
通过良好的编程,控制保存在cookie中的session对象的大小。
通过加密和安全传输技术(SSL),减少cookie被破解的可能性。
只在cookie中存放不敏感数据,即使被盗也不会有重大损失。
控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点:
Cookie数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉.
安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。
有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

20、浏览器本地存储
在较高版本的浏览器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式:sessionStoragelocalStorage

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是cookie也是不可以或缺的:cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

21、cookie 和session 的区别:
(1)cookie数据存放在客户的浏览器上,session数据放在服务器上。
(2)cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
(3)session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
考虑到减轻服务器性能方面,应当使用COOKIE。
(4)单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
(5)所以个人建议:
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留,可以放在COOKIE中

22、如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式

23、js延迟加载的方式有哪些?
defer和async、动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)、按需异步载入js。

24、列举IE 与其他浏览器不一样的特性?
(1)IE支持currentStyle,FIrefox使用getComputStyle
(2)IE 使用innerText,Firefox使用textContent
(3)滤镜方面:IE:filter:alpha(opacity= num);Firefox:-moz-opacity:num
(4)事件方面:IE:attachEvent:火狐是addEventListener
(5)鼠标位置:IE是event.clientX;火狐是event.pageX
(6)IE使用event.srcElement;Firefox使用event.target
(7)IE中消除list的原点仅需margin:0即可达到最终效果;FIrefox需要设置margin:0;padding:0以及list-style:none
(8)CSS圆角:ie7以下不支持圆角

25、javascript对象的几种创建方式
(1)工厂模式
(2)构造函数模式
(3)原型模式
(4)混合构造函数和原型模式
(5)动态原型模式
(6)寄生构造函数模式
(7)稳妥构造函数模式

后续还在陆续更新~~~


http://chatgpt.dhexx.cn/article/Xh18PRJX.shtml

相关文章

大前端JS部分基础面试题(含答案)

1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型&#xff1a;Undefined、Null、Boolean、Number、String 值类型&#xff1a;数值、布尔值、null、undefined。 引用类型&#xff1a;对象、数组、函数。 堆栈数据结构&#xff1a;是一种支…

Js面试题__附答案

1、什么是JavaScript&#xff1f;&#xff08;这是基本题&#xff0c;对很多程序员来说也是送分题&#xff01;&#xff09; JavaScript是客户端和服务器端脚本语言&#xff0c;可以插入到HTML页面中&#xff0c;并且是目前较热门的Web开发语言。同时&#xff0c;JavaScript也…

js 变量及作用域经典面试题

function Foo() {getName function () { alert (1); };return this; } Foo.getName function () { alert (2);}; Foo.prototype.getName function () { alert (3);}; var getName function () { alert (4);}; function getName() { alert (5);}//请写出以下输出结果&#x…

前端面试题集锦——JavaScript

JavaScript 栈和队列的区别? 栈的插入和删除操作都是在一端进行的&#xff0c;而队列的操作却是在两端进行的。 队列先进先出&#xff0c;栈先进后出。 栈只允许在表尾一端进行插入和删除&#xff0c;而队列只允许在表尾一端进行插入&#xff0c;在表头一端进行删除 栈和…

收集的面试题 js面试题

题库推荐网址&#xff1a;https://github.com/FEGuideTeam/FEGuide/tree/master/javascript%E9%97%AE%E9%A2%98 第1题: ## JavaScript 由以下三部分组成&#xff1a;1. ECMAScript&#xff08;核心&#xff09;&#xff1a;JavaScript 语言基础2. DOM&#xff08;文档对象模…

JS闭包+常见面试题

scope作用域 、Closure闭包对象 可以借助chrome调式工具查看闭包对象 注意&#xff1a;function声明存在变量提升&#xff0c;所以22行已经存在闭包对象了&#xff1b; 闭包产生的条件&#xff1a; 函数嵌套&#xff1b;嵌套的内部函数引用了外部函数的变量才会产生闭包对象…

前端面试题汇总(含答案)(JS篇)

主要自用&#xff0c;持续更新&#xff0c;相同类型的题目尽量放在了一起&#xff0c;参考的实在太多了就没有列出&#xff0c;侵权烦请联系删除。提示&#xff1a;自动生成的目录在页面右边---------->>>>>>>>>>>>>>>> Js的…

前端面试题(js篇)

1.解释一下什么是闭包 什么是闭包&#xff1a;函数使用了不属于自己的局部变量(函数套函数&#xff0c;里面函数使用了外面函数定义的变量) 闭包的作用&#xff1a;避免全局污染 闭包的缺点&#xff1a;使用过多会造成内存泄漏&#xff08;占用的内存释放不掉&#xff09; 2.…

js 实现页面隐藏、关闭、刷新给出对应的提示

我们在做项目的时候经常会遇到一些需求&#xff0c;比如在某些页面当点击浏览器刷新 或者关闭的时候会有对应的提示&#xff0c;是否离开或者重新加载此网站。比如csdn写文章的时候就有这个弹窗&#xff0c;这功能就是用onbeforeunload实现的。 注意&#xff1a;如果你加载下面…

js面试题大坑——隐式类型转换

1.1 隐式转换介绍 1.2 隐式转换规则 1.3 坑一&#xff1a;字符串连接符与算术运算符隐式转换规则混淆 1.4 坑二&#xff1a;关系运算符&#xff1a;会把其他数据类型转换成number之后再比较关系 1.5 坑三&#xff1a;复杂数据类型在隐式转换时会先转成String&#xff0…

u一点·料:阿里巴巴1688ued体验设计践行之路

U一点料 阿里巴巴1688UED体验设计践行之路 阿里巴巴1688用户体验部著 图书在版编目&#xff08;CIP&#xff09;数据 U一点料&#xff1a;阿里巴巴1688UED体验设计践行之路/阿里巴巴1688用户体验部著. —北京&#xff1a;机械工业出版社&#xff0c;2015.8 ISBN 978-7-111-5122…

一段百年征程的有限单群

1832年的某个清晨&#xff0c;革命中的法国见证了重新决斗。 在某个瞬间&#xff0c;某位青年被对手的枪射中腹部。随后去世。在当时狂热的政治斗争中&#xff0c;仅仅有寥寥数人意识到。法国&#xff0c;甚至世界。又失去了还有一个伟大的头脑。 这位青年姓伽罗华&#xff0c;…

权威发布:新一代人工智能发展白皮书(2017)

来源&#xff1a;机器人大讲堂 指导单位、专家顾问及编写人员 顾 问 潘云鹤 中国工程院院士 指导单位 工业和信息化部信息化和软件服务业司 指导委员会 谢少锋 工信部信软司司长 李冠宇 工信部信软司副司长 徐晓兰 中国电子学会副理事长兼秘书长 张宏图 中国电…

《构建之法,邹欣》阅读笔记

前言&#xff1a; 从2018年10月30日开始&#xff0c;阅读由微软工程师邹欣老师撰写的《构建之法》一书&#xff0c;全书共435页&#xff0c;每天阅读15页&#xff0c;在一个月&#xff08;30天&#xff09;完成。每天阅读完成后&#xff0c;需要思考当日的阅读要点和一些思考。…

C语言练习——提高篇

新开通了本人的公众号&#xff0c;欢迎关注&#xff1a;燕南路GISer &#xff0c;专注GIS干货分享&#xff0c;不定期更新。 主要兴趣&#xff1a;GIS、时空数据挖掘、python、机器学习深度学习 CSDN的部分内容会重写再搬迁到公众号&#xff0c;欢迎关注&#xff01; 目录 汉诺…

一文说透低代码平台/无代码平台

一、低代码/无代码平台是什么 二、低代码/无代码平台是怎么产生的 三、低代码/无代码平台应具备哪些能力 四、主流的低代码/无代码平台有哪些 五、低代码/无代码平台典型应用场景 六、低代码/无代码平台有什么价值 七、低代码/无代码平台有什么优势 八、低代码/无代码平…

代码知识点

JS&基础知识篇&#xff1a; 1、事件流 分为捕获型、冒泡型&#xff0c;addEventListener的第三个参数&#xff0c;为true是捕获型&#xff0c;为false是冒泡型&#xff08;即默认不写是冒泡型&#xff09; 常用的事件&#xff1a;click、mouseover&#xff08;支持冒泡…

「可视化搭建系统」——从设计到架构,探索前端领域技术和业务价值

阿里巴巴集团前端委员会主席 圆心&#xff1a;未来前端的机会在哪里 对前端未来期许有四点&#xff1a;搭建服务&#xff0c; Serverless&#xff0c;智能化&#xff0c;IDE。仔细想想&#xff0c;一个「可视化搭建系统」的想象空间&#xff0c;正能完美命中这些方面。前端的边…

集合类详解

1.List 1.1 ArrayList ArrayList概述 实现List接口的动态数组&#xff08;大小可变&#xff09;。默认初始容量10&#xff0c;随着元素增加容量也在不断变化每次添加之前检查是否需要扩容带来数据向新数组的拷贝&#xff0c;若知道数据量可以指定一个初始容量。ArrayList实现…

魔方还原算法(二) 科先巴的二阶段算法

科先巴的二阶段算法 本文来具体介绍一种具体的魔方还原算法——科先巴的二阶段算法&#xff0c;有一部分相关内容在前篇讲述&#xff0c;主要是方向定义那一块儿&#xff0c;没有看的建议先看一下&#xff1a; 二阶段&#xff0c;顾名思义&#xff0c;解决问题分为两步&#…