2019前端面试题总结
常考的数组方法：
（1）、arr.join():将数组元素串起来组成字符串
（2）、arr.sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
（3）、arr.reverse()：反转数组项的顺序。
（4）、arr.concat():将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
（5）、arr.slice():
返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。 如果有参数是负数，则把负数项加数组的长度。 例如：arr.slice(-1,-4)==arr.slice(arr.length-1,arr.length-4);
（6）、arr.splice():
删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。(不会生成一个副本，而是会直接改变原数组，并且会返回一个新的数组)
（7）、indexOf()和 lastIndexOf()：（返回索引值）
indexOf(从左向右)：
一个参数：要查找项
两个参数：第一个参数表示要查找的项，第二个表示要查找的开始索引。查询不到会返回-1
lastIndexOf(从右向左)：但是数索引的时候还是要从左往右数
（8）、forEach():
对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x,index,b){
console.log(x,index,b);
})
（9）、map():
指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。这个方法有返回值。
（10）、filter():
“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
（11）、every()和some()
every:对数组的每一项都满足条件才返回true；
some:对数组的其中一项满足条件就返回true；
详情参考：js数组方法大全
1、随机打乱一个字符串
//随机打乱一个字符串
var str="idfjdifndi";
function suffle(str) {
var arr=str.split("");//把字符串变成数组
var len=arr.length;
for(var i=0;i<len;i++){
var randomIndex=Math.floor(Math.random()*len);//随机生成一个下标
var itemIndex=arr[randomIndex];
arr[randomIndex]=arr[i];
arr[i]=itemIndex;
}
return arr.join().replace(/,/g,"");//替换掉生成的字符串中的逗号。
}
console.log(suffle(str)); //typeof:string
二、递归实现1x2+3x4+5x6+…+(n-1)n
//注意审题是递归实现，而不是用for循环
function digui(n) {
if(n==1){
return 1;
}
return n*digui(n-1);
}
console.log(digui(5));
三、打印题：
var arr1=new Array(6);//[ , , , , , ]长度为6的空字符串
var arr2=new Array(6,6);//[6,6]
for(var i=0;i<10;i++){
setTimeout(function () {
console.log(i)
},i*1000)
}//10个10
for(let i=0;i<10;i++){
setTimeout(function () {
console.log(i)
},i*1000)
}//0,1,2,3,4,5,6,7,8,9
var foo=1;
(function () {
foo=2;
function foo() {
}
console.log(foo);//2
})();
console.log(foo);//1
Array.isArray(Array.prototype)//true
console.log(Array.prototype)//typeOf:Object
==只有Array.prototype是数组，其他是对象==
[1,2,3].map(parseInt)//[1, NaN, NaN]
四、逆序一个字符串
function reserveStr(str) {
return str.split('').reverse().join('');
}
console.log(reserveStr("nice"));
五、输出字符串中没有重复的项
//比较愚蠢的办法
var str='abcabagmmfd'//输出cgfd
function noRepeatString(str){
var arr=str.split('');
var arr1=[];
var arr2=[];
var arr3=[];
var arr4=[];
/* arr.forEach(function (obj,n,m) {
//console.log(obj);
if(arr1.indexOf(obj)==-1){
t++;
console.log(t);
arr1.push(obj);
}
});*/
for(var i=0;i<arr.length;i++){
if(arr1.indexOf(arr[i])==-1){
arr1.push(arr[i]);
}
}
for(var i=0;i<arr1.length;i++) {
var t=0;
for (var j = 0; j< arr.length; j++) {
if (arr1[i] == arr[j]) {
t++;
if(t>1){
arr2.push(arr1[i])
}
}
}
}
for(var i=0;i<arr2.length;i++){
if(arr3.indexOf(arr2[i])==-1){
arr3.push(arr2[i]);
}
}
console.log(arr3);
for(var i=0;i<arr1.length;i++){
if(arr3.indexOf(arr1[i])==-1){
arr4.push(arr1[i]);
}
}
return arr4.join('');
}
console.log(noRepeatString(str));
//比较优秀的方法
var str='abcabagmmfd';
function noRepeatStr2(str){
var json={};
var arrBase=str.split('');
var result='';
for(var x in arrBase){
if(json[arrBase[x]]){
json[arrBase[x]]++;
}else{
json[arrBase[x]]=1;
}
}
for(var s in json){
if(json[s]==1){
result+=s
}
}
}
console.log(noRepeatStr2(str));
六、斐波那契数列的前n项
一个数列：1、1、2、3、5、8、13、21、34、……求出第100个数是多少？
function fib(num) {
var arr = [];
if(num == 1){
return arr = [1];
}else if(num == 2){
return arr = [1,1];
}else{
arr = [1,1];
var a=1;
var b=1;
var c=2;
var arrlen =arr.length;
for(var i=2;i<num;i++){
arr.push(c);
a=b;
b=c;
c=a+b;
}
return arr[num-1];
}
}
console.log(fib(100));
//2019/03/09再更！！！！
七、 ES6模块化如何使用？开发环境如何打包？
如何使用：
1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3：模块内部的变量或者函数可以通过export导出；
4：一个模块可以导入别的模块
如何打包：
首先生成项目目录：- app -源代码目录
- main.js -webpack的读取文件的主入口
- source -存放需要webpack处理的文件和代码
- build -webpack配置文件
- node_modules -node模块安装目录
- public -打包时，默认将文件生成到public目录
- .babelrc -babel的配置文件
- package.json -node配置文件
八、、Class和普通构造函数的区别：
- Class 在语法上更加贴合面向对象的写法
- Class在实现继承上更加易读、易理解
- 更易于写java等后端语言
4.本质还是语法糖，使用prototype
九、 Promise的基本使用和原理：
基本使用（代码）：
function 函数名(){
return new Promise(function(resolve, reject) {
// … some code
if (/* 异步操作成功 */){
resolve(value); // 异步操作成功时调用，把结果作为参数传递出去
} else {
reject(error); // 异步失败时调用，把错误作为参数传递出去
}
}).then();
}
原理：
构造函数Promise接受一个函数resolver，可以理解为传入一个异步任务，resolver接受两个参数，一个是成功时的回调，一个是失败时的回调，这两参数和通过then传入的参数是对等的。
其次是then的实现，由于Promise要求then必须返回一个promise，所以在then调用的时候会新生成一个promise，挂在当前promise的_next上，同一个promise多次调用都只会返回之前生成的_next。
由于then方法接受的两个参数都是可选的，而且类型也没限制，可以是函数，也可以是一个具体的值，还可以是另一个promise。
十、总结一下ES6其他常用功能：
- Default Parameters（默认参数）：
//运用ES6的默认参数
function sayHello2(name=‘tom’){ //如果没有传这个参数，才会有默认值， console.log(Hello ${name}); //模板字符串
} - Template Literals （模板文本）
- Multi-line Strings （多行字符串）
- Destructuring Assignment （解构赋值）：
直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中：
function getVal() {
return [1, 2];
}
var [x,y] = getVal(); //函数返回值的解构
console.log(‘x:’+x+’, y:’+y); //输出：x:1, y:2 - Enhanced Object Literals （增强的对象文本）
- Arrow Functions （箭头函数）
- Promise
- Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
- Classes（类）
- Modules（模块）
十一、什么是单线程？和异步有什么关系？
单线程：单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。
和异步的关系：js是单线程的，是因为他的宿主环境-浏览器是多线程的，通过事件驱动才使js有了异步属性，浏览器会为js创建一个主线程来执行任务(函数)，但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行；但前端的某些任务是非常耗时的（网络请求，定时器等），所以浏览器维这些任务另外开辟了新的线程并且这些任务使异步的；所以单线程和异步是必然的关系。
十二、解决JS异步的方案有哪些？
1、callback
2、Promise’
3、Generator
4、async/await
十三、diff算法
JS在渲染页面的时候会先生成VNode(Js对象)，这个js对象中包含节点的基本属性如标签名，属性，子元素，文本信息等，状态变更的时候会从新构建这个JavaScript对象，然后呢，用新渲染的对象和旧的对象去对比， 记录两棵树的差异（patches），记录下来的就是我们需要改变的地方。
十四、在一个字符串中中匹配网址
var str="我就是喜欢https://www.httalk.top找出https://www.httalk.xin/blog/index.html来啊！";
var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/g;
console.log(str.match(reg));//返回一个所有匹配项的数组