前端面试题

咱们在js的学习中，每每不少东西看过以后，一段时间不用，就忘记了。或者当时就没有深刻的理解，能促使咱们不断深刻学习的动力最好的办法每每参加些面试，能找到本身的不足也能加深以前学的知识点的记忆。

整理最近的一些面试题

（1）请问js有哪些数据数据类型，并画出内存图

   js有5种简单的数据类型（也称为基本数据类型）Undefined、Null、Boolean、Number、String
   复杂的数据类型（即引用数据类型） 包含Object对象，array对象和Function,Date等

  举个例子
  引用类型数据在栈内存中保存的其实是对象在堆内存中的引用地址。经过这个引用地址能够快速查找到保存中堆内存中的对象。

　　var obj1 = new Object();

　　var obj2 = obj1;

　　obj2.name = "我有名字了";

　　console.log(obj1.name); // 我有名字了

obj1赋值给onj2，实际上这个堆内存对象在栈内存的引用地址复制了一份给了obj2，可是实际上他们共同指向了同一个堆内存对象。实际上改变的是堆内存对象。

（2）下面代码输出结果

for (var i = 1; i <= 4; i++) {
        console.log(i)
        setTimeout(function timer() {
            console.log(i)  // 5,5,5,5,5
        }, 1000)
    }

答案：// 5,5,5,5,5

 

（3）下面代码输出结果

var foo = "hello";
    (function(){
      var bar = " word"
      console.log(foo+bar)
    })()
    console.log(foo+bar)

//答案：报错bar is not defined

（4）下面代码输出结果

    var bar=true
    console.log(bar+0)       //1
    console.log(bar + "xyz")    //truexyz
    console.log(bar + true)     //2
    console.log(bar + false)    //1
    console.log(undefined==null)  //true
    console.log(1==true)  //true
    console.log(2==true)  //false
    console.log(0==false)  //true
    console.log(0=='')  //true
    console.log(NaN==NaN)  //false
    console.log([]==false)  //true
    console.log([]==![])  //true

补充一些可能会考到的例子，

// Boolean + Number -> 数字相加
true + 1 // 2

// Boolean + Boolean -> 数字相加
false + false // 0

// Number + String -> 字符串链接
5 + "foo" // "5foo"

// String + Boolean -> 字符串链接
"foo" + false // "foofalse"

// String + String -> 字符串链接
"foo" + "bar" // "foobar"

减法 (-)

减法运算符使两个操做数相减，结果是它们的差值。减法字符串都会试图转成数字
-"1"//1
5 - 3 // 2
3 - 5 // -2
"15"-2 //13
"foo" - 3 // NaN

'5' + 3  // 53  若是字符在前面，而且后面是加号（+）就是字符串拼接

+3     // 3
+"3"   // 3
+true  // 1
+false // 0
+null  // 0
+function(val){ return val;} //NaN

（5）假设有这样一个数组[1,2,3,4,5]，如今想要左移或者右移N位，好比左移1位变成[2,3,4,5,1]，右移1位变成[5,1,2,3,4]，请写一个函数实现

思路：假如左移的状况，若是左移2位，把原数组的左边2个元素删除，并把删除的2个元素存储在新建的数组中，最后把原数组删除后的数组与删除的数组链接起来，右移的状况也是把右移数量的元素删除，并把删除后的元素存储起来，最后链接。

完整的例子：

 var data =["blue","green","red","purple"];
    var dataLength=data.length
    var deleteData;
    var resultData;
   function move(n){
      if(n>=0){
        deleteData=data.splice(0,n);
        resultData=data.concat(deleteData);
        console.log(resultData);
        }else{
          deleteData=data.splice(dataLength+n,-n);
          resultData=deleteData.concat(data)
          console.log(resultData);
        }
    }
    move(3)

简单解释： splice是改变原数组的，deleteData=data.splice(0,n);是存储删除的数组

（6）有这样一个URL http://www.baidu.com/item.html?a=1&b=2&c=3，请写一段js程序提取url中的各个GET参数（参数名和参数个数不肯定），将其按key-value形式返回到一个json结构中

思路：

一、找出“？”的index 位置(url.indexOf("?"))

二、截取“？”后面的字符串（可使用slice，substring，substr）

三、使用split把字符串分隔成字符串数组（str.split("&")）

四、循环字符串数组，在循环内部主要代码

for(i=0;i<data.length;i++){

var data1=data[i];
data2=data1.split("=")
key=data2[0];
value=data2[1];
JosnObject.key=value

}

 function sidEffecting(ary) {
        ary[0] = ary[2];
    }

    function bar(a, b, c) {
        c = 10
        sidEffecting(arguments);
        return a + b + c;
    }
    console.log(bar(1, 1, 1))

 //答案：21，Javascrip中每一个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，即arguments为[1,1,1]，执行sidEffecting函数，把第三个元素值赋给第一个元素，全部结果是10+1+10=21

写一个Number类型的方法

 Number.prototype.add = function(num) {
        return this + num;
    }
    var num = (5).add(3)
    console.log(num)  //8

    var a = { n: 1 };
    var b = a;  //a与b指向同一个对象
    a.x = a = { n: 2 };
    或者a=a.x={n:2}
    console.log(a.x); // --> undefined  
    console.log(b.x); // --> {n:2}
    连等赋值操做总结：从上面的例子中咱们能够看到a.x = a = { n: 2 }与a=a.x={n:2}最终的结果是相同的，a.x = a = { n: 2 }分解为a.x=a与a={n:2}  a=a.x={n:2}分解为a=a.x与a.x={n:2}因为a=a.x,其中的a.x没有值，继续日后查看，查出a.x被赋值{n:2},则a指向{n:2}这个对象，而后执行a.x={n:2}此处的a指向上面的{n:1}对象,对{n:1}对象再赋x属性与值

 var x = 20;     var temp = {         x: 40,         foo: function() {             var x = 10;             console.log(this.x) ;         }     };     //(temp.foo)() //40     temp.foo() //40  this指向temp这个对象，这个对象包含x属性与foo方法