前端面试题记录(不断更新)

1、当a等于什么的时候，以下条件成立

/* 
let a = ???;
if(a == 1 && a == 2 && a == 3){
    console.log("成立");
}
 */

let a = {
    i : 1,
    valueOf:function(){
        return this.i++;
    }
}
if(a == 1 && a == 2 && a == 3){
    console.log("成立");
}
//或者
let b = {
    i:1,
    toString:function(){
        return this.i++;
    }
}
console.log(b == 1 && b == 2 && b == 3);

2、实现深拷贝的方法(两种以上)

let a = [1,2,3,4,5,6,7,8,9,10];
//第一种，使用assign
let b = Object.assign([],a);
b.push(11);
console.log(a);
console.log(b);

//第二种，使用循环
let b = [];
a.map(item => b.push(item));
b.push(11);
console.log(a);
console.log(b);

//第三种，使用json.parse与json.stringify
let b = JSON.parse(JSON.stringify(a));
b.push(11);
console.log(a);
console.log(b);

3、如何避免接口被盗刷

/* 1 、 验证码（最简单有效的防护），采用点触验证，滑动验证或第三方验证码服务，普通验证码很容易被破解
2 、 频率，限制同设备，同IP等发送次数，单点时间范围可请求时长
3 、 归属地，检测IP所在地是否与手机号归属地匹配；IP所在地是否是为常在地
4 、 可疑用户，对于可疑用户要求其主动发短信（或其他主动行为）来验证身份
5 、 黑名单，对于黑名单用户，限制其操作，API接口直接返回success，1可以避免浪费资源，2混淆黑户判断
6 、 签名，API接口启用签名策略，签名可以保障请求URL的完整安全，签名匹配再继续下一步操作
7 、 token，对于重要的API接口，生成token值，做验证
8 、  https，启用https，https 需要秘钥交换，可以在一定程度上鉴别是否伪造IP
9 、 代码混淆，发布前端代码混淆过的包
10 、  风控，大量肉鸡来袭时只能受着，同样攻击者也会暴露意图，分析意图提取算法，分析判断是否为恶意 如果是则断掉；异常账号及时锁定；或从产品角度做出调整，及时止损。
11 、 数据安全，数据安全方面做策略，攻击者得不到有效数据，提高攻击者成本
12 、 恶意IP库，https://threatbook.cn/，过滤恶意IP */

4、请写出下列代码的输出顺序

async function a(){
    console.log("a start");
    await b();
    console.log("a end");
}
async function b(){
   console.log("b start");
}
console.log("func start");
setTimeout(() => {
    console.log("setTimeout end");
}, 0);
a();
new Promise((resolve,rejece)=>{
    console.log("promise start");
    resolve();
});

1、func start
2、a start
3、b start
4、promise start
5、a end
6、setTimeout end

5、输入框输入时，如何防抖，并且实现中文输入

https://www.jianshu.com/p/766e939e2d5c

6、将'AbC'转成'aBc'

let a = 'AbC';
let b = '';
for(let i = 0;i < a.length;i++){
    if(a[i] == a[i].toLocaleLowerCase()){
        b += a[i].toLocaleUpperCase();
    }else{
        b += a[i].toLocaleLowerCase();
    }
}
console.log(b);

7、实现一个sleep等待函数

function sleep(time){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve();
        }, time);
    });
}
async function func(){
    console.log("开始执行");
    await sleep(1000);
    console.log("等待一秒执行后");
    await sleep(2000);
    console.log("再等待两秒执行");
}
func();
//仅仅使用setTimeout也是可以，自行拓展

8、prototype与__proto__的区别

https://www.zhihu.com/question/34183746

9、去除下面数组的重复元素(至少两种方法)

let a = [1,1,2,2,3,3,4,5,6,7,5,1];
let b = [];
for(let i = 0;i < a.length;i++){
    if(b.indexOf(a[i]) < 0){
        b.push(a[i]);
    }
}
console.log(b);
//或者使用es6
let c = new Set(a);
console.log(Array.from(c));
//或者使用includes
let d = [];
for(let i = 0;i < a.length;i++){
    if(!d.includes(a[i])){//是否存在某个值
        d.push(a[i]);
    }
}
console.log(d);

10、使下面的数组变为一维数组

let a = [[1,2,3],[[4,5,6]],[7,[8,[9]]]];
//期望[1,2,3,4,5,6,7,8,9]
let b = a.join(",").split(",");
console.log(b);
//或者
let  c = a.toString().split(",");
console.log(c);
//或者
let d = [];
function e(arr){
    for (const item of arr) {
        if(item instanceof Array){
            e(item);
        }else{
            d.push(item);
        }
    }
}
e(a);
console.log(d);

11、跨域问题的产生原因及解决方法

原因：
    1、协议不同
    2、域名不同
    3、端口不同

解决方法
    1、vue项目下，可以设置代理解决
    2、使用jsonp解决，但是只支持GET请求
    3、后端设置请求头，支持通过对应请求
    4、使用cors，https://www.npmjs.com/package/cors

12、为什么v-for不能和v-if一起连用

1、优先级问题
2、vue中是优先处理v-for然后才会执行v-if
3、这就会造成性能浪费，得不偿失