顺丰同城前端一面

万希&

已于 2022-12-15 15:25:46 修改

阅读量2.1k

点赞数 2

分类专栏：面试文章标签：前端 javascript css 面试 vue

于 2022-11-03 22:27:28 首次发布

本文链接：https://blog.csdn.net/weixin_46015250/article/details/127677845

版权

面试专栏收录该内容

13 篇文章 3 订阅

订阅专栏

顺丰同城前端一面

文章目录

顺丰同城前端一面

1.自我介绍

巴拉巴拉！~~~~

2.选择前端的理由

巴拉巴拉！~~~~

3.用css实现三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正三角形实现</title>
    <style>
      .triggle{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-left: 50px solid transparent;
            border-bottom: 50px solid red;
            border-right: 50px solid transparent;
        }
    </style>
</head>
<body>
    <div class="triggle"></div>
</body>
</html>

4.垂直水平居中实现

参考这文章

5.基本数据类型，引用数据类型

1.基本类型：number、boolean、string、undefined、 null
2.引用类型：array、object、function、regexp…

6.数组操作方法

1.forEach:遍历每个元素并处理。没有返回值

计算大于1的个数
let arr=[1,2,3,4,5]
let res=0
arr.forEach(item=>{
   item>1?res++:res
})
console.log(res)//4

2.map:遍历每个元素并处理。返回值为处理后的数组。原数组不改变

//每个元素值*2并返回
let arr=[1,2,3,4,5]
let res1=arr.map(item=>{
   return item*2
})
console.log(res1)//[ 2, 4, 6, 8, 10 ]
console.log(arr)//[ 1, 2, 3, 4, 5 ]

3.filter:根据条件筛选每个元素，默认返回数组。数组内为符合条件的值

let arr=[1,2,3,4,5]
let res2=arr.filter((item,index)=>{
   return item*index>3
}
)
console.log(res2)//[ 3, 4, 5 ]

4.some,every:和filter类似，但返回值是boolean.

every:当所有元素都符合条件，返回true。只有一个false放回false.

some:当有一个为true时，返回true.全部为false时,返回false

let arr=[1,2,3,4,5]
let  res3=arr.every((item,index)=>{
   return item*index>1
}
)

let  res4=arr.some((item,index)=>{
   return item*index>3
}
)
console.log(res3)//false
console.log(res4)//true

5.reduce：可用作累加累乘

//val表示累计值，item（必填其他都可选填）当前值，index数组下标,0表示val初始值。
let arr=[1,2,3,4,5]
let  res5=arr.reduce((val,item,index)=>{
   return val+item*index
},0)
console.log(res5)//40

6.for-in for-of

let arr=[1,2,3,4,5]
for(i in arr)
{
   console.log(i)//下标01234
}

for(i of arr)
{
   console.log(i)//数组值12345
}

7.call,bind,apply共同点和区别

共同点：改变this的指向
区别：

call 后面的参数可以分开传递
apply后面的参数放在一个数组中传递
bind和apply传参类似只是bind 返回的是一个函数不会立即执行，需要调用

8.防抖节流实现，区别？应用场景？

参考博主另一篇文章–手撕JS面试题

9.浅拷贝和深拷贝区别？实现？

参考博主另一篇文章–手撕JS面试题

10.浏览器缓存数据方式？

在这里插入图片描述

11.localstorage具体使用？

数据以<key,value>形式保存在localstorage内部，可以调用getItem或者setItem实现。

12.vue的生命周期

简单来说，就是组件从创建到撤销的过程。分为初始化，挂载，更新，销毁四个阶段。

初始化阶段：

beforeCreate（创建前）：初始化还未开始，不能访问data数据，computed,watch,methods等方法

created(创建后)：初始化完成，可以获得data数据，设置好computed,watch,methods方法，不能访问dom节点。

挂载阶段：

beforeMount（挂载前）：此时render函数被调用，生成虚拟dom树，还没挂载

mounted（挂载后）：将虚拟dom挂载到真实的dom树上，此时可以访问dom节点。

更新阶段：

beforeUpdate（更新前）：响应式数据更新了，但dom节点并未更新。此时还可以访问原有的dom节点

updated（更新后）：根据diff算法，找出差异并把差异更新到真实的dom树上。

销毁阶段：

beforeDestroy（销毁前）：实例销毁前调用，此时还可以访问实例数据

destroyed（销毁后）：实例销毁后调用，清除wacher,子组件，事件监听器等。

13.nextTick是什么？

解决问题：修改数据以后，无法立刻拿到最新的DOM节点对象

原理：异步DOM更新放在下一轮的事件循环当中，调用回调函数。拿到最新的dom节点。提高效率

具体：Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop)
当中观察到数据变化的 watcher
推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和Dom操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新

14.vue组件通信？

子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。
使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。
使用 eventBus 的方法，它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，实例上监听和触发事件，来实现消息的传递。