前端面试题目总结(JavaScript)(下)

简介: 前端面试题目总结(JavaScript)(下)

16、ES6的新特性


1、添加了let定义变量,没有变量提升,不允许重复声明,具有块级作用域,让变量声明更规范化。

2、添加了const定义常量。声明定义之后就不能修改,适合于不变的量。

3、添加了模板字符串(反引号),可以换行也可以嵌套变量${},不用再拼接字符串。

4、添加了Pomise对象,来用解决异步操作问题。

5、结构赋值(数组、对象、字符串)

6、数组的扩展(set和map)

7、函数的扩展,可以使用箭头函数=>。


17、DOM


DOM是Document-Object-Model的简写,叫做文档对象模型,它通过大量的API接口来给我们提供获取、添加、修改、删除元素的方法。

比如说:

1、获取元素节点:document.querySelctor(‘’)

2、添加元素节点:document.createElement(‘h1’)

3、修改元素节点:element.appendChild()

4、删除元素节点:element,removeChild()


18、BOM


BOM是Browser-Object-Model,就是浏览器对象模型,BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

如window对象方法,如alert(),prompt()等。

例如计时器和location对象,location.href获取或者设置整个URL。


19、cookie和session的区别


共同点:都是用来跟踪浏览器用户身份的会话方式

不同点:

1、cookie放在浏览器中,session放在服务器

2、cookie不安全,容易被修改,session比较安全

3、cookie容器大小只有4K,session比较在

使用场景:cookie不安全,session被调用多了会比较消耗性能,所以cookie适合存放不太重要的信息且经常被调用的,session比较适合放密码等重要信息。


20、cookie,sessionStorage和localStrorage的区别


共同点:都是放在浏览器中的


不同点:


1、cookie的大小只有4K,sessionStorage和localStrorage的大小有5M

2、cookie的在有效期内可以使用,关闭浏览器后就没有了。sessionStorage仅保存到浏览器中,关闭就没有了。而localStorage在有效期内可以使用,关闭浏览器后也保存下来,除非你用去删除。

3、cookie需要访问服务器,sessionStorage和localStrorage不需要访问服务器


21、数组去重的方法


1、indexOf():返回某个元素第一次出现的位置,如果为-1,那就之前没有出现过,添加到新的数组中,不是就不添加。

2、对象属性:添加一个新的对象,用来记录元素出现的次数,没有出现过,就添加到新的数组中,有就不添加。

3、ES6新添加的set方法:set是唯一值,不重复的,可以写[…new Set()]或者也可以这样写Array.from(new Set())


22、实现继承的方法


  • 1、通过原型链继承
  • 2、通过构造函数继承
  • 3、组合继承(原型链+构造函数)
  • 4、ES6新添加的类继承


23、防抖(debounce)与节流(throttle)


防抖就是防止数据抖动,将多次触发转为一次触发,去掉多余的操作,优化性能。可以用setTimeOut计时器来实现,判断之前是否有触发操作,如果用就clearTimeOut来清除之前的触发操作,然后再新建一个setTimeOut计时器来触发。


节流就是在一定时间内只能触发一次,就叫做节流。也是用setTimeOut计时器来实现。当输入数据时,触发事件为真,然后进行触发操作,操作完之后,把触发事件改为假,等待下一次触发。


防抖的应用场景:表单按钮的提交,例如登录发送请求,避免用户点击太快,发送多次请求。文本编辑器实时保存,当无任何更改操作一秒后进行保存。


节流的应用场景:鼠标不断点击触发,抢优惠卷,规定n秒内多次点击只有一次生效


24、浅拷贝与深拷贝


浅拷贝复制的是对象地址,新的对象修改值后,原对象也会跟着修改,因为它们指是都是同一个对象地址。

深拷贝复制的是对象的值,新建一个对象地址,新的对象修改后,原对象不会受到影响。

浅拷贝的方法:

1、newObejct=oldObejct

2、Obejct.assign(newObject,oldObject)

3、newObject=[…new Set(oldObject)]

深拷贝的方法:

1、递归:判断是否为对象,是的话先遍历对象里面的值复制,不是就直接复制。

2、JSON.toString()转为JOSN字符串,再用JSON.parse()转为JSON对象


25、事件循环机制(EventLoop)


  • 事件循环有2种任务,一种是宏任务,一种是微任务。
  • 关键步骤如下:
  • 1、执行一个宏任务
  • 2、执行过程串如果遇到微任务,就将它添加到微任务的队列中
  • 3、宏任务执行完成之后,立即执行当前所有的微任务
  • 4、当宏任务执行完毕之后,开始检查渲染,渲染完毕之后,JS线程继续接管


26、事件捕获和事件冒泡


  • 事件捕获就是事件响应从Window开始,逐层向内层前进,到Document文档,到HTML,到目标元素节点,这个过程就是事件捕获。
  • 事件冒泡正好相反,执行完成之后,就从目标元素开始,一直到Window,这个过程就叫做事件冒泡。


27、箭头函数和普通函数的区别


  • 箭头函数没有this,它的this是继承它的父类的this,所以它的this指向是固定的
  • 箭头函数不能作为构造器,因为它没有this,因此它也没有prototype属性
  • call、apply、bind不能改变箭头函数的this的值


28、call、apply、bind的区别


  • 相同点:都是改变上下主的this指向,第一个参数相同
  • 不同点:
  • 1、传参不同,call和bind是逐个传参,apply是数组传参
  • 2、返回机制不同,cal和apply是立执行,而bind是返回一个函数,调用它才能执行。


29、promise与async/await的区别


  • 相同点:都是用来处理异步请求的
  • 不同点:
  • 1、async/await更加优雅简洁,代码看起像同步代码一样。不用像promise,还需要调用then来获取返回结果。
  • 2、promise 更多应用在函数封装中,async用在函数的使用中


30、同步和异步的区别


同步:发送一条请求,等到这条请求完成后,下一条请求才能执行。


异步:发送一条请求,不需要等待,直接下一条,不影响下一条请求的执行。


不同点:同步需要等待,异步不需要。


同步优缺点:同步执行效率低,但可以掌握执行流程,避免意外发生。


异步优缺点:异步执行效率高,节省时间,但消耗性能且不易掌握执行流程。


31、判断this的方向


1、普通函数:谁调用的函数,this就指向谁,如果没有调用,就指向window

2、箭头函数:箭头函数没有this,是继承它的父级this指向

3、对象调用:当函数被作为对象所调用时,this指向这个对象

4、call/apply/bind:改变this的指向,但不能改变箭头函数


32、Set和Map的区别


  • 1、Set是值的集合,Map是键值对,键和值都可以是任何值。
  • 2、Set的值是唯一的可以做数组去重,Map没有格式限制,可以做数据存储。


33、var、let、const的区别


  • 1、var可以变量提升,let和const不可以
  • 2、var可以重复声明,let和const不可以
  • 3、var没有块级作用域,let和const有
  • 4、var和let可以修改变量,const不可以


34、Ajax的原理


Ajax,它是浏览器提供的一种方法,实现页面无刷新就可以更新数据,提高用户浏览器应用的体验。


应用场景:1、页面上拉加载更多的数据。2、列表数据无刷新分页。3、表单项离开焦点数据验证。4、搜索框提示文字下拉列表。


Ajax原理:Ajax相当于浏览器发送请求与接收响应的代理人,以实现在不影响浏览器页面的情况下,局部更新页面数据,从而提高用户体验。


Ajax的实现步骤:


1、创建Ajax对象:var xhr=new XMLHttpRequest();

2、告诉Ajax请求地址以及请求方式:xhr.open('get','http://www.baidu.com');

3、发送请求:xhr.send();

4、获取服务器端给客户端的响应数据:xhr.onload=function(){console.log(xhr.responseText);}

相关文章
|
5月前
|
Web App开发 缓存 前端开发
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
247 4
|
7月前
|
JavaScript 前端开发 API
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
461 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
缓存 NoSQL Java
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
318 6
|
5月前
|
算法 Java 关系型数据库
校招 Java 面试基础题目解析及学习指南含新技术实操要点
本指南聚焦校招Java面试,涵盖Java 8+新特性、多线程与并发、集合与泛型改进及实操项目。内容包括Lambda表达式、Stream API、Optional类、CompletableFuture异步编程、ReentrantLock与Condition、局部变量类型推断(var)、文本块、模块化系统等。通过在线书店系统项目,实践Java核心技术,如书籍管理、用户管理和订单管理,结合Lambda、Stream、CompletableFuture等特性。附带资源链接,助你掌握最新技术,应对面试挑战。
142 2
|
5月前
|
安全 Java 编译器
Java 校招面试题目合集及答案 120 道详解
这份资料汇总了120道Java校招面试题目及其详细答案,涵盖Java基础、JVM原理、多线程、数据类型、方法重载与覆盖等多个核心知识点。通过实例代码解析,帮助求职者深入理解Java编程精髓,为校招面试做好充分准备。无论是初学者还是进阶开发者,都能从中受益,提升技术实力和面试成功率。附带的资源链接提供了更多学习材料,助力高效备考。
276 3
|
5月前
|
存储 算法 Java
校招 java 面试基础题目及解析
本文围绕Java校招面试基础题目展开,涵盖平台无关性、面向对象特性(封装、继承、多态)、数据类型、关键字(static、final)、方法相关(重载与覆盖)、流程控制语句、数组与集合、异常处理等核心知识点。通过概念阐述和代码示例,帮助求职者深入理解并掌握Java基础知识,为校招面试做好充分准备。文末还提供了专项练习建议及资源链接,助力提升实战能力。
150 0
|
7月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
287 8
|
8月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
7452 23
|
9月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
274 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
下一篇
oss云网关配置