面试基本以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) 回帖