让我印象深入的 JavaScript 面试题

1.前言

对于一个web前端来讲，面试的时候，不免会遇到javascript的面试题。就我本身而言。有几道面试题，有些是我面试遇到的，有些是在网上看到的，可是都印象深入。今天就来简单分析一下我遇到的，印象深入的一些面试题！主要目的但愿能让小伙伴学到一些东西，如过之后遇到相似的状况，就记得不要掉坑了！

2.预解析

预解析：在当前做用域下，js运行以前，会把带有var和function关键字的事先声明，但不会赋值（我的看法）

对预解析印象深入，并非由于难，而是要细心，稍微一粗心，答案就写错了！我遇到预解析的题目不止一道，有两道我如今还能记住，我说下！

2-1.预解析1

alert(a)
a();
var a=3;
function a(){
    alert(10)
}   
alert(a)
a=6;
a();  

------------分割线------------------

alert(a)
a();
var a=3;
var a=function(){
    alert(10)
}   
alert(a)
a=6;
a(); 
复制代码

看到这个代码，当时答错了。后来请教了朋友，而后本身再理解下，就理顺了！
考点其实就两个，第一变量声明提早，第二函数声明优先于变量声明！
下面我简单分析一下，
第一部分运行结果：
1.函数声明优先于变量声明，因此，刚开始，a就是function a(){alert(10)} ，就会看到这个函数。
2.a()，执行函数，就是出现alert(10)
3.执行了var a=3; 因此alert(a)就是显示3
4.因为a不是一个函数了，因此往下在执行到a()的时候， 报错。
第二部分运行结果：
1.underfind
2.报错
在以前说过，预解析是把带有var和function关键字的事先声明，但不会赋值。因此一开始是underfind，而后报错是由于执行到a()的时候，a并非一个函数。

//函数表达式，和变量声明同等
var a=function(){
    alert(10)
} 
//函数声明，优于变量声明    
function a(){
    alert(10)
} 
复制代码

2-2.预解析和做用域

var a=0;
function aa(){
    alert(a)
    a=3
}
//结果是什么都没发生，由于要执行aa函数才会执行alert(0)

------------分割线1------------------

var a=0;
function aa(){
    alert(a)
    var a=3
}
aa();
//underfind  在aa函数里面，有var a=3，那么在aa做用域里面，就是把a这个变量声明提早，可是不会赋值，因此是underfind

------------分割线2------------------

var a=0;
function aa(a){
    alert(a)
    var a=3
}
aa(5)
alert(a)
//5,0   在函数体内，参数a的优先级高于变量a

------------分割线3------------------

var a=0;
function aa(a){
    alert(a)
    a=3
}
aa(5)
alert(a)
//5,0   在函数体内，执行alert(a)和a=3,修改的的并非全局变量a，而是参数a

------------分割线4------------------

var a=0;
function aa(a){
    alert(a)
    var a=3
    alert(a)
}
aa(5)
//5,3
//这个我也有点不理解，请教网上的说法，有两个答案(小伙伴若是知道怎么理解，欢迎在评论上指点)
//1.参数优先级高于变量声明，因此 变量a的声明其实被忽略了，此时至关于
//var a=0;
//function aa(a){
//  var a=5;
//    alert(a)
//    a=3
//    alert(a)
//}
//aa(5)

//2.形参和局部变量优先级同样，此时至关于
//var a=0;
//function aa(a){
//  var a;    先声明
//  a=5      因为形参和变量名称同样，覆盖了！
//    alert(a)
//    a=3
//    alert(a)
//}
//aa(5)

------------分割线5------------------

var a=0;
function aa(a){
    alert(a)
    a=3
    alert(a)
}
aa()
alert(a)
//underfind  3  0 
//首先，参数优先级高于全局变量，因为没传参数，因此是underfind
//a=3，实际上修改的时形参a的值，并非全局变量a，往下alert(a)也是形参a
//最后的alert(a)，你懂的
复制代码

3.循环与递归

3-1.费波纳茨数组

这个很少说了，很简单，可是很经典。就是当前项等于前两项的和

var arr=[];
for(var i=0;i<10;i++ ){
    i<=1?arr.push(1):arr.push(arr[i-1]+arr[i-2]);
}
console.log(arr)复制代码

3-2.数据排列

好比 123454321 23456765432
这个怎么作呢？当时个人作法的分两步写，先展现前面，再展现后面
代码是

//01234543210
//先展现前面的   01234
//n：开始的数字    m:结束的数字
function num1(n,m){
    for(var i=n;i<m;i++){
        //再展现后面的 543210
        console.log(i);
        if(i===m-1){
            num2(n,m)
        }
    }
}
function num2(n,m){
    for(var i=m;i>=n;i--){
        console.log(i)
    }
}
num1(2,5)  //2345432复制代码

这样代码太多了，后来研究了这种

function num(n,m){
    console.log(n);
    if(n<m){
        num(n+1,m);
        console.log(n);
    }
}
num(2,5)  //2345432复制代码

解释以下

1.首先执行num(2,5)，就是
console.log(2); ->  num(3,5);  ->  console.log(2);      
//执行num(3,5);  就是是至关于   console.log(3); -> num(4,5); -> console.log(3); 下面以此类推
console.log(2); -> console.log(3); -> num(4,5); -> console.log(3); ->  console.log(2);  

而后就是

console.log(2); -> console.log(3); -> console.log(4); -> num(5,5); -> console.log(4); -> console.log(3); ->  console.log(2);

最后就是

console.log(2); -> console.log(3); -> console.log(4); -> console.log(5); -> console.log(4); -> console.log(3); ->  console.log(2);

复制代码

4.其它

4-1

function foo1()
{
 return {
     bar: "hello"
 };
}
 
function foo2()
{
 return
 {
     bar: "hello"
 };
}
var a=foo1();
var b=foo2();
console.log(a) //Object {bar: "hello"}
console.log(b) //underfind
//仔细看就知道了复制代码

4-2

网上看到的题目，我本身改造下 80%应聘者都不及格的JS面试题

for (var i = 0; i < 5; i++) {
  console.log(i);
}
console.log(i);
//这个你们应该很快就知道了，012345



for (var i = 0; i < 5; i++) {
 setTimeout(function() {
  console.log(i);
 }, 1000);
}
console.log(i);
//这个你们就要当心一点了，答案是5    55555
//在setTimeout执行以前，for循环早就执行完了，i的值早已是5了，因此一开始是执行，最后面的console.log(i);
//在for循环的时候一会儿自定义5个setTimeout，大概一秒后，就是输出55555



for (var i = 0; i < 5; i++) {
 (function(j) { // j = i
  setTimeout(function() {
   console.log(j);
  }, 1000);
 })(i);
}
console.log(i); 
//这里的解析和上面基本同样，只是用闭包来记录每一次循环的i,
//因此答案是5     01234



var output = function (i) {
 setTimeout(function() {
  console.log(i);
 }, 1000);
};
 
for (var i = 0; i < 5; i++) {
 output(i); // 这里传过去的 i 值被复制了
}
console.log(i);

//这里的解析和上面基本同样，把i当参数传进output，记录每一次循环的i,
//因此答案是5     01234



for (let i = 0; i < 5; i++) {
 setTimeout(function() {
  console.log(i);
 }, 1000);
}
console.log(i);
//结果是  报错   01234 
//注意i是用let定义的，不是var复制代码

5.小结

首先，要说一个就是这些是我本身遇到的题目里面，印象比较深入的一些题目，并不必定是常见的题目。
而后，这篇文章能够说是个人一个笔记，记录着我遇到过的题目。我发这样的面试题文章给小伙伴看，目的不是为了让小伙伴们记住题目和答案，或者是应付面试，这样没有意义，也不现实！个人目的是为了让你们能够学习一下，经过题目来知道一些原理和运行的机制，或者是知道一些可能的‘陷阱’。
另外，我遇到过的实际的操做题也不少，好比数组去重，打乱数组，统计数组各个元素出现的次数， 字符串各个字符的出现次数，获取地址连接的各个参数等等。这些题目不只在面试题出现的比较多，在实际项目开发也会常常用到，小伙伴能够本身学习。固然我本身也有封装过一些函数，就是实现上面说的那些操做的函数，这个我近期也会写文章，记录我封装过哪些函数，封装过哪些经常使用的功能，到时候再分享。有什么须要改正的，或者好的建议，也欢迎指出！

-------------------------华丽的分割线--------------------
想了解更多，关注关注个人微信公众号：守候书阁