H5前端面试题(下)

简介: H5前端面试题

21.Vue修饰符有哪些?

.prevent:阻止默认行为
.stop:阻止事件冒泡
.self:当事件发生在该元素本身而不是子元素的时候会触发
.once:只执行一次
.capure:事件侦听,事件发生的时候会调用

22.Vue-router导航守卫钩子有哪些类型,执行顺序是什么?

全局守卫    路由独享守卫    组件内守卫
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

23.Vue中data为什么是一个函数?

如果data是对象的话,由于对象是引用类型,组件被复用的话,就会创建多个实例。本质上这些实例,都是同一个构造函数,为了避免组件之间的data冲突,data必须是一个函数。

24.ES6有哪些新特性?

Let、const、箭头函数、点点点运算符、变量的解构赋值简化对象写法、导入导出(import,export)、
形参的默认值、模板字符串、Promise、symbol、class类、for in、for of、Set、map、generator(接呢瑞特)

25.html5有哪些新特性、新标签?

语义化标签:header(头部标签)nav(导航栏标签)main(主体标签)section(划分区块)aside(侧栏标签)footer(页脚标签)
本地存储:localstorage (永久存储)  sessionstorage(临时存储)
音频标签:audio  视频标签:video
表单标签:form
画布:canvas

26.简单介绍原型链?

所有对象都有自己的原型对象(prototype)。一方面,任何一个对象,都可以充当其他对象的原型;另一方面,由于原型对象也是对象,所以它也有自己的原型。因此,就会形成一个“原型链”(prototype chain)最终都可以上溯到Object.prototype Object.prototype对象有没有它的原型呢?回答Object.prototype的原型是null。null没有任何属性和方法,也没有自己的原型。因此,原型链的尽头就是null。

27.说一下你对Promise的了解?说说你对Promise的原理的理解?

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
所谓promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。

28.什么是事件委托?为什么这样做?

它还有一个名字叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
为什么这样做呢?通过事件委托可以减少事件处理程序数量,这样就能大大的减少与dom的交互次数,提高性能;

29.简述一下对闭包理解?

闭包:在一个外函数中定义了一个内函数,内函数里运用了外函数的临时变量,并且外函数的返回值是内函数的引用。这样就构成了一个闭包。一般情况下,在我们认知当中,如果一个函数结束,函数的内部所有东西都会释放掉,还给内存,局部变量都会消失。但是闭包是一种特殊情况,如果外函数在结束的时候发现有自己的临时变量将来会在内部函数中用到,就把这个临时变量绑定给了内部函数,然后自己再结束。经常用闭包来实现面向对象编程
一个函数和它的周围状态的引用捆绑在一起的组合
是一个可以读取其他函数内部变量的函数,在js中只有函数内部的函数才可以读取该函数内部的变量,因此,闭包可以是一个函数中返回的函数。
闭包的好处:可以读取其他函数你内部的变量,并将其一直保存在内存中。
坏处: 可能会造成内存泄露或者内存溢出

30.axios的原理,基于什么实现的?

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios还是属于 XMLHttpRequest, 因此需要实现一个ajax;还需要一个promise对象来对结果进行处理。

31.js中new操作符做了哪些事情?

new操作符新建了一个空对象,这个对象原型指向构造函数的prototype,执行构造函数后返回这个对象
1、创建一个空对象
2、这个对象的原型指向构造函数的prototype
3、绑定this指向,执行构造函数
4、确保返回的是对象

32.本地存储和cookie的区别?

存储大小,本地存储官方说法是 5M 的大小,然而 Cookies 的存储大小更小并且和浏览器本身有关(大概在 4000个字节左右)
Cookie 存储的内容会保留在 HTTP 请求的 Header 中,并且会随每次请求发送到浏览器;然而本地存储只会保留在客户端,浏览器请求过程不会发送到服务端。

33.说一下对proxy的理解?

Proxy可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。
Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”

34.vuex中如何实现数据持久化(数据刷新不掉)?

为了防止刷新数据丢失,可以将一些数据保存在localstorage、sessionstorage或cookie中,可以保证页面刷新数据不丢失且易于读取。

35.vue是如何实现数据双向绑定的?

vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。

36.什么是插槽,插槽的分类,分别在什么情况下使用?

Vue 为 组件的封装者 提供的能力
1.匿名插槽:没有名字的插槽
2.具名插槽:有名字(name属性)的插槽
3.作用域插槽:子组件中的数据只能子组件访问到,但是我们的插槽往往定义在父组件中,这个时候就需要作用域插槽来打通他们之间的关系,然后就能在父组件中愉快的使用子组件的数据了。
当子组件被复用时,需要在特定的区域展示不同的定制化的内容。

37.什么是jsx,使用jsx语法有什么好处?

JSX 是 JavaScript 的一种扩展,为函数调用和对象构造提供了语法糖,特别是 React.createElement()。
JSX和模板引擎或 HTML相似,但它不是。JSX 生成 React 元素,同时允许充分利用 JavaScript 的全部功能。
JSX优点:
  开发人员体验代码:更易读,更形象,类 XML 语法可更好地表示嵌套的声明式结构。
  非正式开发人员:可更容易修改代码,因 JSX 类似HTML。
  减少语法错误,开发人员代码量变少。

38.说一说react的生命周期(class组件或者react hooks中的都行)?

组件将要挂载时触发的函数:componentWillMount
组件挂载完成时触发的函数:componentDidMount
是否要更新数据时触发的函数:shouldComponentUpdate
将要更新数据时触发的函数:componentWillUpdate
数据更新完成时触发的函数:componentDidUpdate
组件将要销毁时触发的函数:componentWillUnmount
父组件中改变了props传值时触发的函数:componentWillReceiveProps

39.Vue-router路由模式有几种,分别是什么?

1.hash路由
  hash路由是依据‘#’后的地址进行监听跳转的,通过location.hash来获取当前的hash值,通过hashchange事件进行监听,相同的hash地址不会触发该事件。
2.history
  该模式是利用h5新增的pushstate和replacestate将地址直接压入历史记录栈中,通过popstate进行监听实现页面跳转的。
  该模式如果访问的相同的地址会导致404报错,需要后端进行相应的配置
3.abstract
  该种模式支持js运行环境,比如在nodejs中。当识别不到window的api的时候就会强制进入该种模式。

40.判断js对象是否具备某一属性(至少写出三种)?

hasOwnProperty  查看对象中是否包含某一属性
返回一个布尔值 true / false
语法:obj.hasOwnProperty('name')
in 运算符  
语法:'name' in obj
(.)与 undefined 相较
语法:obj.age == undefined

以上就是H5前端面试题,后续会持续更新,敬请关注。

相关文章
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
628 156
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
移动开发 前端开发 JavaScript
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法,通过JavaScript在canvas上绘制图形。首先简述了canvas的功能,接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸,并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
632 2
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
627 1
|
存储 JavaScript 前端开发
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
577 2
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1515
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    779
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    650
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    646
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    722
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    919
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1788
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    446
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1485
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    766