2023/6/5前端面试题总结

一、如何画一个三角形

1.引入字体图标
2.利用border实现

.outer {
      height: 0;
      width: 0;
      border: 7px solid transparent;
      border-top-color: #af0812;
    }

3.利用border+旋转rotate

 div {
    width: 8px;
    height: 8px;
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    transform: rotate(45deg);
}

4.利用CSS的线性渐变属性linear-gradient

.triangle {
      height: 100px;
      width: 100px;
      /* 从左上到右下，从红色开始渐变、到50%位置是透明色渐变开始到结束 */
      background-image: linear-gradient(to bottom right,red 50%,transparent 50%);
    }

二、css预处理器

包括sass和less

三、sass中如何定义变量

$变量名:值

四、foreach如何跳出循环

可使用return语句跳出本次循环，执行下一次循环

var arr = [1,2,3,4,5,6]
arr.forEach((item) => { 
	if (item === 3) { 
		return
	}
    console.log(item)
})

forEach无法通过正常流程(如break)终止循环，但可通过抛出异常的方式实现终止循环

var arr = [1,2,3,4,5,6]
try{ 
   
  arr.forEach((item) => { 
   
  	  if (item === 3) { 
   
  		  throw new Error('End Loop')
  	  }
      console.log(item)
  })
} catch (e) { 
   
    if(e.message === 'End Loop') throw e
}

五、如何实现长登陆

token 方式

1.在用户登录验证通过后，给用户生成一个对应的 token，然后将这个 token 作为 key 的一部分，用户信息作为 value 存入 Redis，并设置过期时间，这个过期时间就是登录失效的时间

2.将上一步中生成的 token 作为 JWT 的 payload（注意，token 是 JWT 的一部分，JWT 包括 header、payload、signature 三部分）生成 JWT 字符串返回给前端

3.前端之后每次请求都在请求头中的 Authorization 字段中携带 JWT 字符串

4.后端定义一个拦截器，每次收到前端请求时，都先从请求头中的 Authorization 字段中取出 JWT 字符串并进行验证，验证通过后解析出 payload 中的 token，然后再用这个 token 得到 key，从 Redis 中获取用户信息，如果能获取到就说明用户已经登录，否则则需要重新登登录。

5.客户端将token值保存下来，在访问登录页面前先做判断，是否存有token值，如果有的话就跳转到个人信息的页面，如果没有的话就跳转到登录页面。

六、cookie

<script language=javascript> 
    //添加cookie
    function setCookie(name,value,time){ 
        var date= new Date(); 
        date.setDate(date.getDate()+time); 
        document.cookie = name+"="+value+";expires="+date; 
    } 
 
    //获得cookie
    function getCookie(name){ 
        var arr = document.cookie.split(";"); 
        for(var i=0; i<arr.length; i++){ 
        var arr2 = arr[i].split("="); 
            if(arr2[0] == name){ 
                return arr2[1]; 
            } 
        } 
        return null; 
    } 
 
    //删除cookie
    function removeCookie(name){ 
        setCookie(name,"",0) 
    } 
</script>

七、怎么判断一个变量是不是数组

使用Array对象里的isArray方法判断arr变量是否为一个数组

Array.isArray(arr)

八、es6出现哪些新的东西

1.新增了canvas 绘画视图
2.新增了定义class的语法糖
3.函数的新增了箭头函数、函数参数的默认值
4.数组实例新增了 keys()，values()，entries()
5.新增了基本数据类型(symbol)
6.变量的解构赋值
7.新增了Map数据结构 和 Set数据结构
8.新增了模块化(import/export)
9.数组和对象新增了扩展运算符
10.块级作用域(let,const)
11.Object.assign()

九、promise的状态

十、vue中常用的修饰符

（1）事件修饰符
1.native 只能作用在组件上， 不能用在原生标签上
2…stop阻止事件的冒泡
3.prevent阻止了事件的默认行为
4.self只当在 event.target 是当前元素自身时触发处理函数
8.once绑定了事件以后只能触发一次，第二次就不会触发
9.capture事件捕获，从顶层往下触发

<div @click.capture="shout(1)">
    obj1
<div @click.capture="shout(2)">
    obj2
<div @click="shout(3)">
    obj3
<div @click="shout(4)">
    obj4
</div>
</div>
</div>
</div>
// 输出结构: 1 2 4 3 

10.passive用于提升移动端scroll事件的性能
（2）鼠标按钮修饰符

<button @click.left="shout(1)">ok</button> //左键
<button @click.right="shout(1)">ok</button> //右键
<button @click.middle="shout(1)">ok</button> //中键

（3）键盘修饰符
键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，有如下：
keyCode存在很多，但vue为我们提供了别名，分为以下两种：
普通键（enter、tab、delete、space、esc、up…）
系统修饰键（ctrl、alt、meta、shift…）
(4)表单修饰符
1.lazy（当光标离开标签时，才会将值赋值给value）
2.trim
自动过滤用户输入的首空格字符，而中间的空格不会过滤
3.number
自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值
(5)v-bind修饰符
1.async
能对props进行一个双向绑定

十一、路由重定向怎么实现

1.使用Vue Router的redirect配置项，可以实现简单的重定向，代码如下：

const router = new VueRouter({
  routes: [
    {
      path: '/old-path',
      redirect: '/new-path'
    }
  ]
})

其中，old-path是需要重定向的路由，new-path是重定向到的目标路由
2.使用Vue Router的beforeEach钩子，可以实现复杂的重定向，代码如下：

router.beforeEach((to, from, next) => {
  if (to.path === '/old-path') {
    next('/new-path')
  } else {
    next()
  }
})

十二、可视化大屏的静态页面如何实现

十三、插槽的用法

1.默认插槽

<template>
  <div class="box">
    <h4>{{title}}</h4>
    <slot></slot>
  </div>
</template>

2.具名插槽

       <!-- 渲染 Left 组件和 Right 组件 -->
      <Left>
        <!-- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字为 default 的插槽之中
        1. 如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令
        2. v-slot: 后面要跟上插槽的名字
        3. v-slot: 指令不能直接用在元素身上，必须用在 template 标签上
        4. template 这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的 html 元素
        5. v-slot: 指令的简写形式是 # -->
        <template #left>
          <p>这是在 Left 组件的内容区域，声明的 p 标签</p>
        </template>
      </Left>
 <!--子组件Left中的写法 -->
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />
    <!-- 声明一个插槽区域 -->
    <!-- vue 官方规定：每一个 slot 插槽，都要有一个 name 名称 -->
    <!-- 如果省略了 slot 的 name 属性，则有一个默认名称叫做 default -->
    <slot name="left">
      <h6>这是 left 插槽的后备内容</h6>
    </slot>
  </div>
</template>

3.作用域插槽
使用作用域插槽，数据在子组件中，需要通过数据绑定传给使用者插入html的部分：

<div class="box">
    <h4>{{title}}</h4>
    <!-- 把数据传给插入的html部分 -->
    <slot :movies="movies"></slot>
  </div>

此时，在使用者组件中，使用<template> 中的scope="Data"属性将数据传递过来：

<StudyM title="游戏列表">
      <template scope="one">
        <!-- 第一种结构 -->
        <ul>
          <li v-for="m,index in one.movies" :key="index">{{m}}</li>
        </ul>
      </template>
    </StudyM>