# exam

**Repository Path**: ifercarly/exam

## Basic Information

- **Project Name**: exam
- **Description**: ~~~~~~~~~~~
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-07
- **Last Updated**: 2023-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1. **新员工考试卷-js基础、jq、js高级** 

*1、**下列选项中属于基本包装类型的有：*

A：Object

B：Array

**C：String**

D：Date

*2、**如何取消默认事件效果？*

A：cancelBubble=true

B：stopPropagation()

**C：return false**

D：return

*3、**下列选项中对于原型描述错误的是？*

**A：JavaScript中原型可以实现多态**

B：JavaScript中原型可以实现数据共享

C：实例的对象的__proto__指向了构造函数的原型对象

D：原型中所有的成员(属性和方法)都被原型所属的构造函数的实例所共享

*4、**为匹配的元素加上多个类的正确写法是哪一个：*

A：$("p").addClass("selected1", "selected2")

B：$("p").addClass("selected1,selected2")<br>

**C：$("p").addClass("selected1 selected2")<br>**

D：$("p").addClass(".selected1 .selected2")<br>

*5、**JavaScript中window对象的子对象不包含以下哪个对象？*

A：document<br>

B：self<br>

C：history<br>

**D：message<br>**

*6、**使用new创建一个对象以下顺序描述正确的是*

A：创建一个新对象,执行代码 对this赋值,this指向这个新对象,返回this

**B：创建一个新对象,this指向这个新对象,执行代码对this赋值,返回this<br>**

C：创建一个新对象,this指向这个新对象, 返回这个对象,执行代码对this赋值

D：创建一个新对象, 执行代码对this赋值,this指向这个新对象, 返回这个对象

*7、**当按键盘A时，使用onKeyDown事件打印event.keyCode的结果是*

**A：65**

B：13

C：97

D：37

*8、**var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是:* 

A：for(var i =0; i<emp; i++)

B：for(var i =0; i<Array(3); i++) 

C：for(var i =0; i<emp.length(); i++)

**D： for(var i =0; i<emp.length; i++)** 

*9、**下列声明数组的语句中，错误的选项是*

A：Var arry= new Array()

B：Var arry=new Array(3)

**C：Var arry[]=new Array(3)(4)**

D：Var arry=new Array(„3‟,‟4‟)

*10、****在jQuery中如果想返回一个jQuery对象的话，然后使用这个对象，调用jQuery中的方法，需要使用？***

A：this

**B：$(this)**

C：$this

D：$.this

*11、****在jQuery中，让一个元素隐藏的方法是？***  

A：none()

B：hidden()

**C：hide()**

D：null()

*12、****jQuery 效果淡入淡出的方法是？***  

A：slideUp()、slideDown()

**B：fadeIn()、fadeOut()**

C：In()、Out()

D：Up()、Down()

*13、**为匹配的元素加上 'selected' 类的正确写法是哪一个（） *

*A： `$("p").addClass("#selected")` *

*B： `$("p").addClass(".selected")` *

*C： `$("p").addClass(selected)` *

***D： `$("p").addClass("selected")`***

14、多选

![img](README.assets/6fd87ddc83d54cbe901832878904cd0a.png)

**A：第3行运行结果是：10**

**B：第5运行结果是：20**

C：第3行运行结果是：undefined

D：第8行运行结果是：20

**E：第8行运行结果是：10**

15、多选

![img](README.assets/e85dec2eb68c4f6594cf56ce3eac4069.png)

**A：第8行运行结果说是：比亚迪**

B：第8行运行结果是：宝马

C：第11行运行结果是：奔驰

D：第11行运行结果是：长安铃木

**E：第11行运行结果是：执行不到**

16、多选，代码的运行结果是（ ）

![img](README.assets/427e443f445346f1992e1dc9c8442e36.png)

**A：第11行运行结果是：6**

B：第11运行结果是：11

**C：第12行运行结果是：undefined**

D：第20行运行结果是：1

**E：第20行运行结果是：2**

17、多选

![img](README.assets/d4008a23de7d43c2a12934368c374a22.png)

A：第16行运行结果是：1000

**B：第16运行结果是：undefined**

C：第20行运行结果是：100

**D：第20行执行不到**

**E：第21行执行不到**

18、多选

![img](README.assets/d9bdb467ad4f4b9e90a96bc35b208120.png)

A：第55行运行结果是：[4]

**B：第55行运行结果是：[1,2,3,4]**

C：第59行运行结果是：undefined

D：第59行运行结果是 :10

**E：第11行运行结果是：30**

19、下列代码的运行结果是

![img](README.assets/4a55f048dc124635b4d06dd84ab7ae32.png)

CSS 代码如下

![img](README.assets/492c3b72222c464ea2c2c858c3577dcf.png)

HTML 代码如下

![img](README.assets/14751095cefe4b27a998fc59ddf546ed.png)

JS 代码如下

![img](README.assets/bf65fe961fe64457a0ac1b2fe3116c22.png)

上述js代码中第   行代码存在错误，导致程序无法得到预期功能或结果？

A：第3行

**B：第4行**

**C：第5行**

D：第6行

E：第7行

20、下列代码的运行结果是

![img](README.assets/4c62cc22e43a4bb19aaf8c83e6701af9.png)

CSS 代码如下

![img](README.assets/d02cae8373114d6d9f1466c04373a045.png)

HTML 代码如下

![img](README.assets/eef75311652a48518b0906ffbcbe6bfe.png)

JS 代码如下

![img](README.assets/6307c0683e60452fa59a3f079007ae24.png)

上述js代码中第   行代码存在错误，导致程序无法得到预期功能或结果?

A：第2行

**B：第6行**

C：第15行

D：第21行

**E：第22行**

*21、**关于对闭包和递归描述，正确的是*

**A：闭包是用来缓存数据的, 是将函数内部和函数外部连接起来的一座桥梁**

**B：递归就是函数内部调用函数自己,但是要有结束的条件**

C：闭包可以提升代码的执行效率

D：递归的执行效率极高,所以递归可以代替for循环遍历数据

*22、**下列选项中对于jQuery描述正确的是？*

**A：jQuery是一个快速、简洁的JavaScript库**

B：jQuery中完全可以解决JavaScript的兼容问题

**C：jQuery可以通过链式编程的方式进行开发**

D：有了jQuery就不需要JavaScript了

E：使用jQuery开发可以提高网页的执行速度

*23、**以下哪个选项属于document对象的方法？( )*  

**A：focus( )**

**B：getElementById( )**

**C：getElementsByName( )**

D：bgColors( )

*24、**关于对继承描述，正确的是（）*

A：JavaScript中继承是为了实现多态

**B：JavaScript中可以通过原型链实现继承**

C：JavaScript可以通过对象方式实现继承

**D：借用构造函数能够实现继承**

*25、**以下是JS事件的为（）*

**A：onclick**

**B：onmouseover**

C：this

**D：ondblclick**

26、代码题

![img](README.assets/d445b163c55e4309836a2520961e93c1.png)

```
功能1：自己定义数据，点击按钮根据数据动态生成表格
功能2：点击全选（表头中的多选框）实现表体中的全选功能以及总价格计算
功能3：点击加减按钮操作
	① 点击加减按钮实现数量加1和减1（数量限制至少是1，至多不限）
    ② 并且实现当前行的多选框为选中状态，以及当前行小计的计算最后总价格的计算。
功能4：点击删除实现删除当前行
功能5：点击清空购物车实现表体中的清空功能和总价格归为0
```

## 2. **前端学科第二阶段-导师和讲师技术考核试卷**

1、**请回答下面跟jQuery相关的问题： 

*问题1：请简述$ / jQuery的本质是什么(可以通过代码演示)   *

*问题2：请简述DOM对象和jQuery对象的相互转换方式   *

*问题3：请简述jQuery中跟事件相关的方法，以及他们之间的关系   *

*问题4：请简述jQuery插件开发的两种方式，以及他们的区别   *

*问题5：请简述链式编程的原理，以及jQuery中哪类方法不能进行链式编*

问题1：请简述$ / jQuery的本质是什么(可以通过代码演示)

本质是一个函数（类），类似于以下代码：

```
const jQuery = function(ele) {
    // 这里需要根据 ele 的类型做不同的处理等等
    return document.querySelector(ele);
}
```

![img](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

问题2：请简述DOM对象和jQuery对象的相互转换方式

```javascript
// DOM 对象转 jQuery 对象
$(oDiv);

// jQuery 对象转 DOM 对象
$('#div').get(0) 或者 $('div')[0]
```

![img](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

问题3：请简述jQuery中跟事件相关的方法，以及他们之间的关系

$('div').click(fn); 点击事件

mouseover()/mouseout(); 移入移出

mouseenter()/mouseleave(); 移入移出，不会冒泡

一般也可以使用 on 来给元素绑定事件，例如：

```javascript
// 事件委托的形式给 ul 下的 li 绑定事件
$('ul').on('click', 'li', fn);

// 给 div 绑定点击事件
$('div').on('click', fn);

// hover 事件，移入移出，相当于 mouseenter 和 mouseleave
$('div').hover(fn1, fn2);
```

![img](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

问题4：请简述jQuery插件开发的两种方式，以及他们的区别

```javascript
// 一般用来为扩展jQuery类本身，为类添加新的方法
jQuery.fn.extend(object)
// 一般用来为扩展jQuery对象添加新的方法
jQuery.extend(object)
        
```

![img](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

问题5：请简述链式编程的原理，以及jQuery中哪类方法不能进行链式编程

原理：调用完一个方法后再把当前元素返回(一般是this)，接着就可以进行链式调用了

jQuery 中的工具类方法不能进行链式编程，例如 $.ajax() 等等

2、**请回答下列问题： 

*问题1：请简述new的执行过程 *

*问题2：请使用原型的方式实现继承，要求能继承属性和方法，请用代码演示。 *

*问题3：请简述你对面向对象的理解，以及面向对象的特征有哪些。 *

*问题4：请简述instanceof是如何检测对象类型的 *

*问题5：请简述对象的属性/方法的访问的规则(属性/方法的访问过程)*

问题1：请简述new的执行过程

1. 在内存中开辟一个内存空间
2. 把 this 指向这个内存空间
3. 执行构造函数中的代码
4. 返回 this

问题2：请使用原型的方式实现继承，要求能继承属性和方法，请用代码演示。

```javascript
// 父类
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.showAge = function() {
    console.log(this.age);
};

// 子类
function Student(name, age, score) {
    // 继承父类的属性
    Person.call(this, name, age);
    this.score = score;
}

// 主要用来继承父类的方法
Student.prototype = new Person();
Student.prototype.constructor = Student;

var s1 = new Student('Ifer', 18, 434234324);
s1.showAge();
```

![img](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

问题3：请简述你对面向对象的理解，以及面向对象的特征有哪些。

面向对象倾向于从**全局的、整体的**角度考虑问题，进行代码编写前先把具体需求（功能）拆分成一个个对象（模块），而不用关心具体的每一步实现，最后再把各个对象关联起来。

特征：

- 封装，把分散的代码封装到具体的原型方法里面，外部只需关心使用，而无需关心实现
- 继承，对于已经存在的功能模块可以重复使用
- 多态，同一个函数可以有不同的功能模式，或者用在不同的地方有不同的表现，JS 中不存在！
- 抽象，把一个模块抽象出其具体的特征以及行为，例如茶叶具有提神、防癌的特征，茶叶的行为一般可以用来**冲泡**食用

问题4：请简述instanceof是如何检测对象类型的

instanceof 检测的是当前对象是否可以通过__proto__找到那个构造函数（是否在同一原型链上），例如：

```javascript
function Person() {}

var p1 = new Person();
// p1 可以通过 __proto__ 找到 Person
console.log(p1 instanceof Person);
// p1 可以通过 __proto__ 找到 Object
console.log(p1 instanceof Object);
```

![img](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

问题5：请简述对象的属性/方法的访问的规则(属性/方法的访问过程)

**就近原则**，自己身上有就用自己的，自己没有就通过原型链一级级往上查找

3、**请实现一个倒计时功能，可以使用jQuery： 资源1：倒计时页面.html *

要求1：能够实现到指定日期的倒计时功能，例如：2019-10-01
要求2：计算当前日期到目标日期的时间差，天-小时-分-秒
要求3：到达或超过指定日期，停止工作*

4、**请模拟实现jQuery的选择器和css方法：
要求1：模拟实现jQuery选择器（id、类、标签选择器），使用方式$(selector)，不可以使用querySelectorAll
要求2：模拟实现jQuery中的css方法，可以设置样式和获取样式。使用方式$.css(key, value)
要求3：css方法要求能够设置所有选择到的元素样式
要求4：能够实现链式编程
要求5：模拟jQuery的show和hide方法
要求6：对实现的css方法、show、hide方法进行测试*

5、**开发一个能够实现表单验证的jQuery插件： *

要求1：能够验证用户输入的QQ号码、邮箱地址、手机号码、日期格式。
要求2：通过文本框中设置data-xxx属性来指定验证的内容。
要求3：使用方式，$(formId).validate() 进行表单验证，验证成功返回true，验证失败返回false
要求4：验证成功或者失败，在文本框后面以文本的形式提示，失败要用红色显示。*

## 3. **前端学科第2阶段技术检测试卷-第02套**

*1、**请回答下列关于JavaScript中this的问题 *

*问题1：请简述在JavaScript中不同场景(全局的函数、对象的方法、构造函数等)下this的指向 问题2：请说明在全局的函数中this分别在严格模式和非严格模式下的指向问题 问题3：请简述JavaScript中改变this指向的三种方法的使用方式 问题4：请简述JavaScript中改变this指向的三种方法的区别 问题5：请简述JavaScript中改变this指向的三种方法的使用场景*

问题1：

非严格模式下全局函数中的 this 是 window，对象方法中的 this 是方法的调用者，构造函数中的 this 是当前构造函数 new 出的实例

问题2：

全局函数中的 this 非严格模式下是 window，严格模式下是 undefined

问题3：

```javascript
function test(num1, num2) {

}
let obj = {};
// 第一种方式：第一个参数代表函数中的 this 指向，其他代表参数
test.call(obj, 1, 2);
// 第二种方式
test.apply(obj, [1, 2]);
// 第三种方式
let newFn = fn.bind(obj, 1, 2);
newFn()
```

![img](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

问题4：

call 的方式要依次传入每个参数，例如：call(obj, 1, 2)。会调用函数

apply 接受两个参数，第二个参数是一个数组，数组中的每一项依次对应函数中的形参。会调用函数

bind 不会调用函数，会返回一个新函数

问题5：

```javascript
// call 的应用场景，类型判断，例如：
Object.prototype.toString.call({});


// apply 的应用场景，求数组中的最大值，例如：
Math.max.apply(Math, [2, 3,4, 1])
// 打印数组中的每一项
console.log.apply(console, [1, 2,3]);

// bind 的应用场景，改变事件处理程序中的this指向：
let obj = {
    age: 18
};
document.onclick = function() {
    console.log(this.age);
}.bind(obj);
```

2、**请回答下列问题： *

*问题1：请绘制构造函数-原型-对象的原型关系图 *

*问题2：请绘制原型对象和Object之间的原型关系图 *

*问题3：下图中请说明f对象是否能访问到方法a和b，以及要解释为什么*

![img](README.assets/481c5b5c65684636a631a499b3bff4ae.png)

问题1：

![img](README.assets/d8040e437599478489174f3744dadf15.png)问题2：

![img](README.assets/d6cc11f088694c30825e982d8ee9aa47.png)问题3：

可以访问，f 通过 __prto__ 找到了 Function.prototype 上的 b，又可以通过f.__proto__.__proto__ 找到 Object.prototype 上的a

3、**请手写浅拷贝和深拷贝的代码 要求1：书写一个函数实现浅拷贝 要求2：使用ES6中提供的方法实现浅拷贝 要求3：使用递归的方式书写一个方法实现深拷贝 要求4：使用JS中提供的方法快速实现深拷贝(不考虑函数等一些特殊的类型)*

4、**请实现下述代码 要求1：使用构造函数实现下面类图中的Person构造函数 要求2：实现Teacher构造函数继承Person构造函数，要求继承属性和方法 要求3：原型继承是用Object.create()实现 要求4：重新使用类/类继承实现下面的类图*

![img](README.assets/60194e2e75ad48e0ac6be4f208c8e8cd.png)

5、**请实现下面的演示效果，要求代码中要有闭包的体现 资源1：演示.gif 资源2：演示.html  要求1：实现演示.gif中的效果，要求必须要有闭包的体现。 要求2：代码中出现闭包的位置要在代码前书写好注释 要求3：代码要规范*

## 4. **前端学科-导师讲师-第2阶段技术检测试卷-第01套**

*1、**第一题：简单类型和复杂类型的区别，可画图说明 问题1：说明简单类型在内存中的存储方式 问题2：说明复杂类型在内存中的存储方式 问题3：说明简单类型作为函数的参数传递过程 问题4：说明复杂类型作为函数的参数传递过程*

问题1

答：简单数据类型存储在栈内存中

问题2：

答：复杂数据类型存储在堆内存中

问题3：

简单数据类型按值传递

问题4：

复杂数据类型按引用/地址传递

*2、**第二题：看下图回答问题*

![img](README.assets/a3e01bed7f2f4dbf8f47150dcc502e4a.png)

 问题1：分别说出代码行数25、26、27、28处的结果。

问题2：分别解释每次打印结果的原因

执行结果分别是：ccc, undefined, undefined, www



第 25 行，返回的 c，根据作用域链，会向上查找到 ccc，这里也发生了闭包现象

第 26 行，f 是一个执行性函数的返回结果，是一个对象，此对象下面并没有挂着 c 这个属性

第 27 行，调用 b() 方法的时候，b 里面并没有返回值，默认返回 undefined

第 28 行，闭包会使变量驻留内存，上面 27 行修改了 c 为 www，所以这里是 www

*3、**实现全选/反选功能，效果如图*

![img](README.assets/829ec77fb038469fa408341922ac2c06.png)

要求1：点击全选的checkbox，让下面所有人名前的checkbox的选中状态和全选的一致

要求2：点击反选按钮，所有人名前的checkbox的选中状态取反

要求3：点击所有人名前的checkbox，判断全选的选中状态

要求4：代码规范

*4、**动态创建表格 要求1：实现一个函数接收表头数据，动态生成表头 要求2：实现一个函数接收数据，动态生成数据行 要求3：实现一个函数实现动态创建表格*

*5、**实现一个简单的处理字符串模板的引擎 要求1： 能够把类似于var str = ‘hello, I am {{user}}, from {{location}}’，中的{{user}}-{{location}}转换成具体数据。 要求2：调用方式 var compile = template(str); var html = compile({ user: ‘zs’, location: ‘ls’ }) 要求3：代码要规范*

编程题3（总分20分）

1. 能够书写匹配{{xxx}}的正则表达式，得4分
2. 能够通过遍历正确的匹配到所有占位符，得5分
3. 能够正确的获取到{{xxx}}中的内容，得5分
4. 能够把模板中的内容替换成，对象中的数据，得4分
5. 代码规范，得2分

## 5. **前端学科-导师讲师-第2阶段技术检测试卷-第02套**

*1、**jQuery里面隐式迭代和链式编程实现基本思路是什么？*

隐式迭代的原理是内部进行循环操作，用 $.each 等

链式编程的原理是调用方法之后返回当前 jquery 对象，一般是 $(this)

*2、**JavaScript 中原型链你是如何讲解的？可以画图说明*

\1. 是对象就有 __proto__ 属性

\2. 构造函数具有原型对象 prototype

\3. 构造函数的原型对象也是对象，遵循“是对象就有 __proto__ 属性”

\4. 构造函数的原型对象具有 construtor 属性指向构造函数自己

\5. 多个对象之间通过 __proto__ 链接起来的这种关系就是原型链！

```javascript
function Person(name, age) {
    this.name = name;
    this.age = age;
}

var p1 = new Person('德华', 18);

// 是对象就有 __proto__
// 对象的 __proto__ 指向构造函数的原型
console.log(p1.__proto__ === Person.prototype); // true

// 构造函数的原型对象具有 constructor 属性指向构造函数自己
console.log(Person.prototype.constructor === Person); // true

// Person.prototype 也是对象，遵循“是对象就有 __proto__”，同样指向构造函数的原型
console.log(Person.prototype.__proto__ === Object.prototype);

// Object.prototype 也是对象，遵循“是对象就有 __proto__”
console.log(Object.prototype.__proto__); // null
```

*3、**请阅读一下代码，并回答以下2个问题：*

```javascript
var x = 5;
 function fun() {
   x = 0;
   console.log(x);
   console.log(this.x);
   var x;
    console.log(x);
 }
 new fun();
```

第一， 请说出一次打印的结果是什么？

 第二， 分别解释每次打印结果的原因？

结果：打印结果分别是：0 和 undefined 和 0

代码分析如下：

```javascript
var x = 5;
function fun() {
    var x = undefined;
    x = 0;
    console.log(x); // x 是局部变量，给全局中的 x 没有什么关系，这里结果是 0
    console.log(this.x); // 当前函数中并没有挂载 this.x，所以这里的结果是 undefined
    console.log(x); // x 还是上面的0
}
new fun(); 
```

*4、**请封装一个函数，要求处理此url地址： http://www.itcast.cn?id=1&uname=andy, 返回得到一个如下格式的对象 结果为{id:’1’, uname: ‘andy’}* 

*5、**请对以下字符串 '327560124465783468' 进行如下操作：   （1）统计改字符串中出现次数最多的数字及次数，输出结果   （2）请对此字符串进行升序排序（禁用sort），并返回结果。*

*6、**实现一个记录事件的todulist程序。 具体展示如下面动图展示*

![img](README.assets/c7ce3d6c315c481db8d3ffdd6c35d817.jpg)

要求

1. 使用本地存储刷新页面数据不会丢失
2. 按下回车后， 输入的数据可以展示在今日事项中，右侧显示有几条数据。
3. 点击删除按钮可以删除当前事件。

\4. 使用原生js或者jquery都可以。

\5. 素材见附件（友情提示：生成的 li结构  有注释代码）

*7、**请制作一个简单的弹幕效果， 展示效果在附件中。   	请进行简单布局。 点击发送按钮，会把文本框里面的文字信息发送到粉色区域的上侧。 每次弹幕的位置是随机显示的 使用原生js或者jquery都可以（可以不使用本地存储）*

## 6. **Vue基础**

*1、**v-on指令绑定原生事件时，默认的第一个参数是什么*

A：dom元素

B：dom元素的索引下标

**C：事件参数对象**

D：无参数

*2、**v-pre的指令的作用是什么*

A：只渲染一次该节点内容

B：指定渲染该节点内容

C：在该节点前插入内容

**D：跳过渲染该节点内容**

*3、**v-model绑定多个checkbox的时候，它的值应该是一个什么类型*

A：字符串

B：数字

C：对象

**D：数组**

*4、**v-model可以用下面哪两个指令来组合实现*

A：v-if 和 v-on

B：v-show和v-bind

C：v-bind和v-if

**D：v-bind和v-on**

*5、**Vuejs使用什么特殊符号来在模板中绑定定义好的变量*

A：{ }

**B：{{ }}**

C：（）

D：<>

*6、**关于路由跳转下面说法正确的是*

**A：this.$router.push(地址) 可以跳转**

**B：this.$router.push({ path: 地址}) 可以跳转**

**C：this.$router.push(地址?id=123) 可以跳转 并且传值**

**D：this.$router.push({ path: 地址, query: { id: 123 } })  可以跳转 并且传值**

*7、**关于嵌套路由下面说法正确的是*

A：嵌套路由不需要router-view

**B：嵌套路由的路由规则必须放在父级路由规则的children属性下**

**C：嵌套路由的地址path如果为“”,那么该地址对应的组件则为嵌套路由的默认路由**

**D：嵌套路由的地址如果没有以 "/"开头，则会拼接父级路由的path去匹配地址**

*8、**关于路由传值下面说法正确的是*

A：路由传递的值只要刷新页面就丢失了

**B：使用动态路由参数传值，path: 'user/:id' 可以通过this.$route.params.id来获取对应的值**

**C：使用查询参数传值，user?id=123 可以通过this.$route.query.id来获取对应的值**

**D：只要Vue实例中挂载了路由，在任意组件中都可以获取$route对象**

*9、**Vue-Router中的路由规则routes中说法正确的是*

**A：path表示地址 component表示该地址对应的组件**

**B：当需要动态路由传参时 可以定义 path: '地址/:id'**

**C：当需要动态路由参数可有可无时 可以定义 path: '地址/:id?'**

D：routes中的name属性必须设置

*10、**关于$emit下面正确的是*

**A：$emit的第一个参数为自定义的事件名**

B：在本组件用this.$emit触发事件，使用this.$on可以在其他组件监听到该事件

C：$emit触发的事件名必须为 update:属性名格式

**D：$emit的第二个参数开始均为可以传递的参数**

*11、**关于props传值，下面正确的是*

**A：props可以是一个字符串数组，props: ['name']**

**B：props可以是一个对象，props:  {  name: { type: String } }**

C：props可以不定义接收对象，依然可以通过this.属性获取props值

D：props的传递属性名必须和变量名一样 如  <child :name="name">

*12、**下面关于组件传值，说法正确的是*

**A：父组件给子组件传值，可以使用props进行传递**

**B：子组件给父组件传值可以使用自定义事件进行传递**

**C：使用ref同样可以将父组件的值传递给子组件**

**D：兄弟组件传值可以使用eventBus进行广播**

*13、**关于Vue组件，下面说法正确的是*

**A：Vue组件对象派生自Vue对象，所以Vue对象的配置，组件对象基本都有**

**B：Vue组件对象中的data是一个带返回值的函数，返回值是一个对象**

**C：组件中template模板在Vue2.0+版本中要求有且只有一个根节点**

D：单文件组件.vue文件中的style标签和script标签必须编写，否则组件渲染不出来

*14、**关于Vue-Router中的SPA的实现，下面说法正确的是*

**A：Vue-Router可以通过hash模式，即锚形式保证地址的切换，可以不进行服务器请求**

**B：Vue-Router除了hash模式，还拥有一种history模式，地址中不再包含#符号**

C：只有Vue-Router才可以实现SPA模式，别的框架实现不了

**D：#后面的地址表示一个路径，可以指向一个组件**

*15、**下面关于watch侦听器正确的是*

**A：watch可以监听data中的数据变化**

**B：watch可以监听props中的数据变化**

**C：watch可以监听计算属性中的数据变化**

D：用watch: { obj: function () {} } 这种形式，就可以监听 obj这个对象里面所有层级数据的变化

*16、**下面关于计算属性说法正确的是*

A：计算属性使用时，需要写调用形式，如 {{ 计算属性名() }}

**B：计算属性相对方法而言，更有效率，因为计算属性拥有缓存机制**

C：计算属性只能有一中getter形式，即return 值的形式，不能有setter的形式

**D：计算属性函数中的this指向当前的Vue实例**

*17、**关于自定义指令directive,下面说法正确的是*

A：定义自定义指令名称时，依然要用v-开头，如 Vue.directive('v-demo')

**B：自定义指令的生命周期钩子inserted的第一个参数为当前指令作用的dom对象**

C：inserted钩子会执行很多次

**D：inserted钩子的第二个参数中包含指令表达式的信息，包括值，表达式名称等**

*18、**关于ref下面说法正确的是*

**A：ref可以获取一个原生元素的dom对象**

B：如果给两个div手动赋值了同样的ref属性，this.$refs.属性获取到的是一个数组

**C：如果在v-for中使用ref, 赋值同样的ref属性， this.$refs.属性获取到的是一个数组**

**D：如果给组件赋值了ref，那么可以通过ref获取组件的实例，并且调用子组件的方法**

*19、**关于过滤器下面说法正确的是*

A：过滤器只能应用在模板的插值表达式中

**B：过滤器可以在v-bind的表达式中使用**

**C：过滤器的第一个参数是管道前表达式计算的值**

D：过滤器函数中的this指向当前的实例对象

*20、**下面关于v-model的正确用法的是*

A：<div v-model="name"></div>

**B：<input v-model="name" />**

**C：<input v-model="formData.name" />**

D：<p v-model="formData.name"></p>

*21、**关于class的绑定特性，下面哪个选项可以让div拥有select这个class类*

**A：<div :class="{ select: 1 }"></div>**

B：<div :class="{ select: 0 }"></div>

**C：<div :class="['select']"></div>**

D：<div class="['select']"></div>

*22、**关于v-bind的用法下面正确的是*

**A：<div v-bind:name="变量"></div>**

**B：<div :name="变量"></div>**

**C：<div :name="方法名"></div>**

**D：<div :name="计算属性名"></div>**

*23、**关于v-for中的key说法正确是*

A：key可以是一个常量

B：key的值可以不唯一

**C：v-for中的数组下标可以作为key的值**

**D：key如果不进行赋值，v-for也可以进行渲染**

*24、**关于v-for循环数组下面可以实现的是*

**A：<li v-for="item in list"></li>**

**B：<li v-for="item of list"></li>**

**C：<li v-for="item of [1,2,3,4,5]"></li>**

**D：<li v-for="(item, index) of 15"></li>**

*25、**关于v-on指令绑定事件，下面语法正确的是*

**A：<button v-on:click="方法名"></button>**

**B：<button @click="方法名"></button>**

**C：<button @click="方法名()"></button>**

**D：<button @click="方法名($event)"></button>**

*26、**v-if和v-show的描述正确是*

**A：v-if和v-show都可以实现元素的显示隐藏控制**

**B：v-if和v-show后面表达式的值如果为true 则元素会显示**

C：v-if采用了css样式的方式来控制元素的显示隐藏

**D：v-show不论后面的布尔值是否为true,都会渲染元素**

*27、**下面关于v-text指令的用法语法正确的是*

**A：<div v-text="'字符串'"></div>**

B：<div v-text="字符串"></div>

**C：<div v-text="变量"></div>**

**D：<div v-text="方法()"></div>**

*28、**下面关于vuejs插值表达式语法可以实现的是*

**A：<template>{{ a > 1 ? '成功' : '失败' }}</template>**

B：<template>{{ if （a > 1） { return '成功' } else { return '失败' } }}</template>

**C：<template>{{ a > 1  || '失败' }}</template>**

**D：<template>{{ a > 1 }}</template>**

*29、**修改vue中定义的data属性name，下面方法哪个是可以完成*

**A：this.name = 值**

B：this.setData({ name: 值 })

**C：this.$data.name = 值**

D：this.setState({ name: 值 })

*30、**vuejs在进行实例化时，new Vue时，所挂载的dom属性el可以是*

**A：id选择器**

**B：class选择器**

**C：标签选择器**

**D：属性选择器**

## 7. **移动web阶段**

*1、**less代码 #a{width:200px} #b{.a();} 的运行结果是：*

A：#a{width:200px}

B：#b{width:200px}

**C：#a{width:200px}#b{width:200px}**

D：#b{}

*2、**bootstrap3中container的最大宽度是多少？*

A：1140px

B：1170px

C：1500px

**D：1200px**

*3、**bootstrap4中栅格系统分了几个屏幕宽度区间？*

A：2

B：3

C：4

**D：5**

*4、**rem适配，在iPhone4设备中rem的基准值是50px，那么iphone6设备中rem基准值是多少？*

A：50px

B：56.25px

**C：58.59375px**

D：100px

*5、**假设设备dpr是3.0那么100px宽度的图片原图尺寸多少显示效果最佳？*

A：200px

**B：300px**

C：400px

D：100px

*6、**less能够支持的语法有：*

**A：变量**

**B：函数**

**C：混入**

**D：嵌套**

E：分支循环

*7、**下列属于css相对单位的是：*

**A：em**

**B：rem**

C：px

**D：vh**

**E：%**

**F：vw**

*8、**下列属于视口属性的是：*

**A：viewport-fit**

**B：initial-scale**

C：safe-area-inset-top

**D：maximum-scale**

*9、**媒体查询技术中有哪些媒体类型：*

**A：screen**

**B：print**

C：max-height

D：max-width

**E：speech**

*10、**对主流移动设备宽度描述正确的是：*

**A：iphone5宽度320px**

B：iphone6宽度360px

**C：iphone7宽度375px**

D：iphone8宽度400px

**E：iphone12pro宽度414px**

## 8. **2023年前端学科年中测试** 

*1、**在 iphoneX 中1vw 等于多少？*

A：3.9px

B：3.6px

**C：3.75px**

D：4.14px

*2、**下列不属于视口属性的是？*

**A：device-width**

B：initial-scale

C：width

D：maximum-scale

*3、**下列选项中与 flex: 10px 作用相同的是？*

A：flex-width: 10px

B：flex-shrink: 10px

C：flex-grow: 10px

**D：flex-basis: 10px**

*4、**下列关于过渡相关的事件描述错误的是？*

**A：transitionstart 事件在过渡开始触发和延时无关**

B：元素设置成display:none后触发transitioncancel

C：元素设置成display:none后将不再触发transitionend

D：事件transitionrun属于过渡事件

*5、**下列关于逻辑运算符说法不正确的是？*

A：包括 &&、||、! 3种运算符

B：!可用于数据类型隐式转换

**C：&& 的优先级和 || 的优先级一样**

D：短路运算常常用来赋值操作

*6、**下面的代码
function outer(x) {
 return function inner(y) {
  return x + y
 }
}
let closure = outer(10)
let result = closure(5)
console.log(result)
打印结果是？*

A：5

B：10

**C：15**

D：50

*7、**下面的代码
let x = 10
function foo() {
 if (x === 10) {
  let x = 20
 }
 console.log(x)
}
foo()
打印的结果是？*

**A：10**

B：20

C：undefined

D：Error

*8、**根据以下代码
let a = "10"
let b = 10
let result1 = (a == b)
let result2 = (a === b)
let result3 = (Object.is(a, b))
变量result1、result2和result3的值正确的是？*

**A： true，false，false**

B： false，true，false

C： false，false，true

D： true，true，true

*9、**下列关于立即执行函数说法不正确的是？*

A：立即执行函数在声明函数时立刻被调用

B：立即执行函数本质上是一个函数表达式

C：立即执行函数常被用来避免全局变量污染

**D：立即执行函数只能通过匿名函数创建**

*10、**下面的代码
const obj = {
 name: "John",
 numbers: [1, 2, 3, 4, 5],
 multiply: function(factor) {
  return this.numbers.map(function(number) {
   return number \* factor;
  });
 }
};
const result = obj.multiply;
console.log(result());
打印的结果是？*

A： [1, 2, 3, 4, 5]

B： [2, 4, 6, 8, 10]

C： [2, 3, 4, 5, 6]

**D： TypeError**

*11、**在正则表达式中，下面哪个选项用于创建一个非捕获分组？*

**A： (?: )**

B： ( )

C： (?= )

D： (?<= )

*12、**关于原型和原型链说法不正确的是？*

A：原型是构造函数的一个特定的属性

B：原型链继承是JavaScript中常见的继承方法

**C：构造函数的原型不可随意更改**

D：类也可以实现继承

*13、**以下不是HTTP请求方法的是？*

A：HEAD

B：OPTIONS

**C：UPDATE**

D：PATCH

*14、**xhr对象open函数前三个参数作用分别是？*

A：地址，请求方式，是否异步

B：请求方式，是否异步，地址

**C：请求方式，地址，是否异步**

D：是否异步，地址，请求方式

*15、**使用Promise.allSettled方法，当传入的Promise数组中的所有Promise都已经敲定时，兑现的值是一个对象数组，请问对于数组中的对象不会有以下哪个属性？*

A：status

**B：state**

C：value

D：reason

*16、**如下代码最终打印的结果是？
 const p = new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve(2)
  }, 1000)
 })
 p.then(res => {
  return res \* 2
 }).then(res => {
  return Promise.resolve(res + 2)
 }).then(res => {
  return new Promise((resolve, reject) => {
   resolve(res \* 2)
  })
 }).then(res => {
  console.log(res)
 })*

A：2

B：4

C：8

**D：12**

*17、**如下代码最终打印的结果是？
const promiseA = Promise.resolve('a')
promiseA.then((res) => {
 console.log(res)
}).then((res) => {
 console.log(res)
})
const promiseB = Promise.resolve('b')
promiseB.then((res) => {
 console.log(res)
})
promiseB.then((res) => {
 console.log(res)
})*

**A：a b b undefined**

B：a undefined b b

C：a b undefined undefined

D：a b a b

*18、**示例代码执行时会输出的内容是？
 const xhr = new XMLHttpRequest()
 xhr.open('get', 'http://hmajax.itheima.net/api/province')
 xhr.onreadystatechange = () => {
  console.log(xhr.readyState)
 }
 xhr.send('')*

A：1 2 3 4

**B：2 3 4**

C：3 4

D：0 1 2 3 4

*19、**查看当前代码在 git 服务器的分支列表的命令是？*

A：git branch -a

B：git branch -d

**C：git branch -r**

D：git branch -s

*20、**在Vue2中下面关于v-model的说法不正确的是？*

A：它是一个指令

B：使用.lazy修饰符后是在change事件触发后同步值

C：在表单元素和组件均可使用

**D：加上.number修饰符后值是数字**

*21、**在Vue2中下面在组件使用v-model的说法不正确的是？*

A：默认是名为value的prop和名为input的事件

B：使用model选项可以修改默认的prop和事件的名称

C：model选项中prop用来配置prop名称

**D：model选项中emit用来配置自定义事件名称**

*22、**在transition组件属性appear的作用是？*

A：控制离开或进入过渡的时间序列

B：控制是否使用css过渡类

**C：是否在初始化渲染时使用过渡**

D：指定事件过渡事件类型

*23、**组件my-com只有结构<input type="text" 
style="color:red">my-com</div> 没有设置props，使用组件的代码
<my-com style="background:red" type="file"></my-com>
组件渲染后结构是？*

A：<input type="text" style="color:red">my-com</div>

B：<input type="file" style="color:red">my-com</div>

C：<input type="file" style="background:red">my-com</div>

**D：<input type="file" style="color:red;background:red">my-com</div>**

*24、**Vue配置选项el，template，render在组件初始化的使用优先级？*

**A：render > template > el**

B：el > template > render

C：template > render > el

D：el > render > template

*25、**Vue编译的渲染函数中_c，_v，_s分别什么作用？*

A：渲染函数,处理节点,处理变量

B：渲染函数,处理变量,处理节点

**C：渲染函数,处理文本,处理变量**

D：处理文本,处理变量,渲染函数

*26、**父子关系的组件，组件销毁后各自生命周期函数destroyed的执行情况？*

A：父destroyed→子destroyed

**B：子destroyed→父destroyed**

C：仅子destroyed

D：仅父destroyed

*27、**下面的代码：
export default {
 beforeCreate() {
  console.log("1");
 },
 created() {
  console.log("2");
 },
 watch: {
  name: {
   handler() {
    console.log("3");
   },
   immediate: true,
  },
 },
};
组件渲染后打印数字的顺序是？*

A：1→2→3

**B：1→3→2**

C：3→1→2

D：2→3→1



*28、**关于Vue2中的 mixin 和 extend 说法错误的是？*

A：Vue.extend()是使用基础 Vue 构造器，创建一个“子类”

B：Vue.mixin()是全局注册一个混入，影响注册之后所有创建的每个 Vue 实例

**C：如果mixin合并了created钩子函数，将会被Vue实例中的created钩子函数覆盖**

D：mixin和extend的合并策略相同

29、请按顺序选择正确的代码，实现图片预加载功能，填空内容是？

```html
<template>
  <div>
    <div>
      <h1><strong>Loading...</strong></h1>
      <h2><strong>{{percent}}%</strong></h2>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      count: 0,
      percent: '',
      images: [
        'example.png',
        '...',
        '...'
      ]
    }
  },
  mounted() {
    __1__()
  },
  methods: {
    preload: function() {
      for (let url __2__ this.images) {
        let image = new Image()
        image.src = url
        image.__3__ = () => {
          this.count++
          this.percent = Math.floor(this.count / this.images.length * 100)
        }
      }
    },
  },
  watch: {
    __4__: function(num) {
      if (num === this.images.length) {
        this.$router.push({path: 'home'})
      }
    }
  }
}
</script>
```



A：onload、of、this.preload、count

B：this.preload、in、onload、percent

**C：this.preload、of、onload、count**

D：onload、in、this.preload、percent



*30、**在Vue3.x中关于ref()描述正确的是?*

A：是基于reactive实现的

**B：底层是通过类的get和set实现的**

C：底层是通过defineProperty实现的

D：底层是proxy实现的

*31、**在Vue3.x中下列不是watch()的配置选项的是?*

A：onTrigger

B：onTrack

C：flush

**D：post**

*32、**在Vue3.x中的setup语法糖中，使用哪个方法向外暴露该组件可使用的函数和数据?*

**A： defineExpose**

B：defineProps

C：defineEmits

D：defineSlots

*33、**在Vue3.x中关于defineProps说法错误的是？*

A：可以defineProps()传参约定 props 的类型

B：可以通过泛型参数来定义 props 的类型

C： 如果是泛型编译器会推导出等价的运行时类型

**D： 任何泛型参数的类型可以提取到单文件组件之外**

*34、**下面关于const state = shallowRef({name: 'tom'}) 说法错误的是？*

A：只有对 .value 的访问是响应式的

B：常常用于对大型数据结构的性能优化

C：可以通过triggerRef(state)强制触发副作用

**D：state.value.name = 'jack' 会触发副作用**

*35、**Vue3.x 下面事件中不是 Transition 组件的是？*

A： before-enter

**B：enter-active**

C：enter-cancelled

D：after-enter

*36、**关于useRoute 说法正确的是？*

A：返回路由器实例

B：相当于在模板中使用 $router

**C：返回当前的路由地址信息**

D：vue-router3.x支持

*37、**关于pinia 说法错误的是？*

**A：没有和vuex一样的辅助函数**

B：能支持Vue2.x

C：没有mutations选项了

D：Devtools 支持*38、**下列关于小程序请求API说法不正确的是：*

A：调用 wx.request 发起 HTTP请求

B：接口服务器要求支持 HTTPS 协议并添加到管理后台的白名单中

C：小程序能够支持 socket 协议的请求

**D：小程序通过 CORS 避免跨域访问的限制**

*39、**下列关于小程序分包加载说法不正确的是？*

A：小程序主包体积不能超过 2M

B：通过subpackages配置项声明分包加载

**C：分包之间能够彼此共享逻辑和资源**

D：每个分包体积不能超过 2M

*40、**下列关于uni-app的easycom组件规范不正确的是？*

A：传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件，easycom将其精简为一步

**B：easycom打包时不会自动剔除没有使用的组件**

C：easycom是自动开启的，不需要手动开启

D：组件符合components/组件名称/组件名称.vue 目录结构，就可以直接在页面中使用

*41、**下列关于Vue3版本的uni-app的说法不正确的是？*

**A：支持 commonJS 模块规范**

B：支持Vuex

C：支持Pinia

D：支持通过 props 来获取页面参数的使用方式

*42、**下列关于uni-app条件编译说法不正确的是？*

A：条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台

B：条件编译写法以 #ifdef 或 #ifndef 加平台名称开头，以 #endif 结尾

**C：#ifdef H5 && MP-WEIXIN 表示在 H5 平台和微信小程序平台存在的代码**

D：#ifdef MP-WEIXIN 表示仅出现在微信小程序平台下的代码

*43、**下列关于uni-app的分包说法不正确的是：*

A：微信小程序每个分包的大小是2M，总体积一共不能超过20M

**B：subPackages 里的pages的路径是 root 下的全路径**

C：分包下支持独立的 static 目录，用来对静态资源进行分包

D：微信小程序 tabBar 页面不能放到分包中,只能放到主包中

*44、**下列关于uni-app的页面说法不正确的是：*

A：每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中配置的页面，uni-app会在编译阶段进行忽略

B：通过HBuilderX开发 uni-app 项目时，在 uni-app 项目上右键“新建页面”，HBuilderX会自动在pages.json中完成页面注册，开发更方便

C：uni-app会将pages.json -> pages配置项中的第一个页面，作为当前工程的首页（启动页）

**D：删除uni-app页面时只需删除对应的.vue文件即可**

*45、**下列关于uni-app的样式说法不正确的是：*

**A：在 uni-app 中不支持本地背景图片的路径引用**

B：在 uni-app 中不能使用 * 选择器

C：App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面

D：uni-app 支持的通用 css 单位包括 px、rpx

*46、**下列关于uni-app的easycom说法不正确的是：*

A：easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用

**B：easycom方式引入组件其实是全局引入**

C：在组件名完全一致的情况下，easycom引入的优先级低于手动引入

D：easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）

*47、**关于React Hooks useEffect的说法不正确的是？*

A：useEffect(callback) 每次render都会执行一遍callback函数

B：useEffect(callback, []) 只有第一次render才会执行callback

**C：useEffect(callback, [state]) 认为是componentDidUpdate的效果**

D：useLayoutEffect总是比useEffect先执行

*48、**严格模式下组件中是如下代码，打印的结果是？
 const [count, setCount] = useState(0)
 useEffect(()=>{
  console.log('outer', count)

  return () => {
   console.log('inner', count)
  }
 },[count])*

A：outer 0

**B：outer 0,inner 0,outer 0**

C：inner 0

D：outer 0,inner 0

*49、**下列函数中不是 React 提供的 Hooks 的是？*

A：useMemo

B：useReducer

**C：useInsertion**

D：useTransition

*50、**下列函数中不是 React 提供的内置组件的是？*

A：Fragment

**B：Lazy**

C：StrictMode

D：Suspense

*51、**css 中 flex 属性下列选项说法正确的是？*

**A：flex-grow 默认值为 0**

**B：flex-shrink 默认值为 1**

**C：flex-direction 默认值为 row**

**D：flex-basis 默认值为 auto**

*52、**下面哪些方法可以用于判断数组中是否包含某个元素？*

**A： includes()**

**B： indexOf()**

**C： find()**

**D： some()**

*53、**下列关于节流和防抖说明正确的是？*

**A：节流和防抖都是用来优化Javascript性能的方法**

**B：节流是为了降低逻辑执行的的频次，在指定时间里只会执行1次**

**C：防抖是将一定时间内重复的执行逻辑合并为一次执行**

**D：节流和防抖可以通过封装定时器来实现**

*54、**下列选项中属于xhr对象的事件是？*

**A：error**

**B：loadstart**

**C：progress**

**D：abort**

*55、**下面哪些是NodeJS官方模块？*

**A：Querystring**

B：Request

C：Async

**D：Dns**

*56、**哪些命令可以用来删除远程仓库origin的dev分支?*

**A：git push origin -d dev**

B：git push origin -remove dev

**C：git push origin --delete dev**

D：git push origin -D dev

*57、**在Vue2中下面的组件哪些是内置组件？*

**A：component**

**B：transition**

**C：transition-group**

**D：keep-alive**

E：slot

*58、**在prop的类型检查功能中，下列选项中可以作为类型的是？*

**A：String**

**B：Date**

**C：Object**

**D：自定义构造函数**

**E：Symbol**

*59、**Vue2指令支持哪些钩子函数？*

A：mounted

**B：inserted**

**C：componentUpdated**

D：unMounted

*60、**vue-router 3.x 给组件增加了哪些配置选项？*

**A：beforeRouteEnter**

B：afterRouteEnter

C：afterRouteRouteUpdate

**D：beforeRouteUpdate**

*61、**vue-router 3.x 的mode选项可使用的值是？*

**A：hash**

**B：history**

C：memory

**D：abstract**

*62、**在 Vuex 中，下面选项描述 mutation 和 action 说法正确的是？*

**A： Mutation 用于处理同步操作，而 Action 用于处理异步操作**

B： Mutation 用于处理异步操作，而 Action 用于处理同步操作

**C： Mutation 可以直接修改状态，而 Action 通过提交 Mutation 来修改状态**

D： Mutation 可以触发 Action 的执行，而 Action 不能触发 Mutation 的执行

*63、**下列选项中属于 Vuex 的构造器选项的是？*

**A：modules**

**B：plugins**

**C：strict**

**D：devtools**

*64、**关于Vue2中模版引用ref下面说法正确的是？*

**A：ref可以获取一个原生元素的dom对象**

B：如果给两个div手动赋值了同样的ref属性，$refs.属性获取到的是一个数组

**C：如果在v-for中使用ref, 赋值同样的ref属性，$refs.属性获取到的是一个数组**

**D：如果给组件赋值了ref，通过ref可以获取组件的实例**

*65、**Vue2中下面的实例方法和自定义事件有关的是？*

**A：$on**

**B：$once**

**C：$off**

**D：$emit**

*66、**阅读一下代码，请选择可以正确打印h1标签宽度的选项是？*

```html
<template>
  <div>
    <h1 ref='h1' v-if="show">nowcoder</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true
    // 此处填写代码
  }
}
</script>
```

**A：this.$nextTick(()=>console.log(this.$refs.h1.offsetWidth))**

**B：setInterval(() => {console.log(this.$refs.h1.offsetWidth)})**

**C：setTimeout(() => {console.log(this.$refs.h1.offsetWidth)})**

D：console.log(this.$refs.h1.offsetWidth)

*67、**下列选项中，哪些是Vue3提供的宏函数？*

**A： defineExpose**

**B：defineProps**

**C：defineEmits**

**D：defineOptions**

**E：defineSlots**

*68、**在Vue3.x中关于v-model的变化说法正确的是？*

**A：默认绑定的prop是modeValue**

**B：可以自定义v-model修饰符**

**C：组件上可以实现多个的v-model指令**

**D：v-model:属性名替换了原来Vue2.x中.sync修饰符的功能**

*69、**在Vue3.x中移除了哪些功能?*

**A：mixin**

**B：$listeners**

C：keep-alive组件

**D：v-on 的 .native 修饰符**

*70、**在Vue3.x关于setup函数中第二个参数包含了下面哪些对象？*

**A：emit**

**B：expose**

**C： attrs**

D： options

*71、**在Vue3.x新增哪些内置组件？*

**A：Suspense**

**B：Teleport**

C：KeepAlive

D：TransitionGroup

*72、**在 vue-router4.x 中创建路由模式的函数有？*

**A：createWebHashHistory**

**B：createWebHistory**

**C：createMemoryHistory**

D：createWebHash

*73、**下列选项中，是Vue3.x提供的工具类型是？*

**A：ExtractPropTypes**

B：PickPropTypes

**C：MaybeRef**

**D：CSSProperties**

*74、**以下代码中，哪个选项是正确的 TypeScript 泛型约束语法？*

**A：function getData<T extends string>(value: T): T { return value; }**

B：function getData<T super string>(value: T): T { return value; }

C：function getData<T implements string>(value: T): T { return value; }

**D：function getData<T extends number>(value: T): T { return value; }**

*75、**下列类型中可以添加泛型的是?*

**A：类型别名**

**B：接口**

**C：函数**

**D：类**

*76、**`const fn: Fn = () => {}` Fn可以是以下哪些类型？*

**A：type Fn = ()=> void**

**B：interface Fn { (): void }**

C：interface Fn { Fn(): void }

D：type Fn = (): void

*77、**下面属于TS的内置工具类型的是？*

**A：Partial**

**B：Required**

**C：Pick**

**D：Omit**

**E：Awaited**

*78、**下列 关于 type 和 interface 的区别说法正确的是？*

**A：都可以定义对象类型**

**B：type 不能重复定义**

**C：interface 可以重复定义**

D：type 不能复用类型

**E：interface 可以定义函数类型**

*79、**下列关于uni-app的tabBar说法正确的是：*

**A：tabBar 的页面展现过一次后就保留在内存中，再次切换 tabBar 页面，只会触发每个页面的onShow，不会再触发onLoad**

**B：当设置 position 为 top 时，将不会显示 icon**

C：顶部的 tabBar 支持所有小程序平台

**D：tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序**

*80、**React中关于Redux的说法正确的是?*

**A： Redux可以集中管理数据状态**

**B：Redux中的reducers是纯函数**

**C：Redux中thunk-action中间件可以实现异步请求**

**D：遵循状态不可变**

*81、**实现一个 element-plus 的 Card 卡片组件：
\1. 支持默认插槽传入卡片内容
\2. 支持 body-style 设置 body 的样式
\3. 标题支持 header 属性设置，也支持 slot#header 插槽传入，插槽优先级高。
\4. 支持 shadow 设置卡片阴影显示时机，支持 always、hover 或 never，默认是 always
\5. 采用TS实现（非必须，如果使用可加分）*

![img](README.assets/1741ef1a3d08402fbfe4c08c0208f162.png)

![img](README.assets/378507309c8a4830b41edec8151e6538.png)

## 9. **前端学科员工测试-ajax阶段（2023-6月）**

*1、**URL 由哪些部分组成：*

A：协议、域名、路径、查询参数、锚文本

B：协议、端口号、路径、查询参数、锚文本

**C：协议、域名、端口号、路径、查询参数、锚文本**

D：协议、域名、路径、锚文本

*2、**在 URL 中查询参数的作用是：*

A：指定资源的位置

B：指定请求的方法

C：指定请求体的数据

**D：传递附加信息**

*3、**基于如下代码回答，axios如何移除请求拦截器：
const reqInterceptor = axios.interceptors.request.use(function (config) {
 // 在发送请求之前做些什么
 return config
}, function (error) {
 // 对请求错误做些什么
 return Promise.reject(error)
})*

A：axios.interceptors.request.remove(reqInterceptor)

B：axios.interceptors.request.reject(reqInterceptor)

**C：axios.interceptors.request.eject(reqInterceptor)**

D：axios.interceptors.request.delete(reqInterceptor)

*4、**下列选项中，哪个无法传递查询参数：*

A：axios({ url: 'url', params: { key: 'value' } })

B：axios({ url: 'url?key=value' })

**C：axios.get('url', { key: 'value' })**

D：axios.get('url', { params: { key: 'value' } })

*5、**通过ajax提交FormData格式的数据到服务器时，请求头中conent-type的值是：*

A：application/json

B：application/form-data

C：application/x-www-form-urlencoded

**D：multipart/form-data**

*6、**在 HTTP 请求报文中，请求行包含：*

A：请求头部信息

B：请求正文信息

**C：请求方法、URL 和协议版本**

D：状态码和状态信息

*7、**以下哪个不是HTTP请求方法：*

A：HEAD

B：OPTIONS

**C：UPDATE**

D：PATCH

*8、**下面的代码的输出结果是：
 const p1 = 'itheima'
 const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
   reject('error')
  }, 0)
 })
 const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('success')
  }, 0)
 })
 const p4 = Promise.resolve('itcast')
 Promise.any([p1, p2, p3, p4]).then(res => {
  console.log(res)
 })*

**A：itheima**

B：error

C：success

D：itcast

*9、**使用Promise.allSettled方法，当传入的Promise数组中的所有Promise都已近敲定时，兑现的值是一个对象数组，请问对于数组中的对象不会有以下哪个属性：*

A：status

**B：state**

C：value

D：reason

*10、**如下代码最终打印的结果是：
 const p = new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve(1)
  }, 1000)
 })
 p.then(res => {
  return res \* 2
 }).then(res => {
  return Promise.resolve(res + 2)
 }).then(res => {
  return new Promise((resolve, reject) => {
   resolve(res \* 2)
  })
 }).then(res => {
  console.log(res)
 })*

A：2

B：4

C：6

**D：8**

*11、**为了保证输出的结果是 12534，asyncFunc内注释部分需要如何编码：
function timeOutPromise(output, delay) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve(output)
  }, delay)
 })
}
async function func1() {
 const p1 = await timeOutPromise(1, 1000)
 console.log(p1)
 const p2 = await timeOutPromise(2, 1000)
 console.log(p2)
}
async function func2() {
 const p3 = await timeOutPromise(3, 1000)
 console.log(p3)
 const p4 = await timeOutPromise(4, 1000)
 console.log(p4)
}

async function asyncFunc() {
 // 代码略 
 console.log(5)
}
asyncFunc()*

A：func1();func2();

B：await func1();await func2();

**C：await func1();func2();**

D：func1();await func2();

*12、**以下代码执行结果是什么：
console.log('A');

(async function () {
 await new Promise(function (resolve) {
  setTimeout(function () {
   console.log('B')
   resolve()
  }, 0)
 })
 await Promise.resolve()
 await new Promise(function (resolve) {
  setTimeout(function () {
   console.log('C')
   resolve()
  }, 0)
 })
 console.log('D')
})()

setTimeout(function () {
 console.log('E')
}, 0)

new Promise(function (resolve) {
 setTimeout(function () {
  console.log('F')
  resolve()
 }, 0)
}).then(function () {
 console.log('G')
})

console.log('H')*

**A：A H B E F G C D**

B：A H B C D E F G

C：A H B E F C D G

D：A H B E C D F G

*13、**已经使用 git push origin -u main将本地main分支推送到了远程仓库，后续使用哪个命令无法继续推送main分支：*

A：git push

B：git push origin main

C：git push origin main:main

**D：git push origin main main**

*14、**使用Bootstrap5中的Toasts组件时，以下哪个不是他支持的数据属性：*

A：data-bs-animation

B：data-bs-autohide

**C：data-bs-hide**

D：data-bs-delay

*15、**ECharts中，如果要绘制的是饼状图，type属性设置的值为：*

A：line

B：bar

**C：pie**

D：circle

*16、**示例代码执行时会输出的内容是：
 const xhr = new XMLHttpRequest()
 xhr.open('get', 'http://hmajax.itheima.net/api/province')
 xhr.onreadystatechange = () => {
  console.log(xhr.readyState)
 }
 xhr.send('')*

A：1 2 3 4

**B：2 3 4**

C：3 4

D：0 1 2 3 4

*17、**请问哪份代码无法生成路径 www/static/info.gif：*

A：path.join('www', '/static/info.gif')

B：path.join('www', '/static', '/info.gif')

C：path.join('www', '/', 'static/info.gif')

**D：path.resolve('www', '/static', '/info.gif')**

*18、**对于使用如下方式定义的模块，使用选项中的哪种方式导入会报错：
export default {
 name: '播仔',
}
export const info = 'itheima'
export const sayHi = () => {
 console.log('itheima666')
}*

A：import obj from 'module.js'

B：import { info , sayHi} from 'module.js'

**C：import obj , { info , sayHi : sayHello} from 'module.js'**

D：import * as modules from 'module.js'

*19、**使用CORS时，服务器会返回一些特定的响应头给客户端，请问不包含以下哪个：*

A：Access-Control-Allow-Origin

**B：Access-Control-Allow-Authenticate**

C：Access-Control-Allow-Methods

D：Access-Control-Allow-Headers

*20、**使用webpack5时，哪类文件需要下载对应的loader才可以正常的解析：*

A：.js

B：.png

**C：.css**

D：.woff

*21、**请问可以通过哪些方式取消示例代码中的请求：
let cancel1
cancel1 = new AbortController()

const CancelToken = axios.CancelToken
let cancel2

axios.get('http://hmajax.itheima.net/api/province', {
 signal: cancel1.signal,
 cancelToken: new CancelToken(function executor(c) {
  cancel2 = c
 })
})*

A：cancel1.reject()

**B：cancel1.abort()**

C：cancel1()

**D：cancel2()**

*22、**使用ECharts绘制的折线图中，可以使用哪种方式来设置x轴的文字颜色：*

**A：xAxis.axisLine.lineStyle.color**

B：xAxis.axisLine.color

**C：xAxis.axisLabel.color**

D：xAxis.axisFont.color

*23、**在实例化URLSearchParams时，以下哪些选项是合理的参数值：
const p = new URLSearchParams(params)*

**A：params = 'name=jack&age=17'**

**B：params = { name: 'jack',age: 18 }**

**C：params = [['name', 'jack'], ['age', 18]]**

**D：const param = new FormData();param.append('name', 'jack');param.append('age', 18);**

*24、**在浏览器环境下，以下哪些写法可以添加微任务：*

A：setTimeout(callBack)

**B：new MutationObserver(callBack)**

**C：queueMicrotask(callBack)**

**D：Promise.resolve().then(callBack)**

*25、**已经使用 git stash 暂存了内容，请问使用哪个命令不会影响暂存的记录：*

A：git stash pop

**B：git stash apply**

**C：git stash list**

D：git stash clear

*26、**.gitignore文件中配置了以下的内容，请问哪些描述是正确的：
  .\*
  !.vscode
  node_modules
  .env.\*.local*

**A：忽略.开头的文件**

**B：跟踪.vscode文件夹**

**C：忽略 node_modules**

**D：忽略 .env.任意值.local 文件**

*27、**哪些命令可以用来删除远程仓库origin的dev分支：*

**A：git push origin -d dev**

B：git push origin -remove dev

**C：git push origin --delete dev**

D：git push origin -D dev

*28、**使用CommonJS的标准时，下列导出的语法中哪些是正确的：*

**A：module.exports.info='itheima'**

**B：exports.info='itheima'**

**C：module.exports={info:'itheima'}**

D：exports={info:'itheima'}

*29、**选项中哪些方式可以使用ECMAScript模块：*

**A：node环境下: package.json中设置 {type:"module"}**

**B：node环境下: 使用.mjs作为文件后缀名**

**C：浏览器环境下: script标签设置type=module**

D：浏览器环境下: 使用.mjs作为文件后缀名

*30、**以下哪些命令可以根据package.json下载项目依赖：*

**A：npm install**

**B：npm i**

**C：pnpm i**

D：yarn i

*31、**代码题需求 **数据接口** 基于提供的基础模板（文件夹 01.back-end）*

*实现： 1. 使用express实现数据实现数据接口 （1）文档:https://apifox.com/apidoc/shared-539ce6c3-b7e6-4b71-a531-122ccb322b00 （2）数据: 01. back-end/data/db.json 2. 使用cors中间件实现跨域 **页面** 基于提供的基础模板（文件夹 02.front-end ）实现： 1. 初始数据获取: 默认调用自己实现的数据接口，获取并渲染推荐的文章列表 2. 切换效果: tab点击切换高亮，并获取对应文章列表并渲染 3. 时间戳转换: 时间戳通过 dayjs 转换为距今多久 4. 缓存数据: （1）获取分类文章时缓存数据 （2）再次点击该分类时，直接通过缓存获取数据 （3）缓存的数据，刷新页面时清空 可以参考 **配套视频** 确认效果*

## 10. **前端学科员工测试-JS阶段（2023）**

*1、**下列哪个选项是正确的解构赋值方式？*

**A：const { a, b: { c } } = { a: 1, b: { c: 2 } }**

B：const { a, { b: c } } = { a: 1, b: { c: 2 } }

C：const { a, b: c } = { a: 1, b: { c: 2 } }

D：const { a, b: { c } } = [ 1, { c: 2 } ]

*2、**下面哪种声明函数的方式无法使用箭头函数？*

A： 函数声明

B： 函数表达式

**C： 构造函数**

D： 以上都可以使用箭头函数

*3、**下面哪个方法可以在 JavaScript 中创建一个新的对象，同时将其原型设置为指定对象？*

**A： Object.create()**

B： Object.assign()

C： Object.getPrototypeOf()

D： Object.setPrototypeOf()

*4、**下面哪种情况会导致 JavaScript 抛出 TypeError 错误？*

**A：.对一个未定义的变量进行操作**

B： 将一个函数作为对象使用

C： 使用 delete 关键字删除一个不可删除的属性

D： 在数组中访问不存在的索引

*5、**下面哪种数据类型不是 JavaScript 中的基本数据类型？*

A： boolean

**B： object**

C： number

D： string

*6、**下列哪个正则表达式可以匹配一个以数字开头、后面跟着一个或多个字母、数字或下划线的字符串？*

A： /^[a-zA-Z0-9_]+$/

**B： /^[0-9][a-zA-Z0-9_]+$/**

C： /^\d\w+$/

D： /^[0-9]\w+$/

*7、**下面哪个方法可以获取元素的CSS样式？*

A： getElementStyle()

**B： getComputedStyle()**

C： getStyle()

D： getCurrentStyle()

*8、**下列哪个方法可以用于在数组中删除指定位置的元素？*

**A： splice()**

B： slice()

C： pop()

D： shift()

*9、**在 JavaScript 中，下面哪个函数可以用于手动解除闭包的引用关系？*

A： Object.create()

B： Object.freeze()

C： Object.seal()

**D： null**

*10、**在 JavaScript 中，下面哪个关键字可以创建一个新的块级作用域？*

A： try

**B： let**

C： var

D： catch

*11、**在 JavaScript 中，当函数访问一个变量时，它会首先查找自己的作用域，然后查找什么？*

A： 全局作用域

B： 其他函数的作用域

**C： 父级函数的作用域**

D： 所有变量的作用域

*12、**在 JavaScript 中，如果变量在当前作用域和父级作用域中都有定义，那么在哪个作用域中的变量会被访问？*

**A： 当前作用域中的变量**

B： 父级作用域中的变量

C： 都可以访问

D： 都不可以访问

*13、**在严格模式下，函数内部如果没有对象调用，那么this指向：*

A： 函数本身

B： 全局对象

**C： undefined**

D： null

*14、**apply和call方法可以改变函数的this指向，其中区别是：*

**A： apply方法接收一个参数数组，call方法接收多个参数**

B： apply方法接收多个参数，call方法接收一个参数数组

C： apply方法只能传递一个参数，call方法可以传递多个参数

D： apply和call方法没有区别

*15、**在使用构造函数创建对象时，this 关键字指向什么？*

A： 构造函数本身

B： 全局对象

**C： 新创建的对象**

D： 构造函数的参数

*16、**在箭头函数中，this 关键字指向什么？*

A： 全局对象

B： 函数本身

C： 调用该函数的对象

**D： 箭头函数没有自己的 this，它会使用定义它时所在上下文的 this**

*17、**下面哪种情况会导致递归函数发生栈溢出错误？*

A： 递归函数执行次数过多

B： 递归函数内存占用过大

C： 递归函数内部出现死循环

**D： 以上情况都有可能导致栈溢出错误**

*18、**在 JavaScript 中，以下哪个方法可以检查一个对象是否是另一个对象的原型？*

**A： isPrototypeOf()**

B： hasOwnProperty()

C： getPrototypeOf()

D： Object.keys()

*19、**以下哪个选项描述的是递归函数中的递归调用？*

A： 在函数内部调用其他函数

B： 在函数外部调用其他函数

**C： 在函数内部多次调用自身**

D： 在函数外部多次调用自身

*20、**在 JavaScript 中，递归函数终止的常见方式是什么？*

A： 使用 break 语句

B： 使用 continue 语句

**C： 使用 return 语句**

D： 不需要终止条件

*21、**下面哪些语句可以跳出循环结构？*

**A： break**

B： continue

**C： return**

D： throw

*22、**在事件循环中，下面哪些操作是可能导致页面渲染阻塞的？*

**A： 大量计算密集型的 JavaScript 代码**

**B： 频繁的 DOM 操作**

C： 大量的网络请求

**D： 频繁的页面重绘操作**

*23、**关于高阶函数，以下哪些描述是正确的？*

**A： 高阶函数是指参数或返回值是函数的函数**

**B： 高阶函数可以使用闭包来实现柯里化**

C： 高阶函数必须使用箭头函数来实现

D： 高阶函数只能在函数式编程中使用

*24、**在DOM事件中，stopPropagation()和preventDefault()方法的区别是什么？*

**A： stopPropagation()可以阻止事件传播到父元素**

**B： preventDefault()可以阻止事件的默认行为**

C： stopPropagation()可以阻止事件在捕获阶段被处理

D： preventDefault()可以阻止事件在冒泡阶段被处理

*25、**在整个事件流中，事件的传播是从：*

**A： 最外层的父元素向内层子元素传播**

B： 最外层的父元素向目标元素传播

C： 内层子元素向最外层的父元素传播

**D： 目标元素向最外层的父元素传播**

*26、**以下哪些是事件委托的优点？*

**A： 节省内存，减少事件绑定数量**

**B： 可以动态绑定事件到新增的子元素**

C： 可以减少事件冒泡，提升事件处理效率

D： 可以方便地移除事件处理函数

*27、**以下哪些场景适合使用事件委托？*

**A： 处理列表或表格中的事件**

**B： 处理大量的动态创建的元素的事件**

**C： 处理少量静态创建的元素的事件**

D： 处理表单元素的事件

*28、**在哪些情况下，浏览器会触发DOM回流？*

**A： 添加、删除、修改DOM节点**

**B： 改变DOM节点的位置、尺寸或内容**

**C： 改变窗口大小**

D： 页面初次渲染

*29、**在Javascript中，关于定时器的最佳实践，哪些是正确的？*

A： 尽量避免使用setInterval()，而使用setTimeout()

**B： 定时器中执行的函数应该越简单越好，不要做过多耗时的操作**

**C： 在每个定时器的函数执行完后，应该清除定时器**

**D： 使用定时器应该注意内存泄漏的问题。**

*30、**当在 JavaScript 中使用定时器时，下列哪些操作可能会导致定时器不准确？*

**A： 执行了耗时操作**

**B： 暂停了浏览器渲染进程**

**C： 切换到另一个标签页**

**D： 电脑进入睡眠模式**

*31、**封装一个递归函数来查找祖先元素节点。函数可以接收两个参数：
\1. 子元素节点：从该节点开始向上查找祖先节点
\2. 祖先节点的类名：查找的目标祖先节点的类名 使用示例：*

![img](README.assets/fae7462e71e64e54a87bf6c6f04d3d22.png)

```html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="grandparent">
    <div class="parent">
      <div class="child"></div>
    </div>
  </div>
  <script>
  function findAncestorByClassName(ele, classStr) {
    let oParent = ele.parentNode
    while(oParent) {
      if(oParent.className?.split(' ').includes(classStr)) {
        return document.querySelector('.' + classStr)
      } else {
        oParent = oParent.parentNode
      }
    }
    return oParent
  }

  const childElement = document.querySelector('.child')
  const ancestorElement = findAncestorByClassName(childElement, 'grandparent')

  console.log(ancestorElement)
  </script>
</body>
</html>
```

## 11. **前端学科员工测试-基础班&移动web阶段（2023）**

*1、**下列关于.item:first-child(-n+3)选择器描述不正确的是：*

A：属于伪类选择器

B：基于目标元素在其父元素中的位置查找

C：n的取值为大于等于0的整数

**D：该选择器选中后3个.item元素**

*2、**下列关于字体说法不正确的是：*

A：font-family用来指定网页中文字的字体

B：不同的操作系统所支持的字体不一致

**C：font-amily: Arial 设置中文件字体为 Arial**

D：指定多个字体时的查找优先级为自左向右

*3、**下列关于字体图标说法不正确的是：*

A：字体图标是将失量图片打包成了字体

B：字体图标可以像文字一样改变颜色和字号

**C：字体图标只能是纯色或扁平的**

D：使用 font-family 来指定并引用字体文件

*4、**下列关于透明的说法不正确的是：*

A：opacity不能设置颜色的透明度

B：transparent设置颜色纯透明，可以理解成是特殊的颜色值

C：rgba和hsla均能设置颜色透明度

**D：16进制颜色值无法设置颜色的透明度**

*5、**下列关于过渡说法不正确的是：*

A：过渡能够在样式切换过程中产生动画效果

B：样式差异和时间差异是产生过渡效果的必要条件

C：不是所有CSS样式属性都可以应用过渡效果

*5、**下列关于过渡说法不正确的是：*

A：过渡能够在样式切换过程中产生动画效果

B：样式差异和时间差异是产生过渡效果的必要条件

C：不是所有CSS样式属性都可以应用过渡效果

**D：all 指定过渡属性是推荐用法**

*6、**下列关于定位说法不正确的是：*

A：绝对定位、固定定位不受文档流的约束

B： 相对定位以元素原来位置为参考

**C：元素默认的定位坐标为 left:0 和 top: 0**

D：粘性定位要求其父元素高度大于粘性定位的元素

*7、**下列关于CSS转换说法不正确的是：*

A：分2d平面转换和3d空间转换两种方式

**B：应用 translate 后元素会脱离文档流**

C：scale缩放元素时可以传入负数

D：translateZ(0) 可以启用硬件加速提升性能

*8、**下列关于表格相关标签说法不正确的是：*

A：表格常用来展示大量的数据

B：网页的内容要放在td、th标签中，而不是放在tr标签里

**C：表格不能嵌套使用**

D：表格中tbody标签通常情况都省略了

*9、**在iPhoneX中1vw等于多少?*

A：3.2px

B：3.6px

**C：3.75px**

D：4.14px

*10、**对于Flex容器的子元素无效的CSS属性是：*

A：line-height

B：margin

C：align-self

**D：vertical-align**

*11、**下列关于视口说明不正确的是：*

A：视口是用于显示页面内容的一个区域

**B：视口在大小与浏览器窗口大小是一致的**

C：视口的大小可以通过代码<meta name="viewport" content="xxx">进行指定

D：视口大小的设置会影响网页内容的显示，比如缩小、放大或滚动

*12、**下列关于媒体查询说法不正确的是：*

A：通过媒体查询可以实现有条件的执行css代码

B：通过@media规则或link标签都可以定义媒体查询的规则

**C：定义在@media内部的样式优先级（权重）高于外面的样式**

D：prefers-color-scheme能够检测到系统主题颜色

*13、**下列关于rem的说法不正确的是：*

A：rem的大小取决于html字号的大小，默认为16px

B：使用rem做为长度单位时可以实现移动Web的屏幕适配

**C：rem只适用于移动端浏览器**

D：开发中经常检测视口宽度来动态设置rem的大小（即html字号大小）

*14、**下列关于浮动说法不正确的是：*

A：浮动最初是用来实现文字与图片的环绕的

**B：浮动可以使元素盒子脱离文档流进而影响前后盒子以及父盒子的布局**

C：清除浮动实质上是清除由于浮动带来的影响

D：浮动的盒子会创建块格式化上下文（BFC）

*15、**下列关于盒子大小计算说法不正确的是：*

A：默认情况下盒子的大小为：宽高+padding+border

B：通过box-sizing改变盒子大小的计算方式

**C：box-sizing有3个取值，分别为border-box、content-box、padding-box**

D：指定 box-sizing: border-box 时 padding 和 border 不会影响盒子的大小

*16、**下列关于sticky定位方式说法不正确的是：*

A：sticky粘性定位参考可滚动的祖先元素

B：粘性定位可以被认为是相对定位和固定定位的混合

C：父元素在设置了overflow: auto; 时可能会导致粘性定位失效

**D：粘性定位元素会脱离正常的文档流**

*17、**在chrome中文版中关于字号限制说法不正确的是：*

A：chrome中文浏览器限制最小字号为12px

B：通过transform: scale(0.x)、zoom: 0.x 可以解决最小字号的限制

**C：-webkit-text-size-adjust: none; 也可以解决最小字号的限制并且PC端和移动端都能支持**

D：zoom: 0.x; 不推荐使用，因为有兼容有问题

*18、**下列关于重绘和回流说法不正确的是：*

A：不必要的重绘和回流会导致浏览器性能的损耗

B：明确指定元素宽高或定位可以有效避免回流

C：元素外观样式的变化（如颜色、阴影等）会导致重绘，元素宽高、位置的变化会导致回流

**D：重绘比回流的性能损耗更大**

*19、**关于文本溢出处理说法不正确的是：*

A：text-overflow可以控制文本的溢出效果

B：text-overflow必须要配合overflow:hidden来使用

C：单行中文文本还必须要配合white-space: nowrap; 来使用

**D：无法实现多行文本溢出的处理**

*20、**下列关于像素的说法不正确是：*

**A：像素是一个绝对大小的长度单位**

B：像素分为物理像素和逻辑像素两种

C：CSS中使用的px是逻辑像素或设备独立像素

D：像素密度会影响图片的显示质量，因此需要准备2倍图甚至3倍图

*21、**下列关于弹性盒子理解正确的是：*

**A：用来控制元素的垂直水平的对齐方式**

**B：只能用于父子盒子之间**

C：浮动和定位的元素不受display:flex限制

**D：flex 用来设置元素的伸缩比例，只能用于子盒子**

*22、**下列关于line-height说法正确的是：*

**A：调整文本行与行之间的距离**

**B：line-height: 1.4 设置行间距为当前字号的1.4倍**

**C：line-height常用来设置单行文字的垂直居中**

D：line-height 属性不具有继承性

*23、**下列关于CSS特征描述正确的是：*

**A：层叠性是为同一元素多次设置样式时，相同的属性会产生覆盖，不同的样式则会合并**

**B：继承性是指为祖先设置的样式同时会被应用到子元素上**

**C：书写顺序会影响样式的执行结果**

**D：某些标签被浏览器赋予了默认的样式并且不同浏览器之间默认样式会有差异**

*24、**下列关于段落标签p的使用说法正确的是：*

**A：段落标签p中不能允许嵌套标题标签**

B：段落标签p中允许嵌套段落标签p

**C：p标签是一个块级元素，默认有垂直的外边距**

**D：用来表示网页正文件的一个段落**

*25、**下列关于路径说法正确的是：*

**A：路径分相对和绝对两种形式**

**B：相对路径以 . 或 .. 开头**

**C：绝对路径以盘符或/开头**

D：使用相对路径比绝对路径更好

*26、**下列关于移动设备异形屏（刘海屏）处理正确的是：*

**A：通过指定合适大小的外边距来适配异形屏**

**B：Safe Area 是用来适配异形屏的方案**

**C：浏览器中一般只需要处理底部适配即可**

**D：Safe Area需要配合env或者constant函数来使用**

*27、**下列关于移动适配处理说法正确的是：*

**A：必须要指定合适的<meta name="viewport" content="xxx">**

**B：宽度按比例设置大小高度固定大小是比较常见的适配方案**

**C：依据设计稿尺寸换算成rem或vw的长度单位也是常见的适配方案**

**D：rem和vw两种长度单位实现的适配本质上是一致的**

*28、**下列关于移动网页与PC网页区别说法正确的是：*

**A：PC端网页与移动端网页布局使用的CSS规则是通用的**

**B：移动端网页与PC端网页最大的区别在于屏幕的尺寸的差异**

**C：视口<meta name="viewport" content="xxx">在PC端没有意义**

**D：移动端默认视口宽度大于屏幕的宽度**

*29、**下列关于px/rem/vw/vh说法正确的是：*

**A：rem、vw/vh 单位在被渲染到页面后看到的实际大小都是px**

**B：rem的大小取决于html字号的大小**

**C：vw/vh的大小是将屏幕的宽度和高度等分成100份**

**D：rem、vw/vh 常用于处理移动端的屏幕适配**

*30、**下列关于透视说法正确的是：*

**A：透视能够使页面元素呈现立体的视觉效果（近大远小）**

B：透视能够产生真正的立体空间

**C：perspective用来指定透视的距离，值越小立体效果越明显**

D：透视距离必须设置给元素的父盒子

## 12. **前端学科全国讲导师摸底测试试卷-2022** 

*1、**下列关于.item:first-child(-n+3)选择器描述不正确的是：*

A：属于伪类选择器

B：基于目标元素在其父元素中的位置查找

**C：n的取值为大于等于0的整数**

D：该选择器选中后3个.item元素

*2、**下列关于字体说法不正确的是：*

A：font-family用来指定网页中文字的字体

B：不同的操作系统所支持的字体不一致

**C：font-amily: Arial 设置中文件字体为 Arial**

D：指定多个字体时的查找优先级为自左向右

*3、**下列关于字体图标说法不正确的是：*

A：字体图标是将失量图片打包成了字体

B：字体图标可以像文字一样改变颜色和字号

**C：字体图标只能是纯色或扁平的**

D：使用 font-family 来指定并引用字体文件

*4、**下列关于透明的说法不正确的是：*

A：opacity不能设置颜色的透明度

B：transparent设置颜色纯透明，可以理解成是特殊的颜色值

C：rgba和hsla均能设置颜色透明度

**D：16进制颜色值无法设置颜色的透明度**

*5、**下列关于过渡说法不正确的是：*

A：过渡能够在样式切换过程中产生动画效果

B：样式差异和时间差异是产生过渡效果的必要条件

C：不是所有CSS样式属性都可以应用过渡效果

**D：all 指定过渡属性是推荐用法**

*6、**下列关于定位说法不正确的是：*

A：绝对定位、固定定位不受文档流的约束

B： 相对定位以元素原来位置为参考

**C：元素默认的定位坐标为 left:0 和 top: 0**

D：粘性定位要求其父元素高度大于粘性定位的元素

*7、**下列关于CSS转换说法不正确的是：*

A：分2d平面转换和3d空间转换两种方式

**B：应用 translate 后元素会脱离文档流**

C：scale缩放元素时可以传入负数

D：translateZ(0) 可以启用硬件加速提升性能

*8、**下列关于表格相关标签说法不正确的是：*

**A：表格标签在应用中很少使用**

B：网页的内容只能使用td标签

C：表格可以嵌套使用

D：表格中tbody标签一通常情况都省略了

*9、**在iPhoneX中1vw等于多少?*

A：3.2px

B：3.6px

**C：3.75px**

D：4.14px

*10、**对于Flex容器的子元素无效的CSS属性是：*

A：line-height

B：margin

C：align-self

**D：vertical-align**

*11、**下列关于数据类型说法不正确的是：*

A：分为基本类型和对象两大类

**B：数组数据类型的一种**

C：不同数据类型之间能够进行转换

D：类型转换分为隐式和显示转换两种

*12、**下列关于对象的说法不正确的是：*

A：对象由属性和方法构成

B：数组也是对象类型

C：对象在赋值是采用的是引用传值

**D：对象属性或方法只能通过 . 语法符号进行访问或调用**

*13、**下列关于逻辑运算符说法不正确的是：*

A：包括 &&、||、! 3种运算符

B：!!可用于将数据转换为布尔类型

C：短路运算常常用来赋值操作

**D：&& 、||、! 的优先级相同**

*14、**下列关于语句和表达式说法不正确的是：*

A：凡是能产生值的代码均可被称为表达式

B：表达式一般都包含有运算符，如+、-、>、！==等

**C：表达式可以是语句，语句也可以是表达式**

D：18 是表达式

*15、**下列关于数据组的说法正确的是：*

**A：数组由单元值和索引值构成**

**B：伪数组是以数字为键且具有length属性的对象**

**C：数组是由不同数据类型构成的数据集合**

**D：push、pop、splice、unshift、shift 都是针对原数组进行操作**

*16、**下列关于伪数组说法不正确的是：*

A：伪数组是具有数组特征的对象

**B：伪数组在使用时和数组一致**

C：DOM节点列表和arguments是较为常见的伪数组

D：伪数组能够被转换为成“真数组”

*17、**下列关于立即执行函数说法不正确的是：*

A：立即执行函数在声明函数时立刻被调用

B：自执行函数本质上是一个函数表达式

C：立即执行函数常用来常被用来避免全局变量污染

**D：立即执行函数只能通过匿名函数创建**

*18、**下列关于事件流说法不正确的是：*

A：事件流描述了事件的执行过程

B：父节点向子节点传递的过程叫做捕获，子节点向父结点传递的过程叫做冒泡

C：事件既可以在捕获阶段触发，也可以在冒泡阶段触发

**D：默认情况下事件都是在捕获阶段触发的**

*19、**下列关于事件委托说法不正确的是：*

A：事件委托是结合事件冒泡监听事件的开发技巧

B：事件委托能够减少监听事件节点的数量，进而提升执行性能

C：事件委托能够为动态创建的节点监听事件

**D：事件委托只能将事件委托给其父节点**

*20、**下列关于正则的说法不正确的是：*

A：正则是用来对字符串进行查找、替换、校验的技术

B：[^0-9]表示除数字外的其它字符

**C：”.“可以匹配到任意字符**

D：特殊符号可以通过 ”\“ 转义成普通字符

*21、**下列关于箭头函数的说法不正确的是：*

A：箭头函数语法比较简洁

B：箭头函数中不会初始arguments和this

**C：DOM事件监听推荐采用箭头函数做为回调函数**

D：箭头函数不能做为构造函数

*22、**关于原型和原型链说法不正确的是：*

A：原型对象prototype是构造函数的一个属性

B：原型链能够反映对象继承之间的关系

C：构造函数的原型上的方法和属性可以共享

**D：类（class）没有原型对象**

*23、**下列关于同源的说法不正确的是：*

A： 是浏览器端的一种安全机制，防止数据的任意访问

B：同源是指协议、域名、端口全部相同，不同源即为跨域

**C：只有XMLHttpRequest受到同源策略的限制，即不允许跨域访问**

**D：file协议不受同源策略的限制**

*24、**下列关于Git描述不正确的是：*

A： Git是一个分布式的版本控制工具

B：即使离线也可以提交

**C：版本历史记录存储在服务器端存储库中**

D：可以创建分支

*25、**下列不属于nodejs内置模块的是：*

**A：file**

B：util

C：http

D：https

*26、**下列关于 Promise 说法错误的是：*

A： Promise用来包装异步的执行逻辑

B：resolve变更状态为fulfilled

C：reject变更状态为rejected

**D：将执行的异步逻辑变为同步方式执行**

*27、**关于请求报文说法不正确的是：*

A： 由请求行、请求头、请求主体3部分组件

B：请求头允许开发者自定义

**C：请求主体不允许为空**

D：Content-Type 请求头用来标识请求数据的编码规则

*28、**关于响应报文说法不正确的是：*

A： 由状态行、响应头、响应主体3部分组件

B：响应头Access-Control-Allow-Origin表明服务器开启了CORS跨站资源共享

**C：状态码500服务器端没有响应任何结果**

D：Content-Type 请求头用来标识响应数据的编码规则

*29、**关于状态说法不正确的是：*

A： 状态码是由服务器响应的3位数字编码，不同的编码代表不同的含义

B：编码被分成了5类，分别1、2、3、4、5开头

C：2开头的状态码表示成功、3开头表示重定义、4开头表示客户端错误或无访问权限，5开头表示服务器内部错误

**D：1000也是比较常的状态码**

*30、**Express框架中错误处理中间件的参数描述正确的是：*

A：req,res,next,err

B：res,req,next,err

C：err,res,req,next

**D：err,req,res,next**

*31、**在beforeRouteEnter钩子函数中进行console.log(this),其结果为*

A：VueCompent实例

**B：undefined**

C：报错

D：以上都不对

*32、**下面关于Vue中 mixin 和 mixins 区别说法错误的是*

A：mixin 用于全局混入，会影响到每个组件实例。

B：通过 mixins 混入组件，只会影响混入的组件实例

C：mixins 混入的钩子函数会先于组件内的钩子函数执行

**D：mixins 遇到同名选项的时候不会进行合并**

*33、**关于v-for循环数组不能实现的是*

A：<li v-for="item in list"></li>

B：<li v-for="item of list"></li>

**C：<li v-for="[1,2,3,4,5]"></li>**

D：<li v-for="(item, index) of 15"></li>

*34、**v-model可以用下面哪两个指令来组合实现*

A：v-if 和 v-on

B：v-show和v-bind

C：v-bind和v-if

**D：v-bind和v-on**

*35、**v-on指令绑定原生事件时，默认的第一个参数是什么*

A：dom元素

B：dom元素的索引下标

**C：事件参数对象**

D：无参数

*36、**关于Vue2.x中过滤器下面说法正确的是*

A：过滤器只能应用在模板的插值表达式中

**B：过滤器可以在v-bind的表达式中使用**

C：过滤器的第一个参数是当前Vue实例对象

D：过滤器函数中的this指向当前的实例对象

*37、**关于Vue-Router中的SPA的实现，下面说法错误的是*

A：Vue-Router可以通过hash模式，即锚形式保证地址的切换，可以不进行服务器请求

B：Vue-Router除了hash模式，还拥有一种history模式，地址中不再包含#符号

**C：只有Vue-Router才可以实现SPA模式，别的框架实现不了**

D：#后面的地址表示一个路径，可以指向一个组件

*38、**Vue-Router中的路由规则routes中说法错误的是*

A：path表示地址 component表示该地址对应的组件

B：当需要动态路由传参时 可以定义 path: '地址/:id'

C：当需要动态路由参数可有可无时 可以定义 path: '地址/:id?'

**D：routes中的name属性必须设置**

*39、**parent组件下有child子组件，关于两个组件生命周期执行正确的是*

A：parent的beforeCreate -> parent的created -> child的beforeCreate -> child的created

**B：parent的beforeCreate -> child的beforeCreate -> child的created -> parent的created**

C：child的beforeCreate -> child的created -> parent的beforeCreate -> parent的created

D：child的beforeCreate -> parent的beforeCreate -> child的created -> parent的created

*40、**假如你在做一个支付页面，开启了一个定时器去轮询查找当前的支付状态，但是你随时可能跳到其他页面，此时你应该在哪个钩子中去销毁该定时器*

A：beforeCreate

B：updated

C：destoryed

**D：beforeDestory**

*41、**Vue-Cli是创建Vue的脚手架，下面关于Vue-Cli说法正确的是*

A：Vue-Cli在代码打包过程中，被连同vue代码一同打包到我们的dist目录中

**B：Vue-Cli可以帮助我们开启一个本地的服务，帮助我们调试预览Vue项目**

C：Vue-Cli如果想要修改配置，需要在根目录下添加一个webpack.config.js文件

D：Vue-Cli的配置文件中，引入依赖包可以使用 import from这种es6的导入方式

*42、**下面不属于具名插槽用法的是*

A：<child> <br>  <template slot="before">123</template> <br></child>

B：<child> <br>  <template v-slot:before>123</template> <br></child>

C：<child> <br>  <template #before>123</template> <br></child>

**D：**<child> <br>  <template slot-scope="before">123</template> <br></child>

*43、**关于默认插槽下，作用域插槽获取row属性下面用法错误的是*

A：<child> <template slot-scope="obj">{{ obj.row } } </template></child>

**B：<child> <template slot="obj">{{ obj.row } } </template></child>**

C：<child> <template v-slot:default="obj">{{ obj.row } } </template></child>

D：<child> <template v-slot="obj">{{ obj.row } } </template></child>

*44、**下面哪个代码能让所有的Vue组件可以通过this.$message调用方法*

A：Vue.$message = Message

**B：Vue.mixin({ methods: { $message() { }  }  })**

C：Vue.extend.$message = Message

D：Vue.methods = {  $message() { } }

*45、**下面关于Vue2.x中sync修饰说法正确的是*

**A：sync修饰符要求子组件的触发事件名必须是 update:props属性名才可以完成自动更新父组件的数据**

B：<child  :show-dialog.sync="showDialog" /> 中的showDialog变量来自当前组件也可以是来自父级组件传过来的props状态

C：sync修饰符不会让子组件和父组件的传值更简单和有效率

D：sync修饰符修饰的props属性修改时 还需要开发者监听 update:属性的自定义事件

*46、**git初始化并且提交到本地仓库并推到远程仓库的代码正确的是*

A：git init <br>git add . <br>git commit -m "提交到本地仓库"

B：git init <br>git add . <br>git commit -m "提交到本地仓库" <br>git push

C：git init <br>git add . <br>git commit -m "提交到本地仓库" <br>git remote add origin “地址” <br>git push

**D：**git init <br>git add . <br>git commit -m "提交到本地仓库" <br>git remote add origin “地址” <br>git push origin master

*47、**Vue-Cli 3.0 创建项目的命令是*

**A：vue create project**

B：vue init project

C：vue project

D：npm init project

*48、**在Vue项目中@符号表示的是什么意思*

A：转义符

**B：指向根目录的src目录的路径变量**

C：邮箱前缀

D：协议标识

*49、**如果想在axios中进行token的统一注入，下面的代码正确的是*

A：axios.interceptors.request.use(config => { <br>   config['token'] = token <br> })

**B：**axios.interceptors.request.use(config => { <br>   config['token'] = token <br>  return config <br> })

C：axios.interceptors.response.use(config => { <br>   config['token'] = token <br>  return config <br> })

D：axios.interceptors.response.use(config => { <br>   config['token'] = token <br>   retutn config <br> })

*50、**在axios的响应拦截中，如果想处理异常，并且该错误依然想被promise执行链的catch捕获，代码正确的是*

A：axios.interceptors.response.use(error=> { <br>   return Promise.reject(error) <br> })

B：axios.interceptors.response.use(error=> { <br>   return false <br> })

**C：**axios.interceptors.response.use(() => {},error=> { <br>   return Promise.reject(error) <br> })

D：axios.interceptors.response.use(（）=>{}，error=> { <br>   return false <br> })

*51、**按需引入路由组件的语法正确是*

A：import Login from '@/views/login' <br>{ <br>  path: '', <br>  component: Login <br>}

B：{ <br>  path: '', <br>  component: import('@/views/login') <br>}

C：import Login from '@/views/login' <br> <br>{ <br>  path: '', <br>  component: () => Login <br>}

**D：**{ <br>  path: '', <br>  component: () => import('@/views/login') <br>}

*52、**路由的导航守卫中需要判断当前有没有token, 来判断是否跳到主页，否则回到登录，下面代码正确的是*

A：router.afterEach(() => { <br>   if(token) { <br>     return '主页地址' <br>   } <br>   return '登录地址' <br>})

**B：**router.beforeEach((to, from, next) => { <br>   if(token) { <br>    next() <br>   } <br>   next('登录地址') <br>})

C：router.beforeEach(() => { <br>   if(token) { <br>     return '主页地址' <br>   } <br>   return '登录地址' <br>})

D：router.beforeEach(() => { <br>   if(token) { <br>     next() <br>   } <br>   <br>})

*53、**下列axios请求中，哪种可以传递formData类型的参数给到后台*

A：this.$axios({ <br>   data: { name: "张三" } <br> })

B：this.$axios({ <br>   params: { name: "张三" } <br> })

C：this.$axios({ <br>   data: '{ name: "张三" }' <br> })

**D：**const data = new FormData() <br>data.append('name', "张三") <br>this.$axios({ <br>   data <br> })

*54、**Vue3.x的计算属性computed的正确用法是*

A：computed(数据)

**B：computed(() => 返回数据)**

C：() => computed（）

D：computed: {数据}

*55、**在Vue3.x中的setup语法糖中，使用哪个方法向外暴露该组件可使用的函数和数据*

**A： defineExpose**

B：defineProps

C：defineEmits

D：toRefs

*56、**在Vue3.x中关于v-model的变化说法错误的是*

A：v-model可以实现数据的双向绑定

**B：v-model作用在普通h5标签和自定义组件上都是传递的value这个prop属性**

C：Vue3.x中组件上可以写多个的v-model指令

D：v-model:属性名 替换了原来Vue2.x中.sync修饰符的功能

*57、**在Vue3.x中关于toRefs这个属性，说法错误的是*

A：reactive声明的响应式数据解构会失去响应式，使用toRefs可以保持解构后的数据保持响应式

B：toRef和toRefs一个是保持某个属性的响应式，一个是保持整个对象的响应式

**C：ref声明的数据也可以解构，并且使用toRefs保持响应式**

D：toRefs转化后的数据在代码中同样需要.value来获取真实的数据

*58、**在Vue3.x关于setup下面说法错误的是*

A：setup的选项执行时机是在beforeCreate之前

B：在setup中不可以使用this来获取选项式data中的数据

C：在setup选项式写法中，想要显示在模板中的数据或者函数必须要通过return {} 来包裹返回

**D：setup函数必须实现否则会报错**

*59、**关于Vue2.x到Vue3.x的变化说法错误的是*

A：Vue3.x不再要求template中有且只有一个根节点

B：Vue3.x中的语法特性可以和Vue2.x的选项式语法特性共存

C：Vue3.x中选项式的生命周期和Vue2.x中的保持一致，组合式API的生命周期同样可以使用

**D：Vue2.x的代码完全可以在Vue3.x中应用**

*60、**关于keep-alive组件，下面说法正确的是*

**A：keep-alive内的组件只有一次生命周期，因为放在keep-alive中的组件不会自动销毁**

B：当组件在 <keep-alive> 内被切换，它的 created和 destoryed这两个生命周期钩子函数将会被对应执行。

C：keep-alive应该包裹所有的组件，把所有的组件缓存起来，这样效率更高

D：keep-alive组件会生成实质的dom标签

*61、**下列关于小程序请求API说法不正确的是：*

A：调用 wx.request 发起 HTTP请求

B：接口服务器要求支持 HTTPS 协议并添加到管理后台的白名单中

C：小程序能够支持 socket 协议的请求

**D：小程序通过 CORS 避免跨域访问的限制**

*62、**下列关于微信支付说法不正确的是：*

A：小程序只能支持微信支付

B：需要开通微信支付获取商户号

**C：后端可以不介入微信支付的对接开发**

D：调用 wx.requestPayment 发起支付请求打开支付窗口

*63、**下列关于小程序分包加载说法不正确的是：*

A：小程序主包体积不能超过 2M

B：通过subpackages配置项声明分包加载

**C：分包之间能够彼此共享逻辑和资源**

D：每个分包体积不能超过 2M

*64、**下列关于小程序发布的说法不正确的是：*

A：小程序上传时要必须指定版本号

B：小程序代码上传后生成体验版本常用于内部测试

C：通过miniprogram-ci可替代微信开发者工具的上传按钮

**D：小程序正式发布后将无法回退**

*65、**下列关于小程序调试说法不正确的是：*

A：有开发调用和真机调试两种形式

B：在真机上打开调试后能够看到日志面板

**C：调试时小程序体积大小不受限制**

D：真机调试时能够更准确的追踪调试信息

*66、**下列关于uni-app全局文件说法不正确的是：*

A：pages.json文件可配置页面路由

B：manifest.json文件是应用的配置文件

C：main.js是uni-app的入口文件

**D：app.json为全局配置**

*67、**下列关于uni-app的easycom组件规范不正确的是：*

A：传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件，easycom将其精简为一步

**B：easycom打包时不会自动剔除没有使用的组件**

C：easycom是自动开启的，不需要手动开启

D：组件符合components/组件名称/组件名称.vue 目录结构，就可以直接在页面中使用

*68、**下列关于uni-app的js API说法不正确的是：*

A：由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成

B：uni-app 基于 ECMAScript 扩展了 uni 对象，并且 API 命名与小程序保持兼容

**C：uni-app 对所有 uni 开头的 API 都进行了 Promise 封装**

D：非web端，不支持 window、document、navigator 等浏览器的 js API

*69、**下列关于uni-app的编译器说法不正确的是：*

**A：编译器无需区分vue2版和vue3版**

B：在web平台，将.vue文件编译为js代码

C：在微信小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码

D：编译器支持条件编译，即可以指定某部分代码只编译到特定的终端平台

*70、**下列关于uni-app的工程目录结构说法不正确的是：*

A：components 存放符合vue组件规范的uni-app组件目录

B：wxcomponents 存放微信小程序组件的目录

C：static 存放应用引用的本地静态资源（如图片、视频等）的目录，静态资源只能存放于此

**D：unpackage 存放App端原生资源目录**

*71、**下列关于uni-app的生命周期说法不正确的是：*

A：uni-app 生命周期可分为应用生命周期，页面生命周期，组件生命周期三部分

**B：uni-app 应用生命周期可在App.vue和页面中监听**

C：uni-app 页面生命周期支持onLoad、onShow、onHide、onUnload等

D：uni-app 组件支持的生命周期与vue标准组件的生命周期相同

*72、**下列关于uni-app的页面说法不正确的是：*

**A：uni-app 的路由用法与 Vue Router 相同**

B：未在pages.json -> pages 中配置的页面，uni-app会在编译阶段进行忽略

C：删除页面时，通常需做两件工作: 删除页面.vue文件和删除pages.json -> pages列表项中的配置

D：uni-app会将pages.json -> pages配置项中的第一个页面作为当前工程的启动页

*73、**下列关于uni-app和HbuilderX说法不正确的是：*

A：uni-app 项目可通过 HbuilderX 可视化界面方式创建

B：uni-app 项目可通过命令行方式创建

**C：uni-app 项目只能使用 HbuilderX 开发**

D：通过 HBuilderX 创建的项目，一样可以使用 npm

*74、**下列关于uni-app条件编译说法不正确的是：*

A：条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台

B：条件编译写法以 #ifdef 或 #ifndef 加平台名称开头，以 #endif 结尾

**C：#ifdef H5 && MP-WEIXIN 表示在 H5 平台和微信小程序平台存在的代码**

D：#ifdef MP-WEIXIN 表示仅出现在微信小程序平台下的代码

*75、**下列关于Vue3版本的uni-app的说法不正确的是：*

**A：支持 commonJS 模块规范**

B：支持Vuex

C：支持Pinia

D：支持通过 props 来获取页面参数的使用方式

*76、**关于React Hooks useState的说法错误的是*

A：useState调用返回一个数组，数组中第一个参数是设置的状态

B：useState的初始值只会在第一次渲染时生效

C：useState返回的设置函数可以使用使用setState((上一次状态) => 状态)设置数据更新

**D：useState中返回的状态是上一次的状态，不是最新的**

*77、**关于React Hooks useRef的说法错误的是*

A：useRef可以获取dom对象

B：useRef获取的dom对象存在 对象.current中

C：useRef除了获取对象之外还可以存储一些数据

**D：useRef调用必须给定初始值**

*78、**下面关于React Props传值错误的是*

**A：props只可以传递数据不可以传递jsx结构**

B：函数组件中第一个参数即传递过来的props数据

C：props.children获取的是组件标签之间传递的内容

D：props的数据可以设置默认值

*79、**关于React中useContext组件说法错误的是*

A：useContext可以获取provider中提供的数据

B： 使用consumer也可以获取provider中提供的数据

C： useContext必须传入创建的上下文对象

**D： useContext获取的数据只可以使用一次**

*80、**使用JSX进行列表渲染，下面说法正确的是*

**A：如果需要渲染一组数据，我们应该使用数组的 map () 方法**

B：渲染列表的时候如果不添加key属性，列表内容无法渲染

C：如果需要渲染一组数据，也可以使用数组的 forEach () 方法

D：渲染列表的key属性可以是常量

*81、**React的函数组件不可以使用下面哪个语法*

A：useState

B：useEffect

**C：this**

D：useMemo

*82、**下面关于React Hook的说法错误的是*

A：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

B：Hook可以在React的函数组件中使用状态进行动态的处理

C： Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。

**D：在函数组件中依然可以用 this.state获取hook维护的数据**

*83、**下列关于onload说法不正确是：*

A：加载外部资源时会触发该事件

**B：只能通过 window 进行监听**

C：DOMContentLoaded在 DOM 树生成时即被执行，onload 是在资源加载完毕后执行

D：onload事件只会触发1次

*84、**关于Vue.js的计算属性说法错误的是*

A：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例

B：计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算

C：计算属性在模板中被使用时，只写计算属性名，不需要使用方法调用形式

**D：计算属性只可以进行获取，不可以进行设置值**

*85、**关于Vue组件，下面说法错误的是*

A：Vue组件对象派生自Vue对象，所以Vue对象的配置，组件对象基本都有

B：Vue组件对象中的data是一个带返回值的函数，返回值是一个对象

C：组件中template模板在Vue2.0+版本中要求有且只有一个根节点

**D：单文件组件.vue文件中的style标签和script标签必须编写，否则组件渲染不出来**

*86、**关于React的Props的描述，下面说法错误的是*

A：Props是只读属性， 不可在当前组件下进行修改

B：Props值可以使任意值（文本、react元素、组件、甚至是函数）

**C：获取函数组件中的props属性，可以直接用过this.属性来获取**

D：Props数据是由父组件传递到子组件的属性，这有助于维护单项数据流

*87、**关于虚拟Dom和diff算法，说法错误的是*

A：虚拟DOM：本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容

B：Diff算法：比对算法，找到前后更新数据不同的元素

C：初次渲染时，React会根据初始化的state（Model），创建一个虚拟DOM对象（树） <br>  - 根据虚拟DOM生成真正的DOM，渲染到页面 <br>  - 当数据变化后(setState())，会重新根据新的数据，创建新的虚拟DOM对象（树） <br>  - 与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容 <br>  - 最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面

**D：虚拟dom的方式将更新的过程效率降低了，是一种低效的方式**

*88、**下面关于React路由说法错误的是*

A：使用Router 组件包裹整个应用

B：使用Link组件作为导航菜单（路由入口）

**C：Router中只有一种地址模式，即#(hash模式)**

D：使用Route组件配置路由规则和要展示的组件（路由出口）

*89、**下面关于React中的路由编程式导航，说法错误的的是*

A：history是React路由提供的，用于获取浏览器历史记录的相关信息

B：push(path)：跳转到某个页面，参数path表示要跳转的路径

C：go(n)：前进或后退功能，参数n表示前进或后退页面数量

**D：可以直接通过this.history获取对应的历史对象**

*90、**下列关于弹性盒子理解正确的是：*

**A：用来控制元素的垂直水平的对齐方式**

**B：只能用于父子盒子之间**

C：浮动和定位的元素不受display:flex限制

**D：flex 用来设置元素的伸缩比例，只能用于子盒子**

*91、**下列关于line-height说法正确的是：*

**A：调整文本行与行之间的距离**

**B：line-height: 1.4 设置行间距为当前字号的1.4倍**

**C：line-height常用来设置单行文字的垂直居中**

D：line-height 属性不具有继承性

*92、**下列关于CSS特征描述正确的是：*

**A：层叠性是为同一元素多次设置样式时，相同的属性会产生覆盖，不同的样式则会合并**

**B：继承性是指为祖先设置的样式同时会被应用到子元素上**

**C：书写顺序会影响样式的执行结果**

**D：某些标签被浏览器赋予了默认的样式并且不同浏览器之间默认样式会有差异**

*93、**下列关于段落标签p的使用说法正确的是：*

**A：段落标签p中不能允许嵌套标题标签**

B：段落标签p中允许嵌套段落标签p

**C：p标签是一个块级元素，默认有垂直的外边距**

**D：用来表示网页正文件的一个段落**

*94、**下列关于路径说法正确的是：*

**A：路径分相对和绝对两种形式**

**B：相对路径以 . 或 .. 开头**

**C：绝对路径以盘符或/开头**

D：使用相对路径比绝对路径更好

*95、**下列关于闭函数的说法不正确的是：*

**A：闭包本身也是一个普通的函数**

**B：闭包函数可以访问外部函数的作用域**

**C：闭包引用的变量可能因为不能即时释放从而导致内存泄漏**

**D：返回函数是比较常见应用闭包的方式**

*96、**下列关于作用域说法正确的是：*

**A：由全局作用域、函数作用域、块作用域构成**

**B：采用的是词法作用域，函数作用域在声明的时候就确定了**

**C：作用域链是在多个作用域嵌套时产生数据链表，子级作用域能访问父级作用域的变量**

**D：代码块（{}）中配合 let 或 const 可以创建块级作用域**

*97、**下列关于递归函数说法正确的是：*

**A：递归函数就是自身调用自身**

**B：递归函数必须要有终止递归调用的条件，否则会出现栈溢出的情形**

**C：要获取递归函数的返回值时需要将递归函数的调用结果做为返回值**

**D：递归函数一般用来处理具体相同或类似的逻辑**

*98、**下列关于 this 的说法正确的是：*

**A：this是函数中一个特殊的变量**

**B：this的值会受到调用方式的影响**

**C：this的值可能为undefined或对象**

**D：构造函数中的 this 的值是一个普通的对象**

*99、**下列关于节流和防抖说明正确的是：*

**A：节流和防抖都是用来优化Javascript性能的方法**

**B：节流是为了降低逻辑执行的的频次，在指定时间里只会执行1次**

**C：防抖是将一定时间内重复的执行逻辑合并为一次执行**

**D：节流和防抖可以通过封装定时器来实现**

*100、**下列关于事件循环说法正确的是：*

**A：事件循环主要是针对异步代码的执行规则**

B：setTimeout(fn, 1000) 一定会在1秒后执行

**C：setTimeout 和 DOM的事件回调会放入事件队列当中**

**D：微任务事件队列优先宏任务事件队列执行**

*101、**下列关于定时器说法正确的是：*

**A：分setTimeout和setInterval两种形式**

**B：setTimeout主要用于延时执行，只会执行1次**

**C：setInterval间隔指定的时间重复执行**

**D：setInterval首次执行也会延时**

*102、**下列选项中属于xhr对象的事件是：*

**A：error**

**B：loadstart**

**C：progress**

**D：abort**

*103、**下列关于Ajax介绍正确的是：*

**A： 是Javascript中用于向服务器通信的技术**

B：只能以异步的方式进行通信

C：Ajax中必须使用 XML 与服务端进行数据交换

**D：通过XMLHttpRequest创建 ajax 实例**

*104、**下列属于解决跨域问题的方案是：*

**A：jsonp**

**B：服务器cors**

**C：服务器代理**

D：axios

*105、**使用Git的时候clone操作可以：*

**A：克隆远程仓库**

**B：同步所有远程分支到本地**

**C：指定分支克隆到本地**

**D：创建本地仓库**

*106、**下列属于请求方式的是：*

**A：get**

**B：post**

**C：delete**

**D：put**

**E：patch**

*107、**下列关于 axios 说法正确的是：*

**A： axios 中封装了 XMLHttpRequest，返回值是 Promise对象**

**B：axios请求一旦发出后，无法中止**

C：传参只能通过data配置选项指定

**D：拦截器函数可以对请求和响应数据进行处理**

*108、**关于HTTP协议说法不正确的是：*

**A： HTTP协议是客户端和服务器进行通信时的约束规则**

**B：HTTP协议有请求报文和响应报文两部分组成**

**C：请求报文件由客户端（浏览器）实现**

**D：响应报文件由服务器来实现**

*109、**下面关于Vuejs插值表达式语法可以实现的是*

**A：<template>{{ a > 1 ? '成功' : '失败' }}</template>**

**B：<template>{{ [1,2,3].map(item => item + 1) }}</template>**

**C：<template>{{ a > 1  || '失败' }}</template>**

**D：<template>{{ a > 1 }}</template>**

*110、**v-if和v-show的描述正确是*

**A：v-if和v-show都可以实现元素的显示隐藏控制**

**B：v-if和v-show后面表达式的值如果为true 则元素会显示**

C：v-if采用了css样式的方式来控制元素的显示隐藏

**D：v-show不论后面的布尔值是否为true,都会渲染元素**

*111、**关于v-bind的用法下面正确的是*

**A：**<img v-bind:src="imageSrc">

**B：**<button v-bind:[key]="value"></button>

**C：**<img :src="imageSrc">

**D：**<img :src="'/path/to/images/' + fileName">

*112、**关于class的绑定特性，下面哪个选项可以让div拥有select这个class类*

**A：<div :class="{ select: 1 }"></div>**

B：<div :class="{ select: 0 }"></div>

**C：<div :class="['select']"></div>**

**D：<div class="select"></div>**

*113、**下面关于v-model的正确用法的是*

A：<div v-model="name"></div>

**B：<input v-model="name" />**

**C：<input v-model="formData.name" />**

D：<p v-model="formData.name"></p>

*114、**关于Vue2.x中ref下面说法正确的是*

**A：ref可以获取一个原生元素的dom对象**

B：如果给两个div手动赋值了同样的ref属性，this.$refs.属性获取到的是一个数组

**C：如果在v-for中使用ref, 赋值同样的ref属性， this.$refs.属性获取到的是一个数组**

**D：如果给组件赋值了ref，那么可以通过ref获取组件的实例，并且调用子组件的方法**

*115、**关于自定义指令directive,下面说法正确的是*

A：定义自定义指令名称时，依然要用v-开头，如 Vue.directive('v-demo')

**B：自定义指令的生命周期钩子inserted的第一个参数为当前指令作用的dom对象**

C：inserted钩子会执行很多次

**D：inserted钩子的第二个参数中包含指令表达式的信息，包括值，表达式名称等**

*116、**下面关于watch侦听器正确的是*

**A：watch可以监听data中的数据变化**

**B：watch可以监听props中的数据变化**

**C：watch可以监听计算属性中的数据变化**

D：用watch: { obj: function () {} } 这种形式，就可以监听 obj这个对象里面所有层级数据的变化

*117、**下面关于组件传值，说法正确的是*

**A：父组件给子组件传值，可以使用props进行传递**

**B：子组件给父组件传值可以使用自定义事件进行传递**

**C：使用ref同样可以将父组件的值传递给子组件**

**D：兄弟组件传值可以使用eventBus进行广播**

*118、**关于props传值，下面正确的是*

**A：props可以是一个字符串数组，props: ['name']**

**B：props可以是一个对象，props:  {  name: { type: String } }**

C：props可以不定义接收对象，依然可以通过this.属性获取props值

D：props的传递属性名必须和变量名一样 如  <child :name="name">

*119、**关于$emit下面正确的是*

**A：$emit的第一个参数为自定义的事件名**

B：在本组件用this.$emit触发事件，使用this.$on可以在其他组件监听到该事件

C：$emit触发的事件名必须为 update:属性名格式

**D：$emit的第二个参数开始均为可以传递的参数**

*120、**下面关于Vue2.x中生命周期的说法正确的是*

**A：beforeCreate和created表示Vue实例初始化前后执行的钩子函数**

**B：执行created钩子函数时，挂载阶段还没开始，且 $el 属性尚不可用**

**C：beforeMount在挂载开始之前被调用**

**D：mounted实例被挂载后调用**

*121、**关于Promise下面说法正确的是*

**A：如果一个promise对象想要成功执行，需要执行reslove回调**

**B：如果一个promise对象想要失败处理，需要执行reject回调**

C：在promise执行链中 return false和 return Promise.reject(new Error()) 效果是一样的

D：await new Promise() 下面的代码会立刻执行

*122、**下面属于属于匿名插槽的是*

**A：<child> <template >123</template> </child>**

**B：<child> <template slot="default">123</template> </child>**

C：<child> <template slot="name">123</template> </child>

**D：<child> <template v-slot:default>123</template> </child>**

*123、**Vue3.x中使用reactive和ref声明响应式数据说法正确的是*

A：reactive和ref都可以声明简单类型的数据

**B：reactive声明的数据不用.value来获取**

**C：ref声明的数组和对象都具备响应式特性**

**D：ref声明的数据在template模板中不用使用.value,因为数据已解包**

*124、**Vue3.x 中关于watch函数下面用法正确的是*

**A：watch(数据, () => {})**

**B：watch([数据1，数据2],() => {})**

**C：watch(() =>数据，（） => {})**

**D：watch(数据, () => {}, { deep: true, immediate: true })**

*125、**在Vue3.x关于setup中第二个参数包含了下面哪些对象*

**A：emit**

**B：expose**

**C： attrs**

**D： slots**

*126、**Vuex3.x中去除了哪些功能*

**A：filter过滤器**

**B：.sync修饰符**

C：keep-alive组件

D：component组件

*127、**关于ReactHooks useEffect的说法正确的是*

**A：useEffect(() => {}) 每次数据更新都会调用**

**B：useEffect(() => {}, []) 只会执行一次**

**C：useEffect(() => {}, [数据])会在渲染完成和数据依赖项发生变化时执行**

D：useEffect函数只能使用一次

*128、**React中关于Redux的说法正确的是*

**A： Redux可以集中管理数据状态**

**B：Redux中的reducers是纯函数**

**C：Redux中thunk-action中间件可以实现异步请求**

D：react必须使用redux才能集中管理状态

*129、**下面关于React路由执行过程说法正确的是*

**A：React路由监听地址栏url的变化**

**B：React路由内部遍历所有的Route组件，拿着Route里面path规则与pathname进行匹配**

**C：当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容**

**D：只要url的地址栏发生了变化，就会遍历所有的Route里面的规则**

*130、**JSX中使用JavaScript表达式的注意点是*

**A：在{}中不能出现语句**

**B：只要是合法的js表达式都可以进行嵌入**

**C：JSX自身也是js表达式**

D：JSX中可以写分号断句

*131、**封装滑块组件：最小是0分最大是100分，①实现可以默认设置组件显示滑块位置 ②实现仅仅点击的时候切换滑块位置 ③ 要求组件支持v-model指令。*

![img](README.assets/4484e052e5f64d729eb0767fd7cd0d16.png)

## 13. **JavaScript基础**

*1、**下列关于数据类型说法不正确的是：*

A：分为简单类型和引用数类型两大类

**B：数组和对象都是一种数据类型**

C：不同数据类型之间能够进行转换

D：类型转换分为隐式和显示转换两种

*2、**下列关于函数的说法不正确的是：*

**A：函数命名推荐采用小驼峰命名法且不区分大小写**

B：定义函数的参数叫做形参，调用函数时的参数叫做实参

C：函数默认的返回值为undefined

D：函数传参可以理解为对形参进行赋值的操作

*3、**下列关于对象的说法不正确的是：*

A：对象是一种数据集合

B：对象由属性和方法构成

C：Math是JavaScript内置的对象

**D：对象属性或方法只能通过 . 语法符号进行访问或调用**

*4、**下列关于逻辑运算符说法不正确的是：*

A：包括 &&、||、! 3种运算符

B：!可用于数据类型隐式转换

C：短路运算常常用来赋值操作或者条件判断

**D：短路运算可以用于语句**

*5、**下列关于条件控制说法不正确的是：*

A：包括if、switch、三元表达式3种形式

**B：三种形式均支持多分支**

C：switch语句分支条件使用 === 进行比较

D：三元表达式可以理解为 if/else的简写形式

*6、**下列关于语句和表达式说法不正确的是：*

A：凡是能产生值的代码均可被称为表达式

B：语句常表现为程序具体的执行行为，如赋值、逻辑控制等

**C：表达式可以是语句，语句也可以是表达式**

D：function sayHi() {} 是语句，sayHi() 是表达式

*7、**下列关于循环控制说法不正确的是：*

A：使程序重复执行，包括while、for、do/while 3种形式

B：初始值、变化量、终止值是循环控制的3个要素

C：没有变化量或者终止值时可能导致死循环

**D：循环控制无法主动终止循环的执行**

*8、**下列关于数据组的说法不正确的是：*

**A：数组是一种数据类型**

B：由单元值的索引值构成

C：length属性用于获取数组单元的个数

D：push、pop、splice、unshift、shift 都是针对原数组进行操作

## 14. **ajax阶段**

*1、**浏览器ajax的核心对象是：*

A：JSON

B：xhr

**C：XMLHttpRequest**

D：XMLhttprequest

*2、**xhr对象open函数前三个参数作用分别是：*

A：地址，请求方式，是否异步

B：请求方式，是否异步，地址

**C：请求方式，地址，是否异步**

D：是否异步，地址，请求方式

*3、**下列选项中可以终止请求的xhr函数是：*

A：end

B：loaded

C：close

**D：abort**

*4、**ajax请求readyState状态值等于3的时候代表：*

A：完成

**B：交互中**

C：已应答

D：未初始化

*5、**下列不属于解决跨域问题的方案是：*

A：jsonp

B：服务器cors

C：服务器代理

**D：axios**

*6、**下列关于git描述不正确的是：*

A： Git是一个分布式的版本控制工具

B：即使离线也可以提交

**C：版本历史记录只存储在服务器端**

D：可以创建分支

*7、**下列选项中属于xhr对象的事件是：*

**A：error**

**B：load**

**C：progress**

*8、**当前域名是http://web.itcast.cn属于跨域的是：*

**A：http://www.itcast.cn**

**B：https://web.itcast.cn**

C：http://web.itcast.cn:80

**D：http://web.itcast.cn:8080**

*9、**下列对axios描述正确的是：*

**A：可以在浏览器使用发送xhr请求**

**B：可以在服务端使用发请求**

**C：是一个js库**

D：可以跨域

*10、**使用git的时候clone操作可以：*

**A：克隆远程仓库**

B：隆所有远程分支到本地

**C：指定分支克隆到本地**

**D：创建本地仓库**

## 15. **JavaScript高级**

*1、**下列关于作用域说法不正确的是：*

A：由全局作用域、函数作用域、块作用域构成

B：函数作用域和块作用域也叫局部作用域，其内部声明的变量只能局部访问

C：作用域的嵌套形成了作用域链，下游的作用域能够访问上游作用域中的变量

**D：只有使用 let 关键字时才能形成块级作用域**

*2、**下列关于闭包的说法不正确的是：*

A：闭包函数能够保存父级作用域的变量

B：闭包函数有可能导致内存的泄漏

**C：自执行函数与闭包无关**

D：闭包函数仍是一个普通函数

*3、**下列关于箭头函数的说法不正确的是：*

A：箭头函数语法比较简洁

B：箭头函数无法动态获取参数也没有独立的 this

**C：事件监听推荐采用箭头函数做为回调函数**

D：箭头函数不能做为构造函数

*4、**下列关于面向对象概念的说法不正确的是：*

A：封装、继承、多态是面向对象的3大特征，JavaScript较少涉及多态

B：构造函数是用来创建动象的方式之一

C：由构造函数结合 new 创建的对象称为实例

**D：JavaScript中无法定义静态成员**

*5、**下列关于一切皆对象理解不正确的是：*

A：JavaScript中分为包装类型和引用类型对象

**B：所有的数据类型都对应了一个构造函数**

C：字符串、数值、布尔都可以被当成对象来使用

D：instanceof 用于检测变量对象的构造函数

*6、**关于引用类型对象的说法不正确的是：*

A：栈内存中存储的是堆内存的地址

B：赋值操作时不会开辟新的堆内存空间

**C：数组不属于引用类型**

D：let module = {}; module.exports = {}; exports = module.exports 代码中 exports 与 module.exports 指向同一堆内存空间

*7、**关于原型和原型链说法不正确的是：*

A：原型是构造函数的一个特定的属性

B：原型是JavaScript中实现继承的常见做法

**C：构造函数的原型可以随意更改**

D：原型链是基于原型继承所形成的父子构造函原型的关系

*8、**下列关于 this 的说法不正确的是：*

A：普通函数的 this 遵循谁调 this 指向谁的规则

B：回调函数的 this 默认指向 window

**C：全局调用函数是 this 始终指向 window**

D：箭头函数中不会产生独立的 this

## 16. **React** 

*1、**为什么建议传递给 setState 的参数是一个 callback 而不是一个对象*

A：使用对象写起来代码太繁琐

B：因为callback回调函数代码看起来更简洁

**C：因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。**

D：对象形式不能实现更新state数据的工作

*2、**React使用哪种方式创建元素*

**A：React 起源于 Facebook 的内部项目**

**B：React不仅仅用来开发web端，还能开发移动端应用**

**C：React和Vuejs一样，都是前端MVVM框架**

D：React中写的不再是js文件

*3、**React使用哪种方式创建元素*

**A： React.createElement(元素名称, 元素属性, 子节点);**

**B： React.createClass(元素名称, 元素属性, 子节点);**

**C： React.cloneElement(元素对象, 元素属性, 子节点);**

D： ReactDOM.render(需要渲染的元素对象, 挂载对象)

*4、**下面关于JSX的说法正确的是*

**A：JavaScript XML 表示在JavaScript代码中写HTML格式的代码**

**B：推荐使用JSX的方式来创建React元素**

**C：写JSX跟写HTML的语法是类似的**

**D：JSX语法更能体现声明式特点**

*5、**React中的特殊属性包括*

**A：class -> className**

**B：React元素的属性名使用驼峰命名法**

**C：如果没有子节点的React元素可以用 /> 来结束**

**D：使用 小括号包裹JSX，从而避免JS中自动插入分号报错**

*6、**下面关于React中props特点正确的是*

**A：可以给组件传递任意类型的数据**

**B：props是只读属性，不能对值进行修改**

**C：使用类组件时，如果写了构造函数，应该将props传递给super()，无法在构造函数中获取到props，其他的地方是可以拿到的**

D：React中获取props，可以直接this.属性名

*7、**关于React中的状态提升context说法正确的是*

**A：如果两个组件相隔层级比较多，可以使用Context实现组件通讯**

**B：Context提供了两个组件：Provider 和 Consumer**

**C：Provider组件： 用来提供数据**

**D：Consumer组件： 用来消费数据**

*8、**关于React的Props中的children属性，下面说法正确的是*

**A：children属性表示组件标签的子节点，当组件标签有子节点时，props就会有该属性**

B：children属性中只能有惟一得一个节点

**C：children属性与普通的props一样，值可以使任意值（文本、react元素、组件、甚至是函数）**

D：可以通过 this.children获取props中的children属性

*9、**React组件的生命周期函数说法正确的是*

**A：constructor 当组件被创建的时候调用**

**B：render     每次渲染的时候调用**

**C：componentDidMount 当组件挂载也就是DOM渲染完毕后调用**

D：componentWillMount 会在render函数之后被执行

*10、**关于React组件更新时的生命周期说法正确的是*

**A：setState执行组件就会重新渲染**

**B：forceUpdate执行组件就会重新渲染**

C：render函数在componentDidUpdate执行完成之后执行

**D：组件接收到新的props组件就会重新渲染**

*11、**关于React中HOC组件说法正确的是*

**A：高阶组件就相当于手机壳，通过包装组件，增强组件功能**

**B：高阶组件(HOC、Higher-Order Component) 是一个函数，接收要包装的组件，返回增强后的组件**

**C：高阶组件内部创建了一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent**

D：HOC组件和包裹的组件其实完全就是一个组件

*12、**下面关于setState说法正确的是*

A：setState是同步更新数据

**B：setState是异步更新数据**

**C：多次调用setState，只会触发一次render**

**D：想要获取最新的state,可以通过setState的第二个回调函数进行获取**

*13、**React中如何实现避免不必要的重新渲染*

**A： 通过生命周期的钩子函数 shoulComponentUpdate()**

**B：利用 shouldComponentUpdate的 nextState参数来进行判断**

**C：如果nextState参数不同，则返回true， 进行更新，如果参数相同，返回false不进行更新**

D：在componentWillMount中进行判断

*14、**关于React组件优化，下面说法正确的是*

**A：只存储跟组件渲染相关的数据（比如：count/ 列表数据 /loading等）**

**B：使用钩子函数 shouldComponentUpdate(nextProps, nextState)，避免不必要的渲染**

**C： 利用纯组件，继承React.PureComponent**

D：尽可能把所有内容写到一个组件中

*15、**关于虚拟Dom和diff算法，说法正确的是*

**A：虚拟DOM：本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容**

**B：Diff算法：比对算法，找到前后更新数据不同的元素**

**C：初次渲染时，React会根据初始化的state（Model），创建一个虚拟DOM对象（树）<br>**  - 根据虚拟DOM生成真正的DOM，渲染到页面<br>  - 当数据变化后(setState())，会重新根据新的数据，创建新的虚拟DOM对象（树）<br>  - 与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容<br>  - 最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面

D：虚拟dom的方式将更新的过程效率降低了，是一种低效的方式

*16、**下面关于React路由说法正确的是*

**A：使用Router 组件包裹整个应用**

**B：使用Link组件作为导航菜单（路由入口）**

C：Router中只有一种地址模式，即#(hash模式)

**D：使用Route组件配置路由规则和要展示的组件（路由出口）**

*17、**下面关于React路由执行过程说法正确的是*

**A：React路由监听地址栏url的变化**

**B：React路由内部遍历所有的Route组件，拿着Route里面path规则与pathname进行匹配**

**C：当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容**

**D：： 只要url的地址栏发生了变化，就会遍历所有的Route里面的规则**

*18、**下面关于React中的路由编程式导航，说法正确的是*

**A：history是React路由提供的，用于获取浏览器历史记录的相关信息**

**B：push(path)：跳转到某个页面，参数path表示要跳转的路径**

**C：go(n)：前进或后退功能，参数n表示前进或后退页面数量**

D：可以直接通过this.history获取对应的历史对象

*19、**JSX中使用JavaScript表达式的注意点是*

**A：在{}中不能出现语句**

**B：只要是合法的js表达式都可以进行嵌入**

**C：JSX自身也是js表达式**

D：JSX中可以写分号断句

*20、**使用JSX进行列表渲染，下面说法正确的是*

**A：如果需要渲染一组数据，我们应该使用数组的 map () 方法**

**B：渲染列表的时候需要添加key属性，key属性的值要保证唯一**

C：如果需要渲染一组数据，也可以使用数组的 forEach () 方法

D：渲染列表的key属性可以是常量

*21、**下面关于React组件的说法正确的是*

**A：函数组件：使用JS的函数创建组件，在函数里面利用return 返回JSX结构**

**B：函数组件必须要有返回值，如果没有内容，返回null，如果返回值为null，表示不渲染任何内容**

**C：函数名称必须以大写字母开头**

**D：函数组件必须有返回值，表示该组件的结构**

*22、**下面关于ES6语法创建组件说法正确的是*

**A：类名称也必须要大写字母开头**

**B：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性**

C：render方法中不必须有返回值

**D：类组件必须提供 render 方法**

*23、**关于React中事件绑定语法说法正确的是*

**A：React事件绑定语法与DOM事件语法相似**

**B：on+事件名称=事件处理函数，比如 onClick = function(){}**

**C：React事件采用驼峰命名法**

D：React中可以使用@click简写作为事件名称

*24、**关于React有状态组件和无状态组件说法正确的是*

**A：函数组件又叫做 无状态组件，类组件又叫做 有状态组件**

**B：函数组件没有自己的状态，只负责数据展示**

**C：函数式组件可以通过props展示数据**

D：类组件中的props为状态组件中的状态

*25、**关于更新状态state数据说法正确的是*

**A：语法：this.setState({要修改的数据})**

B：语法：this.state.name = 要修改的数据

**C：一旦我们调用了setState导致了数据的变化，就会重新调用一次render方法，重新渲染当前组件**

D：setState设置完数据之后，可以立刻获取最新的状态数据

*26、**关于React的Props校验，下面说法正确的是*

**A：props允许在创建组件的时候，指定props的类型、格式等**

**B：props校验需要用到 props-type这个第三方包来实现**

**C：- 使用组件名.propTypes={} 来给组件的props添加校验规则**

**D：isRequired表示props属性必填**

*27、**下面关于JSX转化过程正确的是*

**A：JSX仅仅是createElement() 方法的语法糖(简化语法)**

B：JSX的语法中允许写if 和else

**C：JSX语法被 @babel/preset-react 插件编译为createElement() 方法**

D：JSX语法中当编写标签结构时，需要加引号

*28、**类组件(Class component)和函数式组件(Functional component)之间有何不同*

**A：类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态**

B：函数式组件拥有生命周期，类组件没有

**C：当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件**

D：函数式组件拥有可维护的状态state,类组件没有

*29、**createElement 和 cloneElement 说法正确的是*

**A：React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。**

B：createElement 和 cloneElement 不能创建div元素

C：createElement 第一个参数是一个React元素对象

**D：React.cloneElement()与 React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而就的子元素奖杯替换。**

*30、**关于Redux下面说法正确的是*

**A：redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理**

**B：主要有三个核心方法，action，store，reducer**

**C：工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据**

D：Redux不能够进行异步请求的操作

## 17. **Vue项目**

*1、**假设一个文件中export了很多方法或者属性，你应该用哪种方式引入该文件中的所有导出的方法和属性*

A：import  result from '地址'

B：import {  result } from '地址'

C：import as * result from '地址'

**D：import * as result from '地址'**

*2、**假设当前让你使用Vuejs开发一个项目，项目中要求每个用户所拥有的菜单和页面权限不同，你应该从下面哪一个方面来着手*

A：在每一个页面中写判断逻辑，判断当前用户的菜单数据里面有没有该页面

B：每次跳转的时候检查用户是否有当前页面的权限，有就显示，没有隐藏

**C：在总控导航守卫的位置，去获取当前用户的数据，并且缓存，避免每次跳转都重复获取用户权限，根据用户权限筛选路由信息，将路由信息 addRoutes动态添加到当前路由上**

D：先把所有路由规则都挂到路由上，然后获取用户权限数据，通过css样式控制菜单和页面的显示或者隐藏

*3、**在Vuejs的机制中，更新一个数组的某个元素(对象)内容，下面哪种是正确的*

A：this.list[index] = obj

**B：this.list.splice(index,1, obj )**

C：this.list.push(obj)

D：this.list = [...this.list, obj]

*4、**Vuex中数据更新时，必须通过下面哪个属性*

A：actions

B：getters

C：modules

**D：mutations**

*5、**当路由path地址为 user/123456 和 user对应的是同一个组件时，如果 由 user/123456 => user 地址时，此时组件因为缓存原因不能重新渲染，你能在下列哪个属性中处理该问题*

A：created

B：beforeDestory

C：computed

**D：watch**

*6、**下列axios请求中，哪种可以传递formData类型的参数给到后台*

A：this.$axios({<br>   data: { name: "张三" }<br> })

B：this.$axios({<br>   params: { name: "张三" }<br> })

C：this.$axios({<br>   data: '{ name: "张三" }'<br> })

**D：**const data = new FormData()<br>data.append('name', "张三")<br>this.$axios({<br>   data<br> })

*7、**Element的表格组件如何在一列中显示 删除和编辑按钮*

A：<el-table-column></el-table-column><br><el-button>编辑</e-button><el-button>删除</e-button>

B：<el-table><br>  <el-button>编辑</e-button><br>  <el-button>删除</e-button><br></el-table>

**C：**<el-table-column><br>  <el-button>编辑</e-button><br>  <el-button>删除</e-button><br><br></el-table-column>

D：<el-table></el-table><br> <el-button>编辑</e-button><br>  <el-button>删除</e-button>

*8、**路由的导航守卫中需要判断当前有没有token, 来判断是否跳到主页，否则回到登录，下面代码正确的是*

A：router.afterEach(() => {<br>   if(token) {<br>     return '主页地址'<br>   }<br>   return '登录地址'<br>})

**B：**router.beforeEach((to, from, next) => {<br>   if(token) {<br>    next()<br>   }<br>   next('登录地址')<br>})

C：router.beforeEach(() => {<br>   if(token) {<br>     return '主页地址'<br>   }<br>   return '登录地址'<br>})

D：router.beforeEach(() => {<br>   if(token) {<br>     next()<br>   }<br>  <br>})



*9、**按需引入路由组件的语法正确是*

A：import Login from '@/views/login'<br>{<br>  path: '',<br>  component: Login <br>}

B：{<br>  path: '',<br>  component: import('@/views/login')<br>}

C：import Login from '@/views/login'<br><br>{<br>  path: '',<br>  component: () => Login <br>}

**D：**{<br>  path: '',<br>  component: () => import('@/views/login')<br>}

*10、**在axios的响应拦截中，如果想处理异常，并且该错误依然想被promise执行链的catch捕获，代码正确的是*

A：axios.interceptors.response.use(error=> { <br>   return Promise.reject(error)<br> })

B：axios.interceptors.response.use(error=> { <br>   return false<br> })

**C：**axios.interceptors.response.use(() => {},error=> { <br>   return Promise.reject(error)<br> })

D：axios.interceptors.response.use(（）=>{}，error=> { <br>   return false<br> })

*11、**如果想在axios中进行token的统一注入，下面的代码正确的是*

A：axios.interceptors.request.use(config => { <br>   config['token'] = token<br> })

**B：**axios.interceptors.request.use(config => { <br>   config['token'] = token<br>  return config <br> })

C：axios.interceptors.response.use(config => { <br>   config['token'] = token<br>  return config<br> })

D：axios.interceptors.response.use(config => { <br>   config['token'] = token<br>   retutn config <br> })

*12、**Element的表单校验规则中的那个属性可以要求字段必填*

A：message

B：trigger

C：min

**D：required**

*13、**在Vue项目中@符号表示的是什么意思*

A：转义符

**B：指向根目录的src目录的路径变量**

C：邮箱前缀

D：协议标识

*14、**Vue-Cli 3.0 创建项目的命令是*

**A：vue create project**

B：vue init project

C：vue project

D：npm init project

*15、**关于ElementUI全局注册完整的的是*

A：import Element from 'element-ui'<br>Vue.use(Element)

B：import Element from 'element-ui'<br>Vue.install(Element)

**C：**import Element from 'element-ui'<br>import 'element-ui/lib/theme-chalk/index.css';<br><br>Vue.use(Element)

D：import Element from 'element-ui'<br>import 'element-ui/lib/theme-chalk/index.css';

*16、**git初始化并且提交到本地仓库并推到远程仓库的代码正确的是*

A：git init <br>git add .<br>git commit -m "提交到本地仓库"

B：git init <br>git add .<br>git commit -m "提交到本地仓库"<br>git push

C：git init <br>git add .<br>git commit -m "提交到本地仓库"<br>git remote add origin “地址”<br>git push

**D：**git init <br>git add .<br>git commit -m "提交到本地仓库"<br>git remote add origin “地址”<br>git push origin master

*17、**假设组件的结构如下，
<parent>
   <child></chiild>
</parent>

请选择parent和child组件的钩子函数的执行顺序*

A：child的beforeCreate -> child的created -> child的beforeMount -> child的mounted ->parent的beforeCreate -> parent的created -> parent的beforeMount -> parent的mounted

B：parent的beforeCreate -> parent的created -> parent的beforeMount -> parent的mounted ->child的beforeCreate -> child的created -> child的beforeMount -> child的mounted

C：parent的beforeCreate -> parent的created -> child的beforeCreate -> child的created ->parent的beforeMount -> parent的mounted-> child的beforeMount -> child的mounted

**D：**parent的beforeCreate -> parent的created -> parent的beforeMount ->child的beforeCreate -> child的created ->child的beforeMount -> child的mounted-> parent的mounted

*18、**Vue-Cli是创建Vue的脚手架，下面关于Vue-Cli说法正确的是*

A：Vue-Cli在代码打包过程中，被打包到我们的dist目录中

**B：Vue-Cli可以帮助我们开启一个本地的服务，帮助我们调试预览Vue项目**

C：Vue-Cli的配置文件如果想要修改，你需要在根目录下添加一个webpack.config.js文件

D：Vue-Cli的配置文件中，引入依赖包可以使用 import from

*19、**假如你在做一个支付页面，开启了一个定时器去轮询查找当前的支付状态，但是你随时可能跳到其他页面，此时你应该在哪个钩子中去销毁该定时器*

A：beforeCreate

B：updated

C：destoryed

**D：beforeDestory**

*20、**在Vuejs中除了采用template模板形式渲染页面结构，才可以采用render函数，下面关于render函数说法正确的是*

**A：render函数返回的内容就是渲染的页面结构**

**B：render中采用了类似react中的jsx结构的语法**

**C：在render中，你可以通过 this.$slots 访问静态插槽的内容**

**D：render函数让代码看起来更加灵活**

*21、**关于函数的防抖和节流，下面说法正确的是*

**A：防抖和节流都是为了解决短时间内频繁调用业务逻辑而推出的解决方案**

B：函数防抖会在单位时间内均匀的执行等同频率的函数逻辑

**C：函数节流会在单位时间内均匀的执行等同频率的函数逻辑**

**D：函数防抖可以用在搜索内容时的业务处理**

*22、**关于http请求中rest协议规范下面说法正确的是*

**A：restful追求一种标准规范的形式来设计我们的请求接口**

B：restful中的增删改查接口地址完全不一样

**C：restful中采用method(请求类型) 来区分不同的业务处理**

**D：restful中的 post对应新增业务，put对应修改业务， delete对应删除业务，get对应读取业务**

*23、**在Vuejs项目main.js文件，说法正确的是*

**A：所有的注册组件/指令/过滤器 都应该在 new Vue() 之前**

B：main.js中引入的文件不一定会被打包

**C：Vue.use(对象) 会调用对象中的install方法，并且传入一个Vue对象**

**D：new Vue() 除了设置el属性之外，还可以使用$mount()方法挂载到页面元素**

*24、**关于树形递归算法，下面说法正确的是*

**A：递归适合处理树形结构数据的检索，处理**

B：递归就是函数调用函数自身，每次调用自身的时候，传递的参数可以完全一样

C：递归函数逻辑本身可以没有跳出条件

**D：递归函数调用时，必须保证拥有跳出条件，并且每次传递的参数不同**

*25、**SSR相对于CSR的优势在于*

**A：SSR的首屏加载速度远远超过CSR**

**B：SSR更加有利于html页面的SEO，被搜索引擎更好捕获**

C：SSR的开发效率远远超过CSR

D：SSR的渲染完成之后，前端的运行机制和CSR完全不同

*26、**关于keep-alive组件，下面说法正确的是*

**A：keep-alive内的组件只有一次生命周期，因为放在keep-alive中的组件不会自动销毁**

B：当组件在 <keep-alive> 内被切换，它的 created和 destoryed这两个生命周期钩子函数将会被对应执行。

C：keep-alive应该包裹所有的组件，把所有的组件缓存起来，这样效率更高

**D：keep-alive组件不会生成实质的dom标签**

*27、**下面关于this.$parent说法正确的是*

**A：this.$parent可以获取到当前组件的父组件实例**

**B：this.$parent可以获取到当前组件的父组件实例， 但是如果当前该组件放置的位置位于父组件的某个自定义组件的插槽内， 那么this.$parent表示是该自定义组件的实例**

**C：this.$parent实际上可以完成子组件到父组件的传值**

D：this.$parent是一个数组

*28、**关于Vue的$nextTick方法说法正确的是*

A：因为props传值渲染是同步的，所以$nextTick没什么作用

**B：除l可以用Vue.nextTick进行函数执行，也可以使用this.$nextTick**

**C：使用setTimeout可以实现和$nextTick同样的效果**

D：this.name = '张三'<br> this.$nextTick(() => console.log(this.name))<br>this.name = '李四'<br><br>// 上面代码中打印的是张三

*29、**Vuejs的响应式原理说法正确的是*

**A：Vuejs利用了Object.defineProperty的属性对数据进行了数据劫持**

B：Vuejs的响应式更新利用了setState状态机的理念

**C：Vuejs的响应式更新可以通过 this.name = 值的方式来进行实现**

D：MVVM中第一个M指的是maven

*30、**关于token超时处理，下面说法正确的是*

A：token超时了，不需要处理，只需要判断有无token即可

**B：token如果失效了，如果有refreshToken,可以用refreshToken换取token,继续之前的请求**

**C：token失效可以在axios的响应拦截器中判断对应的错误码进行处理**

D：token超时对业务不构成影响

*31、**关于单独封装Vue的业务请求，下面说法正确的是*

A：对网络请求的封装使得代码写起来更繁琐，效率更低

**B：将网络请求按照模块和功能划分，会使得业务扩展时同样的网络请求不需要再重复编写**

**C：单独封装的网络请求中 一般采用 export function 请求名（） {} 的方式，在应用端 采用import { 请求名 }  from '地址'**

**D：网络请求中一般返回promise对象，可以使用async/await语法或者 then/catch语法处理**

*32、**Vuex中的state状态如果想要做前端持久化，需要做到下面哪点*

A：state中的数据默认值必须为空

**B：state中的数据默认值必须从前端缓存中读取**

**C：mutations中更新该state属性时，必须同步更新到前端缓存**

D：mutations中更新该state属性时，必须清空前端缓存中该变量的属性值

*33、**调用Vuex的action，action代码如下 并获取action的返回值， 下面代码正确的是
actions: { 
  getUserInfo() { 
    return 123
   }

 }*

A：const result = this.$store.dispatch('getUserInfo')

**B：**this.$store.dispatch('getUserInfo').then(result => {  })

**C：** const result = await this.$store.dispatch('getUserInfo')

D： const result = this.$store.commit('getUserInfo')

*34、**下面关于Vue-Cli中的跨域代理说法正确的是*

A：vue-cli跨域代理可以解决开发环境时前端的跨域问题，同样可以解决生产环境跨域问题

B：配置proxy跨域代理时，pathRewrite属性的目的是让跨域之后的路径更好看一些

**C：可以在proxy属性中配置多个跨域代理，将我们的请求代理到各种不同的域名下进行请求**

**D：vue-cli跨域代理只能解决开发环境的跨域问题，生产环境依然需要根据环境进行处理**

*35、**在Vue-Cli项目中如何判断当前的环境是生产环境*

A：在.env.development定义环境变量，根据环境变量判断该值是否和设置的一致,一致就是生产环境

B：process.env.NODE_ENV === 'development'时即为生产环境

**C：process.env.NODE_ENV === 'production'时即为生产环境**

**D：在.env.production定义环境变量，根据环境变量判断该值是否和设置的一致,一致就是生产环境**

*36、**下面关于eventBus通信说法正确的是*

**A：eventBus的处理机制相当于所有进行通信的组件都将事件的监听和触发赋予了同一个Vue实例上**

B：eventBus相对于 Vuex来说，传值起来更方便，更有效率，因为eventBus传值采用集中式管理状态，不用考虑数据副本的问题，不论多少组件间传值，数据自始至终只有一份

**C：eventBus的事件管理器的代码 为 export default new Vue()**

**D：eventBus和 子组件传父组件传值的思路是一样的，只不过前者永远针对同一个实例，后者针对每个组件实例**

*37、**下面关于Vuex的模块化说法正确的是*

A：子模块化的state属性访问方式是 this.$store.state.模块名.state.属性名

**B：子模块化下的mutations和actions默认可以通过全局的方式访问，因为默认情况下子模块化下的mutations和actions挂在全局命名空间下**

C：子模块没有办法将自己下属的mutations和actions和其他模块进行隔离

**D：调用带命名空间的子模块的actions代码是 this.$store.dispatch('模块名/action名称')**

*38、**Vuex提交mutations可以有下面哪种方式*

**A：**this.$store.commit("mutations名称")

B：this.$store.dispatch("mutations名称")

**C：**import { mapMutations } from 'vuex' <br>methods: {<br>  ...mapMutations(['mutations名称'])<br> test() {<br>   this.mutations名称()<br>}<br>}

D：this.$store.mutations.commit(''mutations名称")

*39、**Element中使用loading变量结合v-loading控制当前弹层显示，下面代码可以观察到弹层过程的代码是*

A：this.loading = true<br>axios.get()<br>this.loading = false

**B：**this.loading = true<br>axios.get().then(() => {<br> this.loading = false<br>})

**C：**this.loading = true<br>await axios.get()<br>this.loading = false

D：<br>axios.get().then(() => { this.loading = true  }).catch(() => { <br>this.loading = false<br><br>})

*40、**Element的分页组件pagination中必须要赋值哪几个属性*

**A：total(总数)**

B：background(背景)

**C：curren-page(当前页码)**

D：small(尺寸)

*41、**当手动校验完整表单时，下面哪个语法是在校验成功之后才执行逻辑的*

A：this.$refs.loginForm.validate(() => {<br>   // 执行逻辑<br> })

**B：**this.$refs.loginForm.validate((isOK => {<br>   if(isOK) {<br>   // 执行逻辑<br><br>   }<br> })

**C：**this.$refs.loginForm.validate().then(() => {<br>  // 执行逻辑<br>})

**D：**await this.$refs.loginForm.validate()<br>// 执行逻辑



*42、**Element校验规则中的自定义校验规则validator函数说法正确的是*

A：该函数不论校验成功或者失败，都必须有返回值

**B：该函数不论校验成功或者失败，都必须执行第三个参数callback**

**C：该函数校验失败的时候，callback函数中必须传出一个错误对象Error**

**D：该函数校验成功的时候，callback中不需要传任何参数**

*43、**Element的表单校验需要的必须条件是哪些*

**A：el-form 绑定model和rules属性**

B：el-form-item设置label属性

**C：el-form-item设置prop属性**

**D：表单域el-input进行双向绑定字段**

*44、**下面关于sync修饰说法正确的是*

**A：**sync修饰符要求子组件的触发事件名必须是 update:props属性名才可以完成自动更新父组件的数据

B：<child  :show-dialog.sync="showDialog" /> 中的showDialog变量可以是父组件传递过来的props属性

C：sync修饰符不会让子组件和父组件的传值更简单和有效率

**D：**sync修饰符修饰的props属性 不用监听子组件的事件 就可以完成更新该属性对应变量的值

*45、**下面哪个代码能让所有的Vue组件可以通过this.$message调用方法*

A：Vue.$message = Message

**B：Vue.mixin({ methods: { $message() { }  }  })**

**C：Vue.prototype.$message = Message**

D：Vue.extend{ methods: { $message() { }  }  })

*46、**关于默认插槽下，作用域插槽获取row属性下面用法正确的是*

**A：**<child> <template slot-scope="obj">{{ obj.row } } </template></child>

B：<child> <template slot="obj">{{ obj.row } } </template></child>

**C：**<child> <template v-slot:default="obj">{{ obj.row } } </template></child>

**D：**<child> <template v-slot="obj">{{ obj.row } } </template></child>

*47、**下面属于匿名插槽，并且用法正确的是*

**A：**<child> <template >123</template> </child>

**B：**<child> <template slot="default">123</template> </child>

C：<child> <template slot="name">123</template> </child>

**D：**<child> <template v-slot:default>123</template> </child>

*48、**下面属于具名插槽，并且用法正确的是*

**A：**<child> <br>  <template slot="before">123</template> <br></child>

**B：**<child> <br>  <template v-slot:before>123</template> <br></child>

**C：**<child> <br>  <template #before>123</template> <br></child>

D：<child> <br>  <template slot-scope="before">123</template> <br></child>

*49、**关于Promise下面说法正确的是*

**A：如果一个promise对象想要成功执行，必须执行reslove**

**B：如果一个promise对象想要失败处理，必须执行reject**

C：在promise执行链中 return false和 return Promise.reject(new Error()) 效果是一样的

D：await new Promise() 得到的是 Promise中 reject的结果

*50、**下面关于Vue生命周期的说法正确的是*

**A：beforeCreate和created表示Vue实例创建前后执行的钩子函数**

**B：beforeMount和mount表示Dom挂载前后的钩子函数**

C：beforeMount可以通过ref获取dom元素

D：我们习惯性的在beforeCreate中去获取数据

## 18. **nodejs阶段**

*1、**下列不属于nodejs内置模块的是：*

A：path

B：url

C：http

**D：dayjs**

*2、**下列关于nodejs描述不正确的是：*

**A：可以操作dom**

B：可以操作文件

C：可以发请求

D：可以做爬虫

*3、**如何使用http模块创建一个web服务：*

A：express()

B：createServer()

C：new http()

**D：app.listen()**

*4、**在nodejs中可以操作文件的模块是：*

A：file

**B：fs**

C：url

D：dir

*5、**在nodejs中__dirname获取的是：*

A：入口文件的目录

B：静态资源目录

C：src目录

**D：当前模块目录**

*6、**代码path.join('../../a','../b')的执行结果是：*

A：(../../a/b)

B：(../a/b)

**C：(../../b)**

D：(../../a/../b)

*7、**下列sql语句能删除students表的age字段的是：*

A：alter students drop age

B：insert table students drop age

C：update table students drop age

**D：alter table students drop age**

*8、**下列sql语句能查询students表中年龄大于20的数据的是：*

A：select * from students and age > 20

B：select * students where id > 20

**C：select * from students where age > 20**

D：select * from students where id > 3

*9、**cookie-parser属于express的何种类型中间件：*

A：应用级别

B：路由级别

C：内置级别

D：错误处理

**E：第三方**

*10、**错误处理中间件的参数描述正确的是：*

A：req,res,next

B：req,res,next,err

C：err,req,res

**D：err,req,res,next**

*11、**下列代码能够处理/user/100路径的put请求的是：*

A：app.put('/user', function (req, res) {})

**B：app.put('/user/:id', function (req, res) {})**

C：app.put('/user:id', function (req, res) {})

D：app.put('/user/id', function (req, res) {})

*12、**下列属于nodejs的全局变量的是：*

**A：console**

**B：module**

**C：setTimeout**

D：path

*13、**下列属于请求方式的是：*

**A：get**

**B：post**

C：path

**D：options**

**E：patch**

*14、**下列关于session描述正确的是：*

**A：服务器会话技术**

B：客户端会话技术

C：不依赖cookie

**D：适用于服务端渲染项目**

*15、**session持久化的好处是：*

**A：提高服务器内存的利用率**

**B：服务器重启保持session**

C：可以设置有效期

D：可以不用cookie

*16、**token如何保存在客户端：*

**A：cookie**

**B：sessionStorage**

**C：localStorage**

D：session

## 19. **jquery&数据可视化阶段**

*1、**jquery中选择器用法不正确的是：*

A：$('#box')

B：$('[name!="username"]')

C：$('li:last')

**D：$(':select')**

*2、**下列不属于jquery提供的API的是：*

A：eq()

B：children()

**C：findIndex()**

D：next()

*3、**$('div').outerWidth()获取的是div哪部分宽度？*

A：content

B：content+padding

**C：content+padding+border**

D：content+padding+border+margin

*4、**如何创建一个echarts实例？*

A：new Echarts()

**B：echarts.init()**

C：echarts.create()

D：new echarts()

*5、**下列值不属于echarts配置中series的type的是：*

A：bar

**B：rect**

C：pie

D：map

*6、**下列可以给jquery对象扩展方法的是：*

**A：$.fn.xxx**

**B：$.fn.extend()**

C：$.xxx

D：$.extend()

*7、**下列jquery方法中可以获取data-name属性值的是：*

A：prop()

**B：attr()**

C：val()

**D：data()**

*8、**下列jquery的show函数控制时间的参数有效的是：*

A：low

**B：normal**

**C：fast**

**D：1000**

*9、**echarts的title配置中textAlign属性可选值是：*

**A：left**

B：middle

**C：center**

**D：right**

*10、**下列属于option配置项的是：*

**A：title**

**B：xAxis**

**C：yAxis**

**D：grid**

## 20. **Web APIs**

*1、**下列关于正则的说法不正确的是：*

A：正则是对字符串进行查找、替换、校验的技术

B：[^0-9]表示除数字外的其它字符

**C：.匹配任意字符**

D：元字符可以通过 \ 转义成普通字符

*2、**下列关于JavaScript动画的说法不正确的是：*

A：频繁修改 DOM 的样式是实现动画的本质

B：requestAnimationFram能够优化DOM的重绘从而保证动画的流畅度

**C：JavaScript能够实现全部的 CSS 动画**

D：推荐 JavaScript 配合 CSS 实现动画效果

*3、**下列关于定时器说法不正确的是：*

A：包括延时函数setTimeout和间歇函数setInterval两种实现方法

B：延时函数常结合递归创建定时任务

**C：间歇函数和延时函数无法传入参数**

D：必要时通过 clearTimeout 和 clearInterval 清除定时任务能够优化性能

*4、**下列关于事件委托说法不正确的是：*

A：事件委托是结合事件冒泡的的开发技巧

B：事件委托能够减少监听事件节点的数量，进而提升执行性能

C：事件委托能够为动态创建的节点监听事件

*4、**下列关于事件委托说法不正确的是：*

A：事件委托是结合事件冒泡的的开发技巧

B：事件委托能够减少监听事件节点的数量，进而提升执行性能

C：事件委托能够为动态创建的节点监听事件

D：**事件委托只能将事件委托给其父节点**

*5、**下列关于事件流说法不正确的是：*

A：事件流描述了事件的执行过程

B：父节点向子节点传递的过程叫做捕获，子节点向父结点传递的过程叫做冒泡

**C：所有事件从触发到执行会经历捕获和冒泡两个阶段**

D：事件既可以在捕获阶段触发，也可以在冒泡阶段触发

*6、**下列关于递归函数说法不正确的是：*

A：递归函数的特征调用自身

B：递归函数必须要有一个“出口”终止递归调用

C：递归函数可用于父节点的查找

**D：递归和迭代并无差别**

*7、**下列关于自执行函数说法不正确的是：*

A：自执行函数在声明函数时即被调用

B：自执行函数本质上是一个函数表达式

C：自执行函数常被用来避免全局变量污染

**D：自执行函数只能是匿名函数**

*8、**下列关于样式操作说法不正确的是：*

A：style属性只能逐一更新节点样式

B：cssText支持以字符串形式更新节点样式

**C：通过 class 实现对节点类名的操作**

D：classList优化了节点类名的操作

*9、**下列关于伪数组说法不正确的是：*

A：伪数组是具有数组特征的对象

**B：伪数组能够像数组一样使用**

C：DOM节点列表是较为常见的伪数组

D：伪数组能够被转换为成“真数组”

*10、**下列关于DOM事件的说法不正确的是：*

A：事件一般由事件类型、回调函数构成

B：事件对象是专门用于记录事件信息的对象，其专有名称为 ev

**C：事件回调中的 this 指向当前DOM对象**

D： 事件监听使用匿名函数时无法移除

*11、**下列关于回调函数说法不正确的是：*

A：回调函数就是将函数当做实参来使用

B：回调函数属于高阶函数

C：匿名函数常被用来充当回调函数

**D：回调函数中 this 始终指向 window**



*12、**下列关于属性节点操作说法正确的是：*

A：通过 . 语法符号能够对属性节点进行访问或赋值

B：style属性用来动态访问或修改节点样式

**C：innerText、innerHTML无差别，都是用来访问或修改元素节点的内容**

D：元素节点的 attributes 包含了所有的属性节点

*14、**下列关于onload说法不正确是：*

A：加载外部资源时会触发该事件

**B：只能通过 window 进行监听**

C：DOMContentLoaded与onload 不同，在 DOM 树生成时即被执行

**D： onLoad事件会触发多次** 

## 21. **基础班**

*1、**下列关于伪元素说法不正确的是：*

A：伪元素的语法符号为 ::

B：::before和::after必须指定content属性使用，否则无效

**C：:after、:before会被识别成 ::before、after因此推荐使用::before和::after处理兼容性**

D：::before和::after默认为内联元素

*2、**下列关于CSS性能说法不正确的是：*

A：减少CSS后代选择器的层级有利于提升性能

B：使用通配符选择器 * 时可能导致性能降低

C：不推荐使用 @import 导入 CSS 样式

**D：优先采用外联样式是最佳开发实践**

*3、**下列关于定位说法不正确的是：*

A：绝对定位、固定定位不受文档流的约束

B： 相对定位以元素原来位置为参考

**C：无素默认的定位坐标为 left:0 和 top: 0**

D：粘性定位要求其父元素高度大于粘性定位的元素

*4、**下列关于过渡说法不正确的是：*

A：过渡能够在样式切换过程中产生动画效果

B：样式差异和时间差异是产生过渡效果的必要条件

**C：所有CSS样式属性都可以应用过渡效果**

D：为某一具体CSS样式属性指定过渡效果是推荐用法

*5、**下列关于链接伪类的说法不正确的是：*

A：链接伪类是根据链接的访问状态设置不同的样式

**B：链接伪类包括:hover、:link、:active、:visited 4种**

C："LoVe Hate"是应用链接伪类的最佳实践

D：链接伪类只适用于a标签

*6、**下列关于透明的说法不正确的是：*

A：opacity不能设置颜色的透明度

B：transparent设置颜色纯透明，可以理解成是特殊的颜色值

C：rgba和hsla均能设置颜色透明度

**D：16进制颜色值无法设置颜色的透明度**

*7、**下列关于精灵图说法不正确的是：*

A：将若干小图标整合到一起的新图片称为精灵图，然后结合背景定位再展示某个具体的图标

B：精灵图的使用能够减少网络请求，进而提升网页性能

**C：实际开发中推荐将全部图标都整合成精灵图**

D：精灵图制作和维护成本相对较高

*8、**下列关于背景说法不正确的是：*

A：background-clip指定背景区域的范围

B：background-origin指定背景图定位原点

C：设置背景图大小时 cover 和 contain 都能够保证图片的宽高比例

*8、**下列关于背景说法不正确的是：*

A：background-clip指定背景区域的范围

B：background-origin指定背景图定位原点

C：设置背景图大小时 cover 和 contain 都能够保证图片的宽高比例

D：**同一个元素无法设置多张背景图**

*9、**下列关于字体说法不正确的是：*

A：font-family用来指定网页内容的字体

B：不同的操作系统所支持的字体不一致

**C：能够为所有操作系统指定相同的字体**

D：指定多个字体时的查找优先级为自左向右

*10、**下列关于.item:first-child(-n+3)选择器描述不正确的是：*

A：属于交集选择器

B：参照元素在其父元素的位置查找

**C：n的取值为任意整数**

D：该选择器选中前3个.item元素

*11、**下列关于元数据描述正确的是：*

A：是描述数据的数据

B：元数据常被定义在head 标签中

**C：元数据通常使用 meta 标签定义**

D：title、base、link 都可被认定为元数据

*12、**下列关于语义化的说法不正确的是：*

**A：语义化是指header、footer这类标签**

B：语义化能够增强网页内容的识别度

C：语义化是SEO的重要手段

D：开发中尽量保证语义最大化

*13、**下列关于文档编码的说法不正确的是：*

A：它是计算机存储数据的方式

B：UTF-8是比较通用的编码格式

C：UTF-8和GBK存储数据所占空间大小不一样

**D：meta标签的charset指定为UTF-8时就能避免乱码**

*14、**下列关于路径的说法不正确的是：*

A：有网络路径和文件路径两种类型

B：有相对路径和绝对路径两种格式

**C：相对路径始终以文件路径为参考**

D：其中 . 和 .. 是两个特殊的目录

*15、**下列关于CSS特征描述正确的是：*

**A：层叠性是为同一元素多次设置样式时，相同的属性会产生覆盖，不同的样式则会合并**

**B：继承性是指为祖先设置的样式同时会被应用到子元素上**

**C：优先级是层叠过程中发生样式覆盖时的规则**

**D：某些标签被浏览器赋予了默认的样式**

*16、**下列关于浮动的说法不正确的是：*

A：浮动元素不受文档流的限制

**B：浮动元素只会对其之后的元素产生影响**

**C：overflow能够清除浮动**

D：清除浮动和清除浮动影响是两个不同的概念

*17、**下列关于盒子模型说法不正确的是：*

A：网页内容排版布局的理论依据

**B：网页中任意标签都能被抽像成“盒子”**

**C：每个“盒子”由内容、内边距、边框、外边距构成**

D：“盒子”模型会影响盒子的大小及布局位置

*18、**下列关于文档流说法正确的是：*

**A：文档流是浏览器布局元素的规则**

**B：块元素堆叠排列，内联元素水平排列**

**C：浮动和定位元素不受文档流的限制**

**D：块格式化上下文会产生“局部”的文档流**