一、笔试题

垂直居中至少3种方案

absolute + margin: auto（定位的上下左右为 0）
flex 布局（父级 justify-content: center 和 align-items: center 即可）
absolute + transform（定位的上、左为 50%，translate 上、左负 50%）
absolute + 负margin（定位的上、左为 50%，margin 的上、左负子元素的一半）
absolute + calc（定位上、左负50%时减去子元素宽、高）

1em 1vh 1px 1rpx 区别

1em

子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

1vh 视窗的高度，相当于屏幕高度的 1%

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

1rpx

rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx
通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

画一条0.5px的线

::after定位伪类实现的答案

div::after{
    position: absolute; 
    content: ""; 
    background-color: red; 
    width: 100%; 
    height: 0.5px;
    bottom: 0px; 
}

box-shadow阴影实现的答案

div { 
    box-sizing: border-box; 
    background-color: blueviolet; 
    width: 200px; 
    height: 200px; 
    margin: 100px auto; 
    box-shadow: 0px 0px 0px 0.5px green;
}

transform 缩放实现的答案

div::after { 
    position: absolute; 
    content: "";
    width: 200%; 
    height: 200%; 
    border: 1px solid red;
    transform-origin: 0 0; 
    transform: scale(0.5); 
}

border-image: linear-gradient 边框线性渐变

div::after { 
    display: block;
    position: absolute; 
    content: ""; 
    width: 100%; 
    height: 1px;
    bottom: 0px; 
    background-color: red; 
    background: linear-gradient(to bottom, transparent 50%, red 50%);
}

ts js的理解

TypeScript 是 JavaScript 的类型的超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误为了保证兼容性，TypeScript 在编译阶段需要编译器编译成纯 JavaScript 来运行，是为大型应用之开发而设计的语言

svg canvas区别

相同点：都是主要用来画 2D 图形的。不同点： Canvas 画的是位图，SVG 画的是矢量图。 SVG 不依赖分辨率，Canvas 依赖分辨率。 SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。 SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂

bind call apply 区别，使用场景

三者都可以改变函数的this对象指向
三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window
三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入
bind是返回绑定this之后的函数，apply、call 则是立即执行

Array.prototype.push.apply(array1, array2) Object.prototype.toString.call(obj)

call 可以实现继承

function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  function Son(uname, age) {
    Person.call(this, uname, age);
  }
  var son = new Son("zhang", 12);
  console.log(son);

key为name时，输出a的结果

记不清了，大概是公司自己出的题目 a++; switch key default '0' break;

代码纠错

有个用户列表，点击按钮时间新增用户

<template>
<div v-for="user in userList" :key="user.id">
{{user.name}}
</div>
    <button @="addUser">添加</button>
</template>
export defult {
    data(){
        return {
            userList:[
                {id:1, name:'Jack'},
                {id:2, name:'Tom'},
                {id:3, name:'Rose'},
            ],
            userDetail:{ id:4, name:'Carlie' }
        }
    },
    methods:{
       addUser(){
           this.userList.push(this.userDetail);
           this.userDetail.id++;
       }
    }
}

将以下代码转成易读的代码

记不清了，大概是公司自己出的题目

var str = '4|1|3|0|2'
var arr = str['split']('|')
i = 0x0
while(!![]){
  case '0'
    gPreCfy = aAbsfy;
    continue;
  case '4'
  //
}

gPreCfy aAbsfy 这两个明明没有声明，不知道哪里来的。忘记问面试官

二、面试题：

微信登陆流程，要考虑哪些异常场景，错误码有哪些？错误码哪端决定？
测试要一周，只能留给开发一周，开发时间不足，要怎么办
说说小程序中做过的最复杂的逻辑，微信页面层级限制问题怎么解决
你认为需求不合理，但是产品经理执意如此，该怎么办

前端面试题 2024一面