2022年一线大厂面试题分享

最新推荐文章于 2024-06-29 23:11:26 发布

HerayChen

最新推荐文章于 2024-06-29 23:11:26 发布

阅读量1.9k

点赞数 1

分类专栏：面试文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_45832807/article/details/127177323

版权

面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

单选题

关于Vue组件的生命周期说法错误的是( C )

A. mounted钩子函数中，可以直接获取DOM元素
B. beforeMount钩子函数中，不可以直接获取DOM元素
C. beforeDestroy钩子函数中，不可以直接获取DOM元素
D. destroyed钩子函数中，不可以直接获取DOM元素

注：

mounted一直到beforeDestroy都可以获取DOM元素
关于Vue组件的生命周期说法错误的是( C )?

A. 在data中的对象的某个属性和input双向绑定，修改input的值，在deforeDestroy中获取的值是修改过后的值
B. 父子组件生命周期的执行顺序是父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、父亲mounted、孩子mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed
C. 在created钩子函数中操作DOM，可以将语句放在$nextTick中
D. ajax请求可以放在created钩子函数中

注：

加载渲染：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新：
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁：
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
关于v-model的修饰符说法错误的是（ C ）

A. lazy修饰符让内容在“change”事件时而非“input”事件时更新
B. v-model添加number修饰符,可以自动将用户的输入值转为数值类型
C. 可以给v-model添加trim修饰符,自动过滤用户输入的首尾空白字符
D. v-model添加number修饰符,如果这个值无法被parseFloat()解析，则会返回null

注：

v-model添加number修饰符,如果值不是数字，将不会有任何效果，直接返回输入值
下列关于v-for说法错误的是（ C ）

A. v-for指令基于一个数组来渲染一个列表
B. v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名
C. 不可以用v-for来遍历一个对象的property
D. v-for在使用的时候最好添加key，且key最好不是索引

注：
```
user: {name: 'HerayChen'}
<div v-for='(value, key, index) in user'>{{value}} {{key}} {{index}}</div>

输出为：HerayChen name 0
```
关于Vue组件化说法错误的是（ B）

A. 所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护
B. 组件是资源独立的，组件在系统内部可复用，但是组件和组件之间不可以嵌套
C. vue的组件之间可以进行通信
D. 组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发

注：

组件是资源独立的，组件在系统内部可复用，但是组件和组件之间可以嵌套
关于Vue中的diff算法说法错误的是（ D ）

A. 比较只会在同层级节点进行比较, 不会跨层级比较
B. 在diff比较的过程中，循环从两边向中间收拢
C. vue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记oldStartIdx、oldEndIdx、newStartIdx、newEndIdx
D. 当老VNode节点的start和新VNode节点的end满足sameVnode时,新VNode节点会被提到start位置

注：

老 VNode 节点的start和新VNode节点的end满足 sameVnode 时，这说明这次数据更新后oldStartVnode已经跑到了oldEndVnode后面去了，这时候在patchVnode后，还需要将当前真实dom节点移动到oldEndVnode的后面，同时老VNode节点开始索引加 1，新VNode节点的结束索引减 1。

不了解的可以多看看diff算法
关于Vuex说法错误的是（ C ）

A. Vuex可以用来管理数据
B. Vuex也可以实现组件间的传值
C. Vuex的属性有state、mutations、actions、setters等
D. mutation中的方法按照规定最好不要涉及异步方法

注：

vuex的五个属性：state、mutation、actions、getters， module
关于Vue组件间通信说法错误的是（ D ）

A. Vuex可以实现任何关系的组件间的通信
B. 如果子组件修改，通过props获取的父组件传过去的字符串或数字会报错
C. 子组件可以通过$emit给父组件传值
D. 可以通过context进行组件间传值

注：

context是用在react中进行组件间的传值，Vue组件间传值可以通过props，$emit,Vuex, eventBus
下列关于Vue内置组件的描述错误的是（ D ）

A. transition：为组件的载入和切换提供动画效果
B. transition-group：作为多个元素/组件的过渡效果
C. keep-alive：缓存子组件，被包裹的子组件会多出两个生命周期：activated、deactivated
D. 当组件在keep-alive内被切换时，它的mounted和unmounted生命周期钩子也会被调用

注：

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是 activated 和 deactivated。(这会运用在的直接子节点及其所有子孙节点。)
执行以下程序，输出结果为（ C ）

function a() {
console.log(this)
}
a.call(null);
---------------------------答案---------------------------
A. document
B. null
C. window
D. a

注：

当call和apply的一个参数为null/undefined时函数内的this指向window或者global
下面那个方法不能改变自身数组（ B ）

A. splice
B. concat
C. sort
D. pop

注：

concat连接数组但是不改变原数组，splice删除数据会改变数组，sort排序会改变数组，pop出栈返回最后一个改变数组
Math.round(-2019.5)的结果是（ B ）

A. 2019
B. -2019
C. 2020
D. -2020

注：

Math.round(）函数返回一个数字四舍五入后最接近的整数
如果参数的小数部分大于0.5，四舍五入到相邻的绝对值更大的整数
如果参数的小数部分小于0.5，四舍五入到相邻的绝对值更小的整数
如果参数的小数部分等于0.5，四舍五入到相邻的在正无穷（+∞）方向上的整数。
以下代码执行后，输出结果为（ A ）

let x = 10;
let foo = () => {
console.log(x);
let x = 20;
x++;
}
foo();
---------------------------答案---------------------------
A. 抛出ReferenceError
B. 10
C. 20
D. 21
```
注：
> 这题主要是考的let的块级作用域，将上述方法全部改为var就是undefined
```
从字符串 const str = ‘qwbewrbbeqqbbbweebbbbqee’;中能得到结果 [“b”, “bb”, “bbb”, “bbbb”] 以下错误语句是（B）

A. str.match(/b+/g)
B.str.match(/b*/g)
C.str.match(/b{1,4}/g)
D.str.match(/b{1,5}/g)

注：

+表示出现至少一次b；*表示可以不出现b，也可以出现一次或多次；
{n,m}表示最少出现n次b,最多出现m次b
执行下列代码之后，数组myArr的值是什么（C）

var myArr = [1,2,3,4,5]; myArr.shift();
A. [1, 2, 3, 4]
B. [1, 2, 3, 4, 5]
C. [2, 3, 4, 5]
D. []

注：

这题主要考了数组的四个方法，
push()在数组的末属添加一个或多个元素
shift()把数组中的第一个元素删除
unshift()在数组的前端添加一个或多个元素
pop()方法把数组中的最后一个元素删除
关于javascript模块化，下列描述错误的是（ B ）

A.AMD推崇依赖前置，CMD推崇依赖就近
B.Sea.js遵循AMD规范，RequireJS遵循CMD规范
C.主流的模块化包括CommonJS/AMD/CMD等
D.模块化有利于管理模块间的依赖，更依赖模块的维护

注：

CommonJS是服务器端的同步js模块化规范，由NodeJS实现
amd, cmd是用在浏览器端的异步模块化规范。
AMD依赖前置书写，由require.js实现。
CMD依赖就近书写，由sea.js实现。
下面这段javascript代码输出的是什么（）
```
 var myObject = {
	foo: 'bar',
	func: function() {
		var self = this;
		console.log(this.foo);
		console.log(self.foo);
		(function () {
			console.log(this.foo);
			console.log(self.foo);
		})()
	}
}
myObject.func();
```
A. bar bar bar bar
B. bar bar bar undefined
C. bar bar undefined bar
D. undefined undefined undefined undefined

注：

在 func函数中，this 和 self 都指向 myObject，因此输出都是 bar，但在 inner 函式，IIFE 有自己的作用域，因此 this 输出为 undefined，但是 self 保存了 this 的指向，所以输出bar

下面这段JS程序的执行结果是（ B ）

var user = {
	count: 1,
	getCount: function () {
		return this.count;
	}
}
var func = user.getCount();
console.log(func);

A. this.count
B. 1
C. 报错
D. undefined

以下代码执行后，a.x和b.x的结果分别为（ C ）

function A(x){
  this.x = x;
}
A.prototype.x = 1;
 
function B(x){
  this.x = x;
}
B.prototype = new A();
var a = new A(2), b = new B(3);
delete b.x;

A. 2, 3
B. 2, 1
C. 2, undefined
D. 其他几项都不对

执行以下程序，下列选项中，说法正确的是（）
```
function Person(age) {
    this.age = age;
}
Person.sing = function () {
    console.log('我会唱歌');
}
Person.prototype.getAge = function () {
    console.log(this.age);
}
Person.age = 20;
var p = new Person(18);
console.log(Person.prototype.constructor);
```
A. 输出结果为undefined
B. 若调用sing方法，可以使用p.sing()
C. 若调用getAge方法，可以使用p.getAge()
D. 若要访问对象p的age属性，可以使用p.age，返回结果为20

注：

Person.prototype.constructor返回的是Person函数本身，
p.getAge()传递的参数会被替换所有返回的结果是18
以下代码执行后，array的结果是（ A ）
let array = [1, 2, 3];
array = array.map(i => ++i)

A. [2, 3, 4];
B. [NaN, 2, NaN, 3, NaN, 4]
C. [1, 2, 1, 3, 1, 4]
D. [null, 2, null, 3, null, 4]

注：

map遍历后会返回一个新数组
下面关于JavaScript中call和apply的描述，错误的是（ B ）

A. apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
B. call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性
C. 两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是
D. call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
关于JavaScript里的xml处理，以下说法不正确的是（ B ）

A. Xml是种可扩展标记语言，格式更规范，是作为未来html的替代
B. Xml一般用于传输和存储数据，是对html的补充，两者的目的不同
C. 在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同
D. 在IE浏览器里处理xml，首先需要创建ActiveXObject对象

注：
以下那个语句打印出来的结果是false（ A ）

A. alert(3 == true)
B. alert(2 == ‘2’)
C. alert(null == undefined)
D.isNaN(‘true’)

执行以下程序，输出结果为（ C ）

function outer () {
    var num = 0;
    function inner () {
        num++;
        console.log(num);
    }
    return inner;
}
var f1 = outer();
f1();
f1();
var f2 = outer();
f2();
f2();

A. 1 2 3 4
B.1 1 1 1
C.1 2 1 2
D.1 1 2 2

注：

函数执行完之后是会销毁的

在es6中，下面程序运行结果输出为，选项结果正确的是（ D ）

for (let i = 0; i < 12; i++) {}
console.log(i); // 不是var，没有变量提升 所以是 not undefined
const a = 12;
a = 13; // 这里也会报错，变量没有指定数据类型
console.log(a);  // 12
const g = {b: 3};
console.log(g.b); // 3
g.b = 12;
console.log(g.b); // 12
let [head, ...tail] = [1, 2, 3, 4]
console.log(tail); // [2, 3, 4]

A. 11, 12, 3, 12, [3, 4]
B.i not defined, TypeError, TypeError, 4
C. 11, 12, 3, 3, 4
D.i not defined, TypeError, 3, 12, [2, 3, 4]

以下JavaScript代码，在浏览器中的运行结果为（ B ）
```
function foo () {
    console.log('first');
    setTimeout(() => {
        console.log('second');
    }, 5);
}
for (let i = 0; i < 4; i++) {
    foo();
}
```
A. first, second, first, second…依次顺序输出
B. 首先输出first，然后全部输出second
C. first, second无序输出
D. 首先输出first，超出5ms输出所有second，最后输出余下的first
下面关于this工作原理的描述哪一个是错误的（ C ）

A.在全局范围内，this指向全局对象（浏览器下指的window）
B.对象函数调用时，this指向当前对象
C.全局函数调用时，this指向全局函数
D.使用new实例化对象时，this指向新创建的对象

注：

全局函数调用时，this指向调用全局函数的那个对象.

多选题

下列关于webpack配置的描述正确的是（ A B D ）

A. module.rules可以指定多个loader，而loader的作用是对模块源码进行转换
B. plugin是一个具有apply方法的JavaScript对象，由于plugin可以携带参数，所以必须在配置中向plugins属性传入一个实例
C. 模块热替换会更替所有模块，立即在浏览器中进行更新
D. webpack开始处理程序时，从入口开始递归构建一个依赖关系图，包含了程序所需的模块，然后打包为少量的bundle，通常只有一个bundle

注：

模块热替换：不用刷新浏览器而将新变更的模块替换掉旧的模块
关于v-model的修饰符说法正确的是（ A B C ）

A. lazy修改符让内容在change时间是而非input事件时更新
B. v-model添加number修饰符，可以自动让用户是的输入值转为数值类型
C. 可以给v-model添加trim修饰符，自动过滤用户输入的首尾字符
D. v-model添加number修饰符，如果这个值无法被parseFloat()解析，则会返回null

v-model添加number修饰符，如果这个值无法被parseFloat()解析，则会返回原始值
关于vuex说法正确的是（ A B C D ）

A. 可以使用this.$store.state获取vuex中存储的状态
B.getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
C. 更改vuex的store中的状态的唯一方法是提交mutations中的方法
D. Actions可以包含任意异步操作，可以直接变更状态
在ECMAScript中，Promise的状态有（ A C D ）

A. Pending
B. Pause
C. Resolved
D. Rejected

注：

promise 对象仅有三种状态
pending （进行中）
fulfilled （已成功）
rejected （已失败）
关于正则表达式，下列说法不正确的是（ A B D ）

A. \w用来匹配数字
B. /a?/用来匹配0到多个a
C. i修饰符表示忽略大小写
D. #1表示对一个捕获组的引用

注：

\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\w 数字、字符串、下划线
/a?/ ?(0或1) +(一个或多个) *(0个或多个)
i 忽略大小写
？0 1
* 0 多
+ 1或多
\1表示对第一个捕获组的引用

问答题

一般如何解决跨域

1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

请自己封装一个去重函数，至少使用两种方法，可以用ES6新特性

第一种使用Es6的Set方法：

function getNewArray(arr) {
	let setArray = new Set(arr);
	// 将Set转换为一个真正的函数
	let newArray = Array.from(setArray);
	return newArray;
}

第二种方法手动过滤重复元素：

function getNewArray(arr) {
	// 定义一个新数组存储过滤后的元素
	let newArray = [];
	arr.map(item => {
		// 判断当前元素是否存在在过滤后的数组里面
		// 存在不执行，不存在将当前元素添加到过滤数组里面
		newArray.includes(item) || newArray.push(item)
	})
	return newArray;
}

请编写一个JavaScript函数parseQueryString，它的用途是把URL解析为一个对象

function parseQueryString(str){
   // url1.replace(/^.*\?/, '')截取url?后面的内容 key0=0&key1=1&key2=2
  // .split('&') 按照 & 分隔成数组 ['key0=0', 'key1=1', 'key2=2']
  var pairs = str.replace(/^.*\?/, '').split('&'),
      // 定义一个对象，存储解析后的url
      res = {};
      pairs.map(item => {
          // item.split('=') 返回 ['key0', '0']
          let itemArray = item.split('=');
          res[itemArray[0]] = itemArray[1];
      })
  return res;
}
var url1 = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2";
console.log(parseQueryString(url1)); // 打印输出 {key0: '0', key1: '1', key2: '2'}

请封装一个promise1，一个promise2作用分别是延时1s时输出1，延时2s输出2，并让其按顺序执行

/* 第一种 */
function getResult(val) {
     setTimeout(() => {
         console.log(val);
     }, val * 1000);
 }
 getResult(1);
 getResult(2);
 
 /* 第二种 */
 for (var i = 0; i < 3; i++) { 
     setTimeout(function (j) { 
             console.log(j) 
     }, i * 1000, i);
 }

看看这段代码依次会输出什么

console.log('aaa');
setTimeout(() => {
    console.log('bbb');
}, 100);
const start = new Date();
// 这里会阻塞 bbb 的执行
while(new Date() - start < 3000) {
    setTimeout(() => {
        console.log('ccc');
    }, 0);
}
const p1 = new Promise((resolve, reject0) => {
    console.log('ddd');
    resolve();
    console.log('eee');
});
p1.then(() => {
    console.log('ggg');
});
console.log('fff'); // aaa ddd eee fff ggg ccc

HerayChen

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
2022年一线大厂面试题分享

关于Vue组件的生命周期说法错误的是( C )A. mounted钩子函数中，可以直接获取DOM元素B. beforeMount钩子函数中，不可以直接获取DOM元素C. beforeDestroy钩子函数中，不可以直接获取DOM元素D. destroyed钩子函数中，不可以直接获取DOM元素注：mounted一直到beforeDestroy都可以获取DOM元素关于Vue组件的生命周期说法错误的是( C )?
复制链接

扫一扫

专栏目录