面试题(笔试题)

巨人的小脚丫
19 阅读11分钟

文章目录


笔试题

火山口

juejin.cn/post/684490…

  1. 什么叫优雅降级和渐进增强？

​ 渐进增强和优雅降级

渐进增强：progressive enhancement，开发页面时，对低版本浏览器要保证基本功能；然后对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：graceful degradation，一开始就构建完整的功能，然后再对低版本浏览器进行兼容。

渐进增强相当于‘向上兼容’，优雅降级相当于‘向下兼容’。

在确定用户群体的情况下，渐进增强：针对低版本保证基本功能，高版本浏览器改效果、交互等，达到更好的体验。

优雅降级一开始就构建完整功能再对低版本进行兼容。

.transition{/* 渐进增强*/
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s';
}
.transition{/* 渐进增强*/
     transition:all .5s';
     -o-transition:all .5s;
     -moz-transition:all .5s;
     -webkit-transition:all .5s;
}
  1. 什么是标准文档流？

    标准文档流

    标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。HTML文档中的元素可以分为两大类：块级元素和行内元素。

    块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

    行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有 span 、a、 img等。

    只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

  2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度 200 ，中间自适应宽，要求先加载中间块写出结构及样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：
		</title>
		<style type="text/css">
			html,body{margin:0px;width:100%;}
			#left,#right{width:200px;height:200px;background-color:red;position:absolute;}
			#left{left:0;top:0;}
			#right{right:0;top:0;}
			#center{margin:0 200px;background-color:yellow;height:200px;}
		</style>
	</head>
	<body>
		<div id="left">left</div>
		<div id="center">center</div>
		<div id="right">right</div>
	</body>
</html>
  1. active-class 是哪个组件的属性？嵌套路由怎么定义？

    active-class 是哪个组件的属性
    active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

    嵌套路由怎么定义
    一级路由里面使用children数组配置子路由，就是嵌套路由

    组件：最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。
    模块：最初的目的是将同一类型的代码整合在一起，所以模块的功能相对复杂，但都同属于一个业务。不同模块之间也会存在依赖关系，但大部分都是业务性的互相跳转，从地位上来说它们都是平级的。

  2. 怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？

    在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。

    使用 router 对象的 params.id 获取

  3. vuex 是什么？怎么使用？哪种功能场景使用它？

    是基于vue.js的状态管理工具，解决了组件之间传值混乱问题。组件之间数据状态共享。

    使用场景：1、用户的个人信息管理模块；2、电商项目的购物车模块；3、我的订单模块，订单列表中点击取消订单，然后更新对应的订单列表；4、在订单结算页，获取需要的优惠券，并更新订单优惠信息。

  4. mvvm 框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

    mvvm 是 model + view + viewmodel 框架，通过 viewmodel 连接数 据模 型model 和 view

    区别：vue 是数据驱动，通过数据来显示视图层而不是节点操用

    场景：数据操作比较多的场景，更加快捷

  5. 说出至少 4 种 vue 当中的指令和它的用法？

  6. v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

中科天翔的面试题:

一、选择题

1、以下判断结果为 true 的有：（B、D）

A:1="1" 
B：1=="1"
c:1==="1"
D：0==false
E：0.1+0.2===0.3

2、以下不属于 JavaScript 基本数据类型的是：C

A：Boolean 
B：Symbol 
C： Array 
D： undefined

3、下面哪个选项可以产生 0<=num<=10 的随机整数：（D）

A: Math.floor(Math.random()*6) // 0
B: Math.floor(Math.random()*10) // 4
C: Math. floor(Math. random()*11) // 7
D: Math.ceil(Math.random()*10) // 10

4、下面分别使用JSON.stringify 方法，返回值 res 分别是：（C）

const fn= function(){}
const res = JSON.stringify(fn) // undefined
const num = 123 
const res = JSON. stringify(num) // '123'
const res = JSON.stringify(NaN) // null
const b= true
const res = JSON. stringify(b) // 'true'
A:'function'、'123'、'NaN'、'true'
B: undefined、'123'、undefined、'true'
C: undefined、'123'、'null'、'true’
D：undefined、'123'、'null’、undefined

5、以下哪项可以去除变量 str 中的所有空格:(A)

A：str.replace(/\s*/g,"") 
B:str.replace(/^\s|\s$/g,"")
C: str.replace(/^\s*/,"" )
D:str.replace(/(\s*$)/g,"")
二、问答题

addEventListener 有哪些参数？

事件名称；
事件处理函数；
捕获还是冒泡。

事件处理函数不一定是函数，也可以是个JavaScript具有handleEvent方法的对象，看下例子：

var o = {
  handleEvent: event => console.log(event)
}
document.body.addEventListener("keydown", o, false);

第三个参数不一定是 bool 值，也可以是个对象，它提供了更多选项。

once：只执行一次。
passive：承诺此事件监听不会调用 preventDefault，这有助于性能。
useCapture：是否捕获（否则冒泡）。

实际使用，在现代浏览器中，还可以不传第三个参数，建议默认不传第三个参数，因为冒泡是符合正常的人类心智模型的，大部分业务开发者不需要关心捕获过程。除非你是组件或者库的使用者，那就总是需要关心冒泡和捕获了。

三、逻辑题

1、以下函数通过 console 调用后输出的结果是: (0)

 function get_bool(num) {
    let bool = 0;
    setTimeout(function () {
      bool = true;
      return bool;
    }, 0);
    let fn = () => {
      if (num !== "0") {
        return false;
      }
    };
    if (bool) {
      num = 1;
    }
    if (fn()) {
      num = 2;
    }
    return bool || num;
  }
  console.log(get_bool(0)); // 0

2、以下函数执行后输出的结果是：(2、10、3、5、4、1)

  setTimeout(function () {
    console.log(1);
  }, 0);
  new Promise(function (resolve, reject) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
      if (i === 10) {
        console.log(10);
      }
      i == 9999 && resolve();
    }
    console.log(3);
  }).then(function () {
    console.log(4);
  });
  console.log(5);

杭州君辰机器人有限公司：

1、alert(“5” + 4)

54

2、13 | 5 = ？

13

3、请写出http状态码及对应含义
2xx

代表请求已成功被服务器接收、理解、并接受

常见的有：

  • 200（成功）：请求已成功，请求所希望的响应头或数据体将随此响应返回
  • 201（已创建）：请求成功并且服务器创建了新的资源
  • 202（已创建）：服务器已经接收请求，但尚未处理
  • 203（非授权信息）：服务器已成功处理请求，但返回的信息可能来自另一来源
  • 204（无内容）：服务器成功处理请求，但没有返回任何内容
  • 205（重置内容）：服务器成功处理请求，但没有返回任何内容
  • 206（部分内容）：服务器成功处理了部分请求
3xx

表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向

常见的有：

  • 304表示，客户端有缓存文件并向服务器发送了一个options请求，服务器返回304 Not Modified,告诉客户端，原来缓存的文件没有修改过，可以继续使用原来缓存的文件。
4xx

代表了客户端看起来可能发生了错误，妨碍了服务器的处理

常见的有：

  • 400（错误请求）： 服务器不理解请求的语法,表示客户端请求错误
  • 401（未授权）： 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
  • 403（禁止）： 服务器拒绝请求
  • 404（未找到）： 服务器找不到请求的网页
  • 405（方法禁用）： 禁用请求中指定的方法
  • 406（不接受）： 无法使用请求的内容特性响应请求的网页
  • 407（需要代理授权）： 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理
  • 408（请求超时）： 服务器等候请求时发生超时
5xx

表示服务器无法完成明显有效的请求。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生

常见的有：

  • 500（服务器内部错误）：服务器遇到错误，无法完成请求
  • 501（尚未实施）：服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码
  • 502（错误网关）： 服务器作为网关或代理，从上游服务器收到无效响应
  • 503（服务不可用）： 服务器目前无法使用（由于超载或停机维护）
  • 504（网关超时）： 服务器作为网关或代理，但是没有及时从上游服务器收到请求
  • 505（HTTP 版本不受支持）： 服务器不支持请求中所用的 HTTP 协议版本
4、如何让一个元素水平居中

在这里插入图片描述

​ 在这里插入图片描述

5、谈谈对vue生命周期的理解

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期

生命周期描述
beforeCreate组件实例被创建之初
created组件实例已经完全创建
beforeMount组件挂载之前
mounted组件挂载到实例上去之后
beforeUpdate组件数据发生变化，更新之前
updated组件数据更新之后
beforeDestroy组件实例销毁之前
destroyed组件实例销毁之后
activatedkeep-alive 缓存的组件激活时
deactivatedkeep-alive 缓存的组件停用时调用
errorCaptured捕获一个来自子孙组件的错误时被调用
6、如何实现网页自适应

1、使用rem单位实现自适应布局

2、使用媒体查询 (CSS3 @media 查询)

举个例子,当浏览器窗口小于 500px 时，背景变为蓝色：

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }

3、使用vw单位实现自适应布局

4、如果使用element-ui组件库自带自适应

7、请解释同步和异步函数的区别

t.csdn.cn/Z9zHw

8、v-show 和 v-if的区别
  • 控制手段不同
  • 编译过程不同
  • 编译条件不同

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

  • v-show 由false变为true的时候不会触发组件的生命周期
  • v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

9、vuex是什么？怎么使用？哪种场景使用它？

t.csdn.cn/tz9el

10、Vue常用的修饰符及其使用

heima-project.gitee.io/fe-up/#/vue…

avatar
文章
阅读
粉丝