vue面试

2021前端面试题

一、常见面试题
1、call()和apply()的区别
实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。apply传的是数组；
2、 什么是事件代理/事件委托？
事件代理/事件委托是利用事件冒泡的特性，将本应该绑定在多个元素上的事件绑定在他们的祖先元素上，尤其在动态添加子元素的时候，可以非常方便的提高程序性能，减小内存空间。
3、什么是事件冒泡？什么是事件捕获？
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，其中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。
4、什么是"use strict";?使用它的好处和坏处分别是什么？
在代码中出现表达式-“use strict”; 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。
好处：
• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
• 消除代码运行的一些不安全之处，保证代码运行的安全；
• 提高编译器效率，增加运行速度；
• 为未来新版本的Javascript做好铺垫。
坏处：
• 同样的代码，在"严格模式"中，可能会有不一样的运行结果；
• 一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。
5、请解释一下JavaScript的同源策略
同源策略，即拥有相同的协议（protocol），端口（如果指定），主机（域名）的两个页面是属于同一个源。 然而在IE中比较特殊，IE中没有将端口号加入同源的条件中，因此上图中端口不同那一项，在IE中是算同源的。

8、如何防抖？
何为防抖 多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行，一般用于scroll事件。
解决原理 对处理函数进行延时操作，若设定的延时到来之前再次触发事件，则清除上一次的延时操作定时器，重新定时。
let timer;
window.onscroll = function () {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(function () {
//滚动条位置
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(‘滚动条位置：’ + scrollTop);
timer = undefined;
},200)
}

9、
var arr = [1,2,3];
var arr2 = arr;
arr.push(4);
arr2.push(5);
请问arr 和arr2的结果是？
答案：
arr = [1,2,3,4,5]
Arr2 = [1,2,3,4,5]

10、对象属性获取的方式有二种.和[]，区别是什么，代码说明
答 ：var obj = {name:‘amy’,age:20};
var n = ‘name’;
obj[n] //[]可以是变量 .不行

11、
var arr = [{check:true,id:1},{check:false,id:2},{check:false,id:3},{check:true,id:4}]
请取出check为true的值
答：var a = arr.filter(item=> item.check);

12、
计算出以下商品单价和金额的总和，初始值为10
arr = [{count:1,price:10,name:‘a’},{count:3,price:50,name:‘b’},{count:5,price:23,name:‘c’},{count:2,price:14,name:‘d’}];

答：var c = arr.reduce(function(total, cur){
return total+cur.count*cur.price;
},10)
console.log©

13、
function fun () {
console.log( n );
n = 456;
console.log( n );
}
var n= 123;
fun( n);
console.log( n ); 解析的过程及结果
答：123 456 456
//解析过程
var n;
function fun(){}
n = 123;
//fun(n)执行
console.log(n) //123
n = 456 //改变全局变量的值
console.log(n) //456
console.log( n ); //最后再执行 结果456

14、
var length = 100;
function f1() {
console.log( this.length )
}
var obj = {
x: 10,
f2: function( f1 ){
f1();
arguments0;
}
}
obj.f2(f1,1,2,3);
解析的过程及结果
答：100 4
f1()没有调用者，this的指向是window 所以this.length就是100
arguments0;
Arguments[0]指向f1
arguments0; 表示f1(), this的指向是arguments 所以this.length就是arguments.length 值为4

15、用递归来实现5的阶乘
答：function func(n){
if (n == 1){
return 1;
}
// func(n-1) 因为传递的参数是 n-1,那么就是求 (n-1) 的阶乘
return n * func(n-1);
}
console.log(func(5))

16、let和var的不同请从以下几个方面来通过代码说明
1）不存在变量提升
console.log(a);
var a=‘a’;

console.log(b);
let b=‘b’;
2）同一个作用域内不能重复定义同一个名称
let b = 1;
let b = 2;
console.log(b);
3）有着严格的作用域
function test2() {
let str=‘123’;
if(true){
let str=‘456’;
};
console.log(str);
};
test2();
4）块级作用域的重要性
var arr = [];
for(let i=0; i<5; i++){
arr[i] = function(){
console.log(i)
}
};
arr4;

17、暂时性死区是什么，举例1-2例说明
function f3(i){
let i;
console.log(i)
};
f3(10)

let x = y,y = 10;
function f2(){
console.log(x,y)
};

18、取二组数据的并集，交集，差集并去重
var a1 = [1,2,3,4,5,6,4,5,6];
var a2 = [4,5,6,7,8,9,7,8,9];
//并集
//1、合并
var merge = […a1,…a2];
//2、去重
var noDuplicate = new Set(merge);
//3、转类型
var a3 = […noDuplicate];
//4、代码合并
var a3 = […new Set([…a1,…a2])] //[1, 2, 3, 4, 5, 6, 7, 8, 9]

//交集
//1、数据过滤
//a1中包含a2
var filterD1 = a1.filter(v=>a2.includes(v)); // [4, 5, 6, 4, 5, 6]
//var filterD2 = a1.filter(v=>new Set(a2).has(v)); //[4, 5, 6, 4, 5, 6]
//a2中包含a1
//var filterD1 = a2