总结自牛客面试者，经过自身在面试过程中记录下来的面试题，总结了一下。有很多都是自己写的，希望指正。地址：www.nowcoder.com/discuss/exp…

2021-9-15

防抖节流

防抖(debounce)：指定时间内多次触发事件，只执行最后一次。使用在页面窗口的缩放，输入框(这里不是实时显示搜索结果)

节流(throttle)：指定时间执行一次事件。使用在监听滚动条滚动，输入框(这里是实时显示搜索的结果)

// 防抖
    function debounce(fn, delay = 300) {
      const timer = null;
      return function () {
        //先清除定时器
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments)
        }, delay);
      }
    }
    //节流
    function throttle(fn, delay = 300) {
      let flag = true;
      return function () {
        // 这里表示当未到delay时间时，不会执行fn函数，因为flag=false
        if (!flag) {
          return;
        }
        flag = false;
        setTimeout(() => {
          fn.apply(this, arguments)
          flag = true
        }, delay)
      }
    }

补充：何时用节流何时用防抖？

position

CSS position 属性用于指定一个元素在文档中的定位方式。

属性值relative, absolute, fixed或 sticky。默认值为static，表示在标准流中。

设置absolute, fixed，元素会被移出正常文档流。

fixed: 他是相当于整个视口进行偏移，滚动条滚动时，他的位置不会变化。所以给人一种视觉差。

sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上。

vue 双向绑定

在表单元素使用v-model

通过指令v-model来绑定。

通过监听input事件，然后将响应式数据的值设置为当前输入的值即可。

text 和 textarea 元素使用 value property 和 input 事件；

checkbox 和 radio 使用 checked property 和 change 事件；因为checked属性来确定表单元素的选中状态。但是v-model绑定的是对应的value值。checkbox作为单选时，绑定的时checked，作为多选时，绑定的时一个数组。radio绑定的时value值。

select 字段将 value 作为 prop 并将 change 作为事件。v-model绑定的是一个数组。

在自定义元素上使用v-model

我们需要在组件中定义prop(默认绑定的是modelValue属性名)，发送自定义事件(update:modelValue)。

但是我们可以更改prop得名人属性名，来在一个组件中多次使用v-model指令。

v-model:title="title"

vue 响应式原理

juejin.cn/post/702140…

vue2是通过Object.defineProperty()来实现的。

vue3是通过proxy来实现的。

vue diff算法

就是比对新旧vNodes

juejin.cn/post/702042…

指定key

从头开始遍历，遇到相同的节点就继续，遇见不同的就跳出循环

从尾开始遍历，遇到相同的节点就继续，遇见不同的就跳出循环

如果新节点更多，那么就添加节点

如果新节点更多，那么就删除节点

如果中间存在不知道如何排列的位置序列，那么就是用key建立索引图最大限度的使用旧节点。

http状态码

HTTP状态码（HTTP Status Code），用以表示网页服务器超文本传输协议响应状态的3位数字代码。

http状态码的作用是服务器告诉客户端当前请求响应的状态，通过状态码就能判断和分析服务器的运行状态。

下面给出一些状态码的适用场景：

100：客户端在发送POST数据给服务器前，征询服务器情况，看服务器是否处理POST的数据，如果不处理，客户端则不上传POST数据，如果处理，则POST上传数据。常用于POST大数据传输

206：一般用来做断点续传，或者是视频文件等大文件的加载

301：永久重定向会缓存。新域名替换旧域名，旧的域名不再使用时，用户访问旧域名时用301就重定向到新的域名

302：临时重定向不会缓存，常用于未登陆的用户访问用户中心重定向到登录页面

304：协商缓存，告诉客户端有缓存，直接使用缓存中的数据，返回页面的只有头部信息，是没有内容部分

400：参数有误，请求无法被服务器识别

403：告诉客户端进制访问该站点或者资源，如在外网环境下，然后访问只有内网IP才能访问的时候则返回

404：服务器找不到资源时，或者服务器拒绝请求又不想说明理由时

503：服务器停机维护时，主动用503响应请求或 nginx 设置限速，超过限速，会返回503

504：网关超时

js数组方法，哪些可以改变数组本身

增：push， unshift，splice，concat。前三个可以改变原数组。

删：pop, shift，splice，slice。前三个可以改变原数组。

改：splice

查：includes, findIndex， find, indexOf。

其他: join给定字符串连接每个元素。

forEach， map, some, every, filter,reduce

line-height

用于设置多行元素的空间量。

设置行高，可以让其等于height值，来实现文字的垂直居中。

自适应居中

margin: auto;

flex

text-align

position + transform, position + 负margin

选择器优先级

可以通过数值来指定权重。

!important表示无穷大

内联：1000

id：100

类：10

标签：1

通配符、子类选择器、兄弟选择器，如*, >, +，权值为0

继承的样式没有权值

单例模式

class Person {
      constructor(name) {
        this.name = name;
        this.p = null
      }
      static instance(name) {
        if (!this.p) {
          this.p = new Person(name)
        }
        return this.p
      }
    }

webpack打包流程

通过在webpack.config.js中指定entry入口文件，output出口文件（filename， path）来，由于webpack只能打包js和json文件，所以我们可以通过loader和plugin来进行对webpack打包的扩展，使其可以打包图片，css等资源，我们也可以根据开发环境和生产环境来进行对打包项目的优化，然后通过webpack指令来进行打包。

2021-9-16

let,const的作用域

var temp = 123;
if (true) {
  temp = 'abc';
  // 在初始化之前不能访问'temp'。他的意思是在块级作用域里不能在声明之前使用temp。即对temp进行赋值。
  let temp;
  console.log(temp) // Cannot access 'temp' before initialization
}

水平垂直居中

text-align：center。加载父元素上，他可以使内联元素，行内块元素，块级元素的文字居中对齐。

margin： auto。设置元素相对父元素水平居中。但是该元素需要设置宽度。

display：flex。可以设置水平垂直居中。

padding-top === padding-bottom: 可是使内联和行内块元素中文字垂直居中。

子元素使用绝对布局 top: 50%;left: 50%，再用负的 margin-top, margin-left 把子元素往上拉一半的高度，块级元素水平垂直。但是需要知道子元素的宽高。

子元素使用绝对布局 top: 50%;left: 50%，再用负的 transform: translate(-50%, -50%) 把子元素往上拉一半的高度，块级元素水平垂直。不需要知道子元素的宽高。

先用绝对布局四个方向的偏移量都设置为0，然后设置margin：auto;子元素需要设置宽高。

设置父元素height == line-height， text-aligin = center。子元素display: inline-block;。不需要知道子元素的宽高。

闭包，缺点

内部函数访问外部函数的变量。虽然函数的执行环境被释放，但是内部函数引入的变量不会被释放，一直占用着内存，所以会出现内存泄漏。解决办法：在退出函数之前，将不使用的局部变量全部删除。

箭头函数特点

箭头函数没有 prototype (原型)，所以箭头函数本身没有this。箭头函数不能作为构造函数使用

语法更加简洁、清晰

call | apply | bind 无法改变箭头函数中this的指向

箭头函数不绑定arguments，取而代之用rest参数...代替arguments对象，来访问箭头函数的参数列表

箭头函数不能用作Generator函数，不能使用yield关键字

箭头函数内部的this就是定义时上层作用域中的this。

实现两栏布局

zhuqingguang.github.io/2017/08/16/…

flex布局

grid布局

浮动。width: calc(100% - 上一个浮动的元素的宽度)。这里需要说明一下，浮动元素，如果一行的宽度不够另一个浮动元素排列，那么它将在下一行排列。这是由于浮动元素触发bfc了。不能相互覆盖。

float+margin-left

absolute+margin-left

float+BFC

vue的生命周期

setup -> beforeMount -> mounted -> beforeUpdate -> updated ->

beforeUnmount -> unmounted

组件通信的方法

props, 自定义事件， provide和inject ，路由传参，

props

$emit

ref

$attrs

v-model

provide / inject

Vuex

两个数组合并，然后去除重复元素

concat + new Set()

const arr1 = [1, 2, 1, 90, 4, 8, 8];

const arr2 = [2, 6, 7, 88, 1, 1];

const arr = arr1.concat(arr2);

console.log([...new Set(arr)])

跨域的方法

jsonp

cors

webpack服务器代理

nodejs中间件代理

postMessage，socket

iframe等一些扩展

jsonp。只能解决get的跨域

cors：服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

vue中的反向代理

Node中间件代理(两次跨域)：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。http.request

postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递

多窗口之间消息传递

页面与嵌套的iframe消息传递

上面三个场景的跨域数据传递

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

otherWindow.postMessage(message, targetOrigin, [transfer]);

message: 将要发送到其他 window的数据。

targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。

transfer(可选)：是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

如何封装一个组件

组件三要素：props, slot，自定义事件。css使用scoped来控制css的作用域。

组件化开发的好处：

组件化是对实现的分层，是更有效地代码组合方式

组件化是对资源的重组和优化，从而使项目资源管理更合理

组件化有利于单元测试

组件化对重构较友好

以下原则尽可能使用，用得越多就组件的复用性就越好。

适用单一职责原则

适用开放封闭原则

追求短小精悍

避免太多参数

缩小信赖范围和向稳定方向信赖

适用SPOT法则 (Single Point Of Truth，就是尽量不要重复代码，出自《The Art of Unix Programming》)

追求无副作用

追求引用透明

避免暴露组件内部实现

避免直接操作DOM

适用好莱坞法则 (好莱坞法则： Don’t call us, we’ll call you, 又称IoC, Inversion of control, 控制反转)

入口处检查参数的有效性，出口处检查返回的正确性

充分隔离变化的部分

组件和数据分享，信赖一致性的数据结构

总结牛客前端工程师精选面经合集(一)

2021-9-15

防抖节流

position

vue 双向绑定

vue 响应式原理

vue diff算法

http状态码

分类

1xx

2xx

3xx

4xx

5xx

js数组方法，哪些可以改变数组本身

line-height

自适应居中

选择器优先级

单例模式

webpack打包流程

2021-9-16

let,const的作用域

水平垂直居中

闭包，缺点

箭头函数特点

实现两栏布局

vue的生命周期

组件通信的方法

两个数组合并，然后去除重复元素

跨域的方法

postMessage

如何封装一个组件

热门文章

最新文章

相关课程

相关电子书

相关实验场景