前端面试题-简答题

说一说cookie,sessionStorage,localStorage的区别?

1、他们都是浏览器的本地存储,而区别在于cookie是由服务器写入,sessionStorage,localStorage是由前端写入;

2、cookie的生命周期是由服务器写入时就设置完成的,sessionStorage是在页面关闭时自动清除,localStorage如果写入就一直存在,除非手动将其删除;

3、cookie的存储空间较小,大概只有4kb左右,而sessionStorage,localStorage的存储空间相对较大,大概5MB左右。

4、cookie,sessionStorage,localStorage数据共享遵循同源原则,不过sessionStorage限制必须是同一个页面。

5、前端给后端发送请求时会自动将cookie携带,而sessionStorage,localStorage不会被携带。

6.(加分项)由于他们的区别,他们的使用场景也不同,cookie一般会用于存储登录验证信息SessionID或者token;LocalStorage存储不会轻易变动的数据,减少服务器压力;SessionStorage可以检测用户是否刷新、进入页面。

JS数据类型有哪些,区别是什么?

JS数据类型分为两类:

第一种是基本数据类型,其中包含7种类型(Number数字类型、String字符类型、boolean布尔类型、Null空类型、Undefined未定义类型、BigInt、Symbol),(加分项)其中BigInt为Transact-SQL的系统数据类型,当整数值超过int范围才可以使用;而Symbol是ES6引入的一种新的原始数据类型,他的特点就是没有重复的数据,可作为Object的key;

第二种是引用数据类型,通常用Object代表,普通对象Object,数组array,日期Date,正则RegExp、函数function、Math数学函数都属于Object;

区别就在于这两种数据类型的存储方式不同。基本数据类型直接存储在栈中,占用空间小,是被频繁使用的数据;引用数据类型存储在堆内存中,占用空间大。引用数据类型在栈中存储了指针,指针推向实体的起始地址,当解释器寻找引用值时,会检索其在栈中的地址,取得地址后从堆中获取实体。

说一说JavaScript有几种方法判断变量的类型?

1.typeof判断基本类型,判断引用类型时,除了function,其他返回Object。

2.instance of

3.constructor

4.Object.prototype.toString.call()

说一说样式优先级的规则是什么?

!important>style>id>class>*

说一下浮动

脱离文档流,盒子塌陷,影响其他元素排版

Css选择器的优先级排序?

答:css选择器的优先级:important>行内样式>id>类>标签>*。

写出盒子模型的组成部分?

答:margrin外边距 padding内边距 border边框 content内容。

请说出CSS中"position"属性可能的取值,并分别描述他们?

答:position中有fixed固定定位、relative相对定位、absolute绝对定位、static静态定位;其中,fixed固定定位不会根据屏幕的滚动去改变位置、relative相对定位通常作为微调去使用,位置虽然改变,但是占位还是在原点、absolute绝对定位通常配合相对定位去使用,绝对定位不会受到网页大小的变化而被影响、static静态定位是position属性的默认值,无论怎么设置left、right、top、bottom都不会改变他的位置;

display的值和作用?

答:display中有4个值,none的作用是隐藏标签且不占位、block是将标签转换为块级标签、inline-block是将标签转换为行内块标签、inline是将标签转换成行内标签;

css3的新特性。

答:1、圆角效果;2、图形化边界;3、块阴影与文字阴影;4、使用RGBA实现透明效果;5、渐变效果;6、使用“@Font-Face”实现定制字体;7、多背景图;8、文字或图像的变形处理;9、多栏布局;10、媒体查询等。

Js数据类型有哪些?

答:JS的数据类型有number数字类型、string字符串类型、boolean布尔类型、null空置、未定义Underfined。

CSS的引用方式有哪些?它们的区别?

答:css的引用方式有:link标签引入外部css文件,@import引入外部css文件,行内引入<div style="color:red"></div>,嵌入引用<style></style>,通常写在<head>部分中

Overflow:hidden的三层意思?

答:1.清除浮动样式、2.隐藏超出部分、3.解决坍塌问题

SPA单页面应用程序是什么?他有什么优点和缺点?

答:SPA单页面应用程序就是由一个主页面和多个页面片段组成的一个网页,通过动态重写来完成和用户的交互,不会跳转或者访问其他页面

SPA的优点:
用户交互时响应较快,体验好。前后端分离,分工明确、维护相对容易

SPA的缺点: 不利于搜索引擎的抓取,首次渲染的速度较慢

说一说CSS尺寸设置的单位

1.px:绝对像素

2.rem:相对于根元素像素

3.em:相对于父元素像素

4.vw:视口宽度

5.vh:适口高度

说一说浏览器如何渲染页面的

1.浏览器先拿到HTML,将HTML转换成DOM树

2.然后将CSS样式转换成stylesheet

3.根据DOM树和stylesheet创建布局树

4.当布局树创建完成后,页面就会根据布局树将页面绘制到屏幕上

说一说null和undefined的区别,如何让一个属性变为null

1.null表示定义的变量赋值为null

2.undefined表示定义的变量未赋值

3.null通过typeof判断类型是'object',而undefined是undefined

4.让属性变为null只需要给属性赋值为null就可以了

说一说es6中箭头函数

1.箭头函数写法简洁

2.没有this,this只能通过call()或者apply()调用上下文的this

3.不能被new

4.没有arguments

5.没有原型和super

说一说this指向(普通函数,箭头函数)

1.普通函数指向window

2.箭头函数指向上下文作用域中的this

说一下token 能放在cookie中吗?

能,token一般用于判断用户是否登录。

token的认证流程:

1.客户端使用用户名和密码请求登录

2.服务器接收到请求后,验证用户名和密码

3.验证通过后,服务端会给客户端签发一个token

4.客户端接收到token后会将token存放在cookie里

5.客户端每次向服务端发送请求时都要带着token

6.服务端收到请求后,验证请求里的token,验证成功后返回对应的数据

 说一说computed和watch的区别?

computer计算属性:当变量中的值发生变化时,才会执行代码,否则将从缓存中返回存储的值。

watch监听器:当数据发生修改时,监听器会返回修改前或修改后的数据。

 说一说HTML语义化?

HTML语义化提高了代码的可读性,有利于SEO,有利于内容的结构化。

常见的语义化标签有:header、footer、main、section、nav

 说一说 v-if 和 v-show区别?

v-if和v-show的作用都是用来控制元素的隐藏和显示的指令。

区别在于v-if只有条件为true时会对元素进行渲染,一般用于不频繁切换的元素上;

v-show不管条件为true还是false都会对元素进行渲染,通过display:none来控制元素的隐藏;

 v-model的使用。

表单数据双向绑定

获取表单元素

表单值变化,会触发变量的值变化

变量的值变化,表单的元素也变化

简单讲一讲ES6的一些新特性(至少答出三点)。

箭头函数=>、let命令、cons命令、rest参数

什么是vuex?Vuex解决了什么问题?

uex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据;

vuex是为了保存组件之间共享数据而诞生的,如果组件之间有要共享的数据,可以直接挂载到vuex中,而不必通过父子之间传值了,如果组件的数据不需要共享,此时,这些不需要共享的私有数据,没有必要放到vuex中。

只有共享的数据,才有权利放到vuex中;组件内部私有的数据,只要放到组件的data中即可。

根据刚才的描述,我们可以得出一个结论:vuex是一个全局的共享数据存储区域,就相当于是一个数据的仓库。

var、let、const之间的区别?

1、var声明的范围是函数作用域,let和const声明的范围是块作用域

2、var声明的变量会被提升到函数作用域的顶部,let和const声明的变量不存在提升,且具有暂时性和死区特性

3、var允许在同一个作用于中重复声明一个变量,let和const不允许

4、const的行为与let基本相同,唯一一个重要的区别就是,使用const声明的变量必须进行初始化,且不能被修改

vue全家桶包含技术。

1、vue-cli:脚手架

2、vuerouter:路由管理

3、vuex:应用程序开发的状态管理模式

4、axios:前后端数据交互

5、ui框架-vant:轻量,可靠的移动端vue组件库

vue的生命周期。

vue的生命周期为创建、挂载、更新、销毁,其过程有8种

1、beforeCreate组件实例创建之前

2、Created组件实例创建完毕

3、beforeMount组件DOM挂载完毕

4、Mounted组件DOM挂载完毕

5、beforeUpdate组件实例更新之前

6、Updated组件实例更新完毕

7、beforeDestory组件实例销毁之前

8、Destoryed组件实例销毁完毕

vue父组件向子组件传递数据?

在占位符中:子组件中接收的数据名=“父组件的数据”

在子组件的props属性中接收数据props:['子组件中接收的数据名“]

在子组件中使用子组件中接收的数据名

v-show和v-if指令的共同点和不同点?

共同点是v-show和v-if都是控制标签的显示隐藏

不同点是v-show不管在true或者false的情况下都会对标签进行渲染,只是通过控制display:none样式来显示隐藏

而v-if是在true时创建标签,false直接销毁标签

说出几种vue当中的指令和它的用法?

v-if创建标签或销毁标签

v-show控制标签display:none

v-for:根据数组或者对象里的数据进行循环渲染,生成标签并赋值数据

v-bind:绑定样式

v-model:对数据进行绑定

v-html:可以识别标签 xss风险

v-text:不能识别标签可识别文本

分别简述computed和watch的使用场景?

都是用来监听数据的变化

computed效率比较高,如果数据有变化的时候才会去执行,不然会去读缓存的数据

区别就是computed里面放了随机数,computed不会执行,但是watch会执行

单页面应用和多页面应用区别及优缺点?

单页面应用SPA读取速度快,用于登录,注册界面,节省开发成本单不利于搜索引擎搜索

多页面应用每次跳转都会去到新的html文件,优点是页面渲染快、缺点是跳转慢

vue路由传参方法?

params,query。

params:在router-link内部绑定to(:to/v-bind:to)传递参数,参数以键值对的方式存在,他的传值保密性比query好。接收值this.$route.params.参数名

<router-link :to="{name:'home',params:{参数名:‘数据’}}"></router-link>,name在路由规则(routes)中必需要写。

query:to属性中一个是path(路由跳转的地址),另一个就是要传递的值,这个值会出现在浏览器的地址栏。接收值this.$route.query.参数名

<router-link :to="{path:'/home',query:{参数:‘参数值’}}"></router-link>

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值