首页 > 笔经面经 > 前端面试10家分享!!!

前端面试10家分享!!!

头像
牛客967008827号
编辑于 2021-05-30 18:36:37 APP内打开
赞 33 | 收藏 169 | 回复1 | 浏览2725
面试基本以js基础为主,重点看你简历上写的技术栈,围绕你使用过的框架,例如vue和react,会略带问一些项目经验和项目中怎么使用的一些问题,然后就是框架的基础用法,这些不熟悉或者平时需要翻文档的一些东西可以重点突击下,以下就是面试中问到我的一些问题,每个人因人而异,但是造飞机的题目大家应该一样,可以借鉴!!!

1.js基础题

1.说说Js作用域
2.说说this指向;
3.对异步函数的认识;
4.==和===的区别 ;
5.0==“” 的返回;
6.简单说说原型,原型对象和原型链;
8.什么是闭包以及应用场景;
9. 继承的方式有哪些?举例其中一种的具体用法;
10.如何反转一个字符串;
11.如何扁平化一个二维数组;
12.说几种实现深拷贝的方法;
13.js单线程如何实现多线程;
14.如何理解事件循环的处理机制;
15new 一个构造函数的原理,干了什么,具体的流程;
16.jquery的api有哪些,简单列举一些;
17. 一个函数a,里面return 一个1,一个函数b里面return 一个空对象,那么分别new这两个函数,得到的值是什么;
18. 输入url后浏览器都干了些什么;
19. 多维数组的去重排序
20. 深拷贝和浅拷贝的区别;
21.说说 jQuery extend()和jQuery.fn.extend()的区别;
22. for循环里是否可以用return语句;
23. [’10’,’10’,’10’,’10’,’10’].map(parseInt) 的值什么;
24. 说几种跨域解决方案;
25.js判断类型;( typeof() , instanceof, Object.prototype.toString.call()
let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
let newArr =[...new Set(arr.flat(4))].sort((a,b) => a-b)
// 结果 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
26. setTimeout、Promise、Async/Await 的区别;(除概念外,这题有笔试题目,出现的概率很大);
async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('start');
setTimeout(() => {
    console.log('setTimeout');
}, 0);
async1();
new Promise(resolve => {
    console.log('promise1');
    resolve();
}).then(() => {
    console.log('promise2');
})
console.log('end’);

start
async1 start
async2
promise1
end
promise2
async1 end
setTimeout

2.前端缓存,性能优化以及浏览器相关;

1.说说http缓存;
2. cdn缓存原理;
3. http和https的区别;
4. 前端资源比较大的时候如何做性能优化;
5. cookie和localstorage和sessionstorage的区别;
6. cookie和localstorage有时限吗;
7. localstorage,sessionStorage,cookie可以清除吗;
8. cookie中只能跳转a页面不能跳转b页面怎么设置;
9. Http1.0和1.1及2.0的区别;
10. http状态码以及含义;(面试官随机问,都要记下)

3.前端css相关

1. flex布局中flex的全称;
2. transition和animation有什么不同,属性分别表示什么意思;
3. 如何实现一个元素上下左右垂直居中;
4. 说说盒子模型,标准模式和怪异模式有什么不同,如何设置;
5. 了解BFC吗?两个盒子一个盒子设置margin-bottom:20;一个设置margin-top:30,那么他们相隔多少;
6. 知道display:grid网格布局吗,说说看;

4.React相关

1. typescript中type和interface的区别;
2. react生命周期;
3. props和state更新组件数据有什么不同;
4. react异步数据如ajax请求应该放在哪个生命周期;
5. React中setState 什么时候是同步的,什么时候是异步的;
6.react相比jquery操作dom性能上做了什么优化;
7. React 中key的作用;
8. React 中render渲染几次;
9. React setState传参方法;
10.平时项目中用hooks吗?说说为什么要用hooks?具体有哪些好处;
11. typescript接口类型声明中设置可选,使用的时候想变成不可选怎么做;

5.webpac相关

1. webpack打包原理;
2. webpack loader配置有哪些,简单说几种;

6.ES6相关

1. let和const和var的区别;
2. map循环和forEach循环的区别;
3. 箭头函数和普通函数的区别;
4. ES6新增了那些东西;

7.补充数组,字符串常用的方法和Es6新增用法牢记(笔试常用)

1. Join() 数组转字符串,不改变原数组;
<script>
    var arr=[1,2,3,4];
    console.log(arr.join()); //1,2,3,4
    console.log(arr.join(":")); //1:2:3:4
    console.log(arr); //[1,2,3,4],原数组不变
</script>
2. push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度
<script>
    var arr=[1,2,3,4];
    //push
    var push_arr=arr.push("Tom","Sun");
    console.log(arr); //[1,2,3,4,"Tom","Sun"];
    console.log(push_arr); // 6
</script>
3. pop() 方法用于删除并返回数组的最后一个元素
<script>
    var arr=[1,2,3,4];
    //push
    var push_arr=arr.push("Tom","Sun");
    console.log(arr); //[1,2,3,4,"Tom","Sun"];
    console.log(push_arr); // 6
</script>
4. pop() 方法用于删除并返回数组的最后一个元素
<script>
    var arr=[1,2,3,4];
    //pop
    var pop_arr=arr.pop();
    console.log(arr); //[1,2,3,4,"Tom"];
    console.log(pop_arr); // Sun    
</script>
5. shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
<script>
    var arr=[1,2,3,4];
    //shift
    var shift_arr=arr.shift();
    console.log(arr); // [2, 3, 4]
    console.log(shift_arr); // 1
</script>
6. unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度
<script>
    var arr=[1,2,3,4];
    //unshift
    var unshift_arr=arr.unshift("Tom");
    console.log(arr); // ["Tom", 2, 3, 4]
    console.log(unshift_arr); // 4
</script>
7. splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目
<script>
    var arr = ["张三","李四","王五","小明","小红"];
    /**************删除"王五"****************/
    var arrReplace1 = arr.splice(2,1);    
    console.log(arrReplace1);  // ["王五"] 
    console.log(arr);  // ["张三", "李四", "小明", "小红"] (原数组改变)
    //删除多个
    var arrReplace2 = arr.splice(1,2);    
    console.log(arrReplace2);  //  ["李四", "小明"] 
    console.log(arr);  // ["张三", "小红"]
    /**************添加"小刚"****************/
    var arrReplace3 = arr.splice(1,0,"小刚");
    console.log(arrReplace3);  // [] (没有删除元素,所以返回的是空数组)
    console.log(arr);  // ["张三", "小刚", "小红"]
    //添加多个
    var arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");
    console.log(arrReplace4);  // []
    console.log(arr);  // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]
    /**************"王五"替换"小刚"****************/
    var arrReplace5 = arr.splice(1,1,"王五");
    console.log(arrReplace5);  // ["小刚"]
    console.log(arr);  // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]
    //替换多个
    var arrReplace6 = arr.splice(1,4,"李四");
    console.log(arrReplace6);  // ["王五", "小红", "刘一", "陈二"]
    console.log(arr);  // ["张三", "李四", "赵六"]
</script>
8. sort() 对数组的元素进行排序
//升序
<script>
    var arr=[1,100,5,20];
    function sortNumber(a,b){return a - b};
    console.log(arr.sort(sortNumber)); //[1, 5, 20, 100]
    console.log(arr); //[1, 5, 20, 100] (原数组改变)
</script>
//降序
<script>
    var arr=[1,100,5,20];
    function sortNumber(a,b){return b - a};
    console.log(arr.sort(sortNumber)); // [100, 20, 5, 1]
    console.log(arr); // [100, 20, 5, 1] (原数组改变)
</script>
9. reverse() 用于颠倒数组中元素的顺序
<script>
    var arr=[12,25,5,20];
    console.log(arr.reverse()); // [20, 5, 25, 12]
    console.log(arr); // [20, 5, 25, 12] (原数组改变)
</script>
10. concat() 用于链接两个数组,不改变原数组
<script>
    var arr=[1,2,3,4];
    var arr2=[11,12,13] 
    var arrCopy = arr.concat(arr2);
    console.log(arr.concat()); // [1, 2, 3, 4] (复制数组)
    console.log(arrCopy); // [1, 2, 3, 4, 11, 12, 13]
    console.log(arr); // [1, 2, 3, 4] (原数组未改变)
</script>
11. slice() 数组截取,返回一个新数组
<script>
    var arr = [1,4,6,8,12];
    var arrCopy1 = arr.slice(1);    
    var arrCopy2 = arr.slice(0,4);    
    var arrCopy3 = arr.slice(1,-2);
    var arrCopy4 = arr.slice(-5,4);
    var arrCopy5 = arr.slice(-4,-1)
    console.log(arrCopy1);  // [4, 6, 8, 12]
    console.log(arrCopy2);  // [1, 4, 6, 8] 
    console.log(arrCopy3);  // [4, 6] 
    console.log(arrCopy4);  // [1, 4, 6, 8]
    console.log(arrCopy5);  // [4, 6, 8]
    console.log(arr);  // [1, 4, 6, 8, 12] (原数组未改变) 
</script>
12. indexOf()和lastIndexOf()
<script>
    var arr = [1,4,7,10,7,18,7,26];
    console.log(arr.indexOf(7));        // 2
    console.log(arr.lastIndexOf(7));    // 6
    console.log(arr.indexOf(7,4));      // 4
    console.log(arr.lastIndexOf(7,2));  // 2
    console.log(arr.indexOf(5));        // -1        
</script>
13. forEach() 对数组循环遍历,这个没有返回值;
<script>
    var Arr = [1,4,7,10];
    Arr.forEach(function(currentValue, index, arr){
        console.log(index+"--"+currentValue+"--"+(arr === Arr));        
    })
    // 输出:
    // 0--1--true
    // 1--4--true
    // 2--7--true
    // 3--10--true    
</script>
14. map() 方法返回一个新数组,数组中的元素为原数组元素调用处理后的值;
<script>
    var arr = [1,4,8,10];
    var arr2 = arr.map(function(currentValue){
        return currentValue*currentValue;
    });
    console.log(arr2);  // [1, 16, 64, 100]
</script>
15. filter() 过滤筛选返回一个新数组;
<script>
    var arr = [1,4,6,8,10];
    var result1 = arr.filter(function(currentValue){
        return currentValue>5;
    });
    console.log(result1);  // [6, 8, 10]
    var result2 = arr.filter(function(currentValue){
        return currentValue>"5";
    });
    console.log(result2);  // [6, 8, 10]
</script>
16. every() 判断数组中是否所有的都满足条件,只有所有的都满足条件才会返回true
<script>
    var arr = [1,4,6,8,10];
    var result1 = arr.every(function(currentValue){
        return currentValue< 12;
    });
    console.log(result1);  // true
    var result2 = arr.every(function(currentValue){
        return currentValue> 1;
    });
    console.log(result2);  // false
</script>
17. some() 判断数组中是否存在满足条件的项,只要有一项满足条件就会返回true
<script>
    var arr = [1,4,6,8,10];
    var result1 = arr.some(function(currentValue){
        return currentValue> 10;
    });
    console.log(result1);  // false
    var result2 = arr.some(function(currentValue){
        return currentValue> 5;
    });
    console.log(result2);  // true
</script>
18. Reduce(),ReduceRight() 两个归并方法
<script>
    var arr = [1,2,3,4,5];
    var result1 = arr.reduce(function(total,cur,index,arr){    
        console.log("total:"+total+",cur:"+cur+",index:"+index);
        return total+cur;
    });
    console.log("结果:"+result1);
    // 输出
    // total:1,cur:2,index:1
    // total:3,cur:3,index:2
    // total:6,cur:4,index:3
    // total:10,cur:5,index:4
    // 结果:15
    var result2 = arr.reduce(function(total,cur,index,arr){    
        console.log("total:"+total+",cur:"+cur+",index:"+index);
        return total+cur;
    },10);
    console.log("结果:"+result2);
    // 输出
    // total:10,cur:1,index:0
    // total:11,cur:2,index:1
    // total:13,cur:3,index:2
    // total:16,cur:4,index:3
    // total:20,cur:5,index:4
    // 结果:25
</script>
20. Array.form() 把有length的类似数组对象和可遍历的对象转成真正的数组
<script>
    let json ={
        '0':'卢',
        '1':'本',
        '2':'伟',
        length:3
    }
    let arr = Array.from(json);
    console.log(arr); // ["卢", "本", "伟"]    
</script>
21. Array.of() 将一组值转化成数组,参数不分类型,只分数量,数值为0返回空数组
<script>
    let arr1 = Array.of(1,2,3);    
    let arr2 = Array.of([1,2,3]);
    let arr3 = Array.of(undefined);
    let arr4 = Array.of();
    console.log(arr1); // [1, 2, 3]
    console.log(arr2); // [[1, 2, 3]]
    console.log(arr3); // [undefined]
    console.log(arr4); // []
</script>
22. find() 返回第一个元素的值
<script>
    let Arr = [1,2,5,7,5,9];
    let result1 = Arr.find(function(currentValue,index,arr){            
        return currentValue>5;
    });
    let result2 = Arr.find(function(currentValue,index,arr){            
        return currentValue>9;
    });
    console.log(result1); // 7
    console.log(result2); // undefined
    //实现取出数组对象id
    let Arr = [
        {
            id:1,
            name:"张三"
        },
        {
            id:2,
            name:"李四"
        }        
    ];
    let obj = Arr.find(function(currentValue,index,arr){            
        return currentValue.id===1;
    });
    console.log(obj.name); // 张三
</script>
23.findIndex() 默认的返回其索引,如果没有符合条件的返回-1
<script>
    let Arr = [1,2,5,7,5,9];
    let result1 = Arr.findIndex(function(currentValue,index,arr){            
        return currentValue>5;
    });
    let result2 = Arr.findIndex(function(currentValue,index,arr){            
        return currentValue>9;
    });
    console.log(result1); // 3
    console.log(result2); // -1
</script>
24. fill() 用一个固定的值填充数组中从开始索引到终止索引内的全部值
<script>
    let arr = [1,2,3,4,5,6];
    arr.fill(0);  // [0, 0, 0, 0, 0, 0]
    arr.fill(0,1);  // [1, 0, 0, 0, 0, 0] 
    arr.fill(0,1,2);  // [1, 0, 3, 4, 5, 6]
    arr.fill(0,-1);  // [1, 2, 3, 4, 5, 0]
    arr.fill(0,1,-1);  // [1, 0, 0, 0, 0, 6]
</script>
25. 遍历数组方法keys(),values(),entrise() 这三个数组都是返回一个遍历数组
<script>
    //keys
    let arr = ["a","b","c","d"];
    for(let i of arr.keys()){
        console.log(i);
    }
    //打印:
    // 0
    // 1
    // 2
    // 3


    //values
    let arr = ["a","b","c","d"];
    for(let i of arr.values()){
    console.log(i);
    }
    //打印:
   // a
   // b
   // c
   // d
    
    //enterise
     let arr = ["a","b","c","d"];
    for(let i of arr.entries()){
        console.log(i);
    }
    //打印:
    // [0, "a"]
    // [1, "b"]
    // [2, "c"]
    // [3, "d"]
    for(let [idx,item] of arr.entries()){
        console.log(idx+":"+item);
    }
    //打印:
    // 0:a
    // 1:b
    // 2:c
    // 3:d
</script>
26. Includes() 方法用于判断数组是否包含一个指定值,如果返回true,否则返回false
<script>
function myFunction() {
  var str = "Hello world, welcome to the Runoob.";
  var n = str.includes("world");
  document.getElementById("demo").innerHTML = n;
}
</script>

更多模拟面试

1条回帖

回帖
加载中...
话题 回帖

推荐话题

相关热帖

笔经面经近期热帖

近期精华帖

热门推荐