前端面試題

咱們在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方法