前端面试总结之长沙五

已于 2022-08-17 22:17:11 修改
阅读量337 收藏 1
点赞数
分类专栏： 面试 文章标签： 前端 面试
于 2022-08-15 23:48:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59737146/article/details/126344064
版权

小程序本地存储

wx.setStorage ,wx.getStorage，wx.removeStorage，wx.clearStorage

1.   wx:setStorage(Object obj), 将数据存储在本地缓存中指定的key中。它会覆盖掉原来该key 对应的内容。

数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理。 否则数据一直可用。 单个 key允许存储的最大数据长度为1MB,  所有数据存储上限为 10MB.
参数Object obj,见表：

属性类型默认值必填说明
keystring 是本地缓存中指定的key
dataObject是需要存储的内容。只支持原生类型、Date、能够通过JSON.stringify() 序列化的对象
successfunction否成功回调
failfunction否失败回调
completefunction否结束回调

例子：

  myset01(){
    wx.setStorage({
      data: "小程序项目开发",
      key: '01',
      success(res){
          console.log("==setStorage成功  res=="+JSON.stringify(res));
      }
    })
  },

这里设置key为"01"， data为"小程序项目开发" ，作为数据保存下来。

2. wx.getStroage()

   wx.getStorage(Object obj)， 从本地缓存中异步获取指定key 的内容。参数Object obj 见下表

属性        类型 必填说明
keystring是本地缓存中指定的key
successfunction否调用成功的回调
failfunction否调用失败的回调
completefunction否调用结束的回调

  object.success 回调函数中 参数res ，说明见下表

属性     类型说明
dataObject/stringkey对应的内容

例子：

  myget01(){
    var that = this;
    wx.getStorage({
      key: '01',
      success(res){
        that.setData({
          storage_data: res.data,
        })
      }
    })
  },

3. wx.removeStorage(Object obj)

从本地缓存中移除指定的key

  myremove01(){
     wx.removeStorage({
       key:'01',
       success(res){
         console.log("remove key 成功");
       },fail(res){
       }
     })
  },

实现效果如下图所示

4. wx.clearStorage()

清空所有缓存数据。

以下为示例代码

  myclear01(){
    wx.clearStorage({
      success(res){
        console.log("clearStorage 成功");
      },
    })
  },

原文链接 微信小程序13__wx:setStorage和wx:getStorage 数据存取_109905418的博客-CSDN博客_wx.getstorage

数组from方法

参考 ES6-数组中的from()方法_正版蜀黍的博客-CSDN博客_数组from

求数组交集、并集、差集

参考参考 面试题 - 求两个数组的并集、交集、差集_杏子_1024的博客-CSDN博客_求两个数组的并集

路由导航守卫

全局路由导航守卫

beforeEach        路由进入前，

beforeResolve   路由解决前，参数只有from，to，没有next

afterEach           路由进入后

路由独享守卫

beforeEnter        路由进入前

组件内导航守卫

beforeRouterEnter        路由进入前，可以使用vm代替this，指向当前组件实例

    beforeRouteEnter(to, from, next) {
            console.log("路由进入之前", this);
            // 路由进入之前 this 指向 window

            // 路由进入之后的回调  ,  返回组件实例
            next(vm => {
                console.log(vm);
            })
        },

beforeRouterUpdate     路由更新前，this指向当前组件实例

beforeRouteLeave        路由离开前，this指向当前组件实例

注意：只有组件内导航守卫this指向组件实例，其他的this都指向window

补充beforeRouteUpdate解决同组件跳转

        beforeRouteUpdate(to, from, next) {
            console.log("路由更新之前", this);//this指向 组件实例
            console.log(this.$route.query, to.query);
            //路由更新之前 通过 this.$route.query 拿 query参数 存在 滞后性,拿得是之前 老的
            // to.query  新的

            // 可以在这里重新发请求，拿数据，原因是路由变化之后会进入这里
            // 发请求拿数据语句


            next()
        },

MVVM和MVC

MVVM:model-view-viewmodel

MVVM模式使用数据双向绑定，model和view直接进行交互

MVVM是一种开发模式，它实现了视图和数据逻辑之间的分离，model模型指的是后端传递的数据，view视图指的是所看到的页面，viewmodel是连接视图view和模型model的桥梁，从而实现模型model到视图view的转化和视图view到模型model的转化，也就是我们常说的双向数据绑定，使用MVVM模型实现的前端框架有react和vue。

MVC：model-view-controller

MVC模式通过controller控制器协调model和view的交互，view传达指令到controller，controller完成业务逻辑后，要求model改变状态，model将新的数据发送到view，用户得到反馈，所有通信都是单向的。

for in  for of  forEach 的区别

forEach  不能使用break return 结束并退出循环

for in 和 for of 可以使用break return；

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

所以 for in 更适合遍历对象，for of 适合遍历数组或者类数组。

参考参考  forEach、for in、for of 三者对比 - 紫诺花开 - 博客园

微信小程序 某个页面直接返回首页（微信小程序回退到首页）

微信小程序 某个页面直接返回首页（微信小程序回退到首页）
打开小程序后，到三级页面后点击左上角的返回按钮，能够直接返回到首页

正常 A -> B -> C 都是通过 wx.navigateTo 跳转的，所以 wx.navigateBack 只能返回上一界面，如果要返回到A 界面就会出现 C -> B -> A 的效果。
如果想实现 A -> B -> C 当 C 点击返回时， 实现直接 C -> A 这种效果， 就只能A -> B 通过 wx.navigateTo 跳转 ，
B -> C 通过 wx.redirectTo 跳转，跳转触发后 B 页面就会被销毁， C 页面再返回 wx.navigateBack 就会直接到 A 了。

例如：

第一个页面采用navigateTo，

wx.navigateTo({
    url: '/pages/logs/logs',
})

在第二个页面中使用redirectTo。

wx.redirectTo({
    url: '/pages/test/test',
})

这里是重点：
在第三个页面点击回退时，会直接回到第一个页面
。(wx.redirectTo()跳转到新页面之后，会自动销毁上一个页面，在新页面点击返回按钮时，会直接回到上上一个页面)
这是相当于在这个回退过程中直接销毁第二个页面

原文链接  https://www.jianshu.com/p/13d4df871468?u_atoken=2f30d6d5-2900-459d-835c-df37f7b63301&u_asession=01jDQzGFXlZeDU3mpboPsqFqgR0qkdPL2hdLO2V46e7259Tq9wYM9ofuwyiSRnppEPX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K-hDelzPALQPt7PYrZoxFMAymCvuFU2gNCRIRJqGpb9omBkFo3NEHBv0PZUm6pbxQU&u_asig=05ZlLDwAFXa4BVhn2Fh7CLo0qyrLtkBAnjdocB-SGbpvLcsd5RkP9hnnd2MMRaUCZpqZuYeKxqTgWARshkSJfhOLfezxMX1YFc6APKfFG9A4BdajeUhSqBjDrWJPwryUlOauNL9rYVA9vKeruyEwDtAQVhqDiV7ZKjDpHZ-28Dyif9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzSak1xUrevM0cUhWkIRPE7LXwHATfTGHpb4Vs-kGcAyab4DvBakBj6x1SID70OM96u3h9VXwMyh6PgyDIVSG1W8LdsWj2TdQH-CNLDsMxXGVMCiaxWNGs0SKRybKdVaVoe64E7PcuN_aU9Y9irltkOkdMZBFZ2YXRVmbgkJl2hRmmWspDxyAEEo4kbsryBKb9Q&u_aref=QF0a6GDYep895qHmCPyjUJMNDY4%3D

px、em、rem、rpx、vw、vh 用法 与 区别

px

 px是像素。相对于长度单位。像素px是相对于显示器屏幕分辨率而言的。

特点：

        1.IE无法调整那些使用px作为单位的字体大小

        2.国外的大部分网站能够调整的原因在于其使用了em或者rem作为字体单位

        3.Firfox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器（或者内核）

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

特点：

  1. em的值不是固定的
  2. em会继承父级元素的字体大小

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

  • 1. body选择器中声明Font-size=62.5%；
  • 2. 将你的原来的px数值除以10，然后换上em作为单位；
  • 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
 

rem 

rem是css3新增的一个相对单位，相对于HTML根元素的字体大小。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

rpx


rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。

无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。

微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx


vw、vh

 它们都是相对于父元素的宽高， vh 视窗高度，1vh等于视窗高度的1% ；vw 视窗宽度，1vw等于视窗宽度的1%

原文链接  px、em、rem、rpx 用法 与 区别_function__的博客-CSDN博客_rpx

剩余参数和展开运算符的区别

可以说写的很明白了 剩余参数与展开运算符_凉风有信、的博客-CSDN博客_剩余参数

实现深拷贝的方法

  1.  递归
  2. json.string(json.parse)
  3. ...展开运算符

参考参考  实现深拷贝的几种方法_xiongfang1105的博客-CSDN博客_深拷贝的三种实现方式

浏览器如何设置小于8px的字体

  1. safari,iphone 已经支持1px
  2. android 1px
  3. pc chrome 12px 最小

手机端可以这样直接写：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>移动端</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<p style="font-size:1px">font-size:1px，这是1号字体</p>
<p style="font-size:2px">font-size:2px，这是2号字体</p>
<p style="font-size:3px">font-size:3px，这是3号字体</p>
<p style="font-size:4px">font-size:4px，这是4号字体</p>
<p style="font-size:5px">font-size:5px，这是5号字体</p>
<p style="font-size:6px">font-size:6px，这是6号字体</p>
<p style="font-size:7px">font-size:7px，这是7号字体</p>
<p style="font-size:8px">font-size:8px，这是8号字体</p>
<p style="font-size:9px">font-size:9px，这是9号字体</p>
<p style="font-size:10px">font-size:10px，这是10号字体</p>
<p style="font-size:11px">font-size:11px，这是11号字体</p>
<p style="font-size:12px">font-size:12px，这是12号字体</p>
<p style="font-size:13px">font-size:13px，这是13号字体</p>
<p style="font-size:14px">font-size:14px，这是14号字体</p>
<p style="font-size:15px">font-size:15px，这是15号字体</p>
<p style="font-size:16px">font-size:16px，这是16号字体</p>
</body>
</html>

 pc端：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PC端</title>
  <style>
    /*html{
　　 -webkit-text-size-adjust:none;
　　}*/
	.small-font{
         font-size: 12px;
         -webkit-transform-origin-x: 0;
         -webkit-transform: scale(0.33);
    }
	/*.smallsize-font {
	 　font-size:4px;
	}*/
  </style>
</head>
<body>
<p class="small-font smallsize-font">font-size:4px，这是4号字体</p>
<p style="font-size:12px">font-size:12px，这是12号字体</p>
</body>
</html>

 原文链接  浏览器如何设置小于8px的字体_姜无忧的博客-CSDN博客_css 字体8px

typescript数据类型有哪些

布尔类型（boolean）
数字类型（number）
字符串类型（string）
数组类型（array）
元组类型（tuple）
枚举类型（enum）
任意类型（any）
null 和 undefined
void类型
never类型

原文链接  https://www.jianshu.com/p/d1b3b5b37adf

这个介绍ts比较详细 https://www.jianshu.com/p/7dca038f609b

v2/v3响应原理区别

v2

 Object.defineProperty 进行数据单个劫持

缺点：

数组：除了 push()，pop()，shift() , unshift() , splice()，sort()，reverse() 变动数据时可被vue检测到，其他都检测不到

对象：不能使用键值的方式添加，删除

1、push方法
2、pop() 方法用于删除并返回数组的最后一个元素。
3、shift() 方法用于删除数组的第一个元素，并返回第一个元素的值
4、unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
5、splice() 方法向/从数组中删除元素/插入元素/替换元素，然后返回被删除/插入/替换的项目。
6、sort() 方法用于对数组的元素进行排序
7、reverse() 方法用于颠倒数组中元素的顺序

解决方法：

使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
Vue.set(vm.someObject, ‘b’, 2) 或者 this.$set(this.someObject,‘b’,2) （这也是全局 Vue.set 方法的别名）

v3

通过Proxy代理，进行数据整体劫持，没有以上缺点

Vue数据更新视图不更新如何解决

  1.  v2数据劫持的缺陷，使用vue.Set或者this.$set解决
  2. vue执行异步DOM更新，使用Vue.nextTick(callback)解决
  3. 数据是深拷贝，使用Object.assign(）变成浅拷贝
  4. vue多层循环动态改变数据后渲染的很慢或者不渲染，可在动态改变数据的方法，第一行加上this.$forceUpdate()

原文链接  Vue数据更新视图不更新的几种解决方案_大雄Obear的博客-CSDN博客_vue数组变化为什么视图不更新

this.$set三个参数的用法

Vue.$set(target,key,value)

target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据(可以是字符串和数字)
value ：重新赋的值
用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

注：Vue.set()在methods中也可以写成this.$set()

Vue.set()不光能修改数据，还能添加数据
 

data:{
   items:[
     {message:"Test one",id:"1"},
     {message:"Test two",id:"2"},
     {message:"Test three",id:"3"}
   ]
},
var itemLen=this.items.length;
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});

原文链接  this.$set的参数和用法_沈行的专栏的博客-CSDN博客_$set参数

v-for中为何要使用key

参考参考  v-for中为什么要用key_归途风景111的博客-CSDN博客_vfor为什么使用key

Key在什么情况会提高渲染速度，什么情况不行？

  在没有绑定key和模板简单的情况下，不使用Key反而会更快。

参考参考  Key在什么情况会提高渲染速度，什么情况不行？_忘言丶的博客-CSDN博客

vue模块说明

参考参考 vue中常用的几种import（模块、文件）引入方式，export，export default，全部/部分文件的导出/导入_asdfsdgfsdgfa的博客-CSDN博客

vue路由懒加载实现方式 

我一般使用  这种：

const Foo = () => import('../components/Foo')

 可以参考这个，更详细  https://www.jb51.net/article/206486.htm      或者

https://www.jb51.net/article/162858.htm

关于后台管理

 登录模块相关说明（前端控制权限）  https://www.jianshu.com/p/e55bbb3eee9e

 动态路由相关说明（后端控制权限）   vue实现用户登录验证 + 权限验证 + 动态路由（左侧菜单栏） - 掘金

这个也可以  

https://www.jianshu.com/p/e221c43d299f 

zz888888888
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
20212022年前端面试题整理含答案.docx
07-06
20212022年前端面试题整理含答案.docx
长沙市中考试题
05-27
长沙市近年的全套中考试题，包含语文，数学，物理，化学，英语，并有答案
牛耳教育长沙Web大前端每天5道面试题.pdf
05-27
。。。
数字后端面试题
06-21
很全面的数值后端面试题，总结了很久，希望对你们又帮助。
shp轮廓 长沙.zip
06-02
长沙市建筑轮廓，含高度
hash路由和history路由的区别
weixin_62930485的博客
03-14 1万+
单页应用是在移动互联时代诞生的，它的目标是不刷新浏览器，而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。 不同之处有三点。 一是原理不同。hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地
路由的生命周期 路由钩子函数 导航守卫 路由的懒加载
Dark_programmer的博客
02-26 1776
路由 导航守卫 一、路由生命周期的概念、作用 给一个 前往官网的传送门 → Vue Router 导航守卫分为：全局生命周期、局部生命周期 在这里呢，我们只对于常用的一些守卫进行讲解。 全局： beforeEach 局部： beforeRouteEnter :在路由进入时执行 beforeRouteUpdate 在路由更新时执行 beforeRouteLeave 在路由离开时执行 所谓的守卫，其...
vue router路由钩子详解
zjl516088421的博客
09-26 7526
导航钩子 正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。 全局钩子 你可以使用 router.beforeEach 注册一个全局的 before 钩子： const router = new VueRouter({ ... }) router.beforeEach(
微信小程序：本地存储数据
热门推荐
milli236的博客
04-10 2万+
1.本地存储多个数据（嵌套数组），封装数组对象js书写：addr本身也是数组 var newNa = { "tel": 122222, "addr":that.data.region }; var newNa = { "tel": 122222, "addr":that.data.region }; var mobile...
手机端font-size:62.5%原理
xiasohuai的博客
11-11 3713
原理： 是根据根节点html的默认字体大小font-size来计算的，以此进行rem的初始值设置。实现对不同屏幕宽度的适配。（100px/16px=6.25=625%, 100代表100px,这里是以100px来换算的，即：1rem=100px。当然有些地方是10px/16px=62.5%，以10px来换算的，即1rem=10px。） rem是css3中新增加的一个单位属性，是相对长度单位。相对...
前端面试之CSS总结
01-29
由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述了CSS中的基础部分...
2023最新前端面试题总结
05-30
2023最新前端面试题总结
前端面试总结
03-27
前端面试总结前端面试总结前端面试总结前端面试总结前端面试总结前端面试总结前端面试总结
前端面试必备之html5的新特性
09-28
HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术。所以当我们在面试前端工作的时候，遇到html5相关的问题...下面这篇文章就来跟大家分享介绍了关于前端面试必备之html5新特性的相关资料，需要的朋友可以参考下。
秋招面经系列，有人看嘛
qq_38938670的博客
03-21 2224
23年秋招的凄凉想必大家也有所耳闻，现在这个时候还在推荐转行互联网的我真是谢谢他误人子弟吧，虽然我的秋招惨淡收场，但是还是拿到了几个不咋地的offer，留下了不少经验，我也有记录一些面经，希望对别人有些帮助吧，持续更新，直到写完~
长沙中科云谷面试（部分）
qq_23204557的博客
05-09 249
面试官有介绍他们公司的技术栈：前端vue，后端Spring cloud。
微信小程序字体样式font
最新发布
m0_72168336的博客
11-29 1627
微信小程序字体常用样式
web前端从业者面试的三个问题
IT知堂
12-28 253
马上就到2021年了，大家都知道，年初是“跳槽旺季”，跳槽就要面临面试的问题，广大web前端开发的人员如何面对面试中出现的问题呢？今天，长沙web前端培训的小编就来给大家说一说，web前端从业者面试的三个问题。 问题：面对量超过自己承受能力且时间有限的工作时你会怎么办？ 解析：目的：考察候选时间管理和处理大量任务的能力，当然也会涉及定的沟通能 分析：程序员的作内容可能大部分时间并不在写代码上，而是要处理各种会议、需求和沟通，通常都属于工作超负荷的状态，对上面这种问题不建议以加班的方式来解决，因为主要考察的
湖南长沙中软国际前端面试（实习）经历
m0_67263080的博客
06-10 460
第一次线下面试，面试前有点紧张，不过过程还好，面试官人很有亲和力，面试过程像话家常，提问内容大多与基础相关。
2023年长沙前端面试都问些什么
04-27
很抱歉，我无法预测未来的面试问题，因为面试官会根据不同的公司和职位要求来制定问题。但是，以下是一些可能会涉及...5. 前端安全和跨域问题的解决方法； 6. 前端最新技术和趋势的了解与应用。 希望能对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值