前端面試題總結（一）

本文是根據本人自身參加的一些面試以及平時看到的前端面試題進行的總結：
注：由於沒有用手機拍照記錄，有些是憑記憶記下來的，可能描述不太準確的地script方敬請諒解

1、請用 javascript 編寫“打印出九九乘法表”的邏輯代碼

<script type="text/javascript">
var str=" ";
  for(var i=1;i<=9;i++)
  {
    for(var j=1;j<=i;j++)
    {
      str+=i+"*"+j+"="+i*j+" ";
    }
    str+="<br />"
  }
  document.write(str);
</script>

或

<script type="text/javascript">
  for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= 9; j++) {
      document.write(i + "*" + j + "=" + i * j + " ")
      if (i === j) {
        document.write("<br/>");
        break;
      }
    }
  }
</script>

2、創建10個a標籤，讓其內容爲標籤對應的序號

<script type="text/javascript">
  var i;
 for(i = 0; i < 10;i++) {
   function(i){
     var aEle = document.createElement('a');
     aEle.innerHTML = i;
     document.body.appendChild(aEle)
   }(i)
 }
</script>

3、用javascript刪除字符串兩端的空格

<script type="text/javascript">
　　 function trim(str){ //刪除左右兩端的空格
　　     return str.replace(/(^\s*)|(\s*$)/g, "");
　　 }
　　 function ltrim(str){ //刪除左邊的空格
　　     return str.replace(/(^\s*)/g,"");
　　 }
　　 function rtrim(str){ //刪除右邊的空格
　　     return str.replace(/(\s*$)/g,"");
　　 }
</script>

或  

<script type="text/javascript">
  function trim(str){ 
    str = str.replace(/^(\s|\u00A0)+/,''); 
    for(var i=str.length-1; i>=0; i--){ 
      if(/\S/.test(str.charAt(i))){ 
        str = str.substring(0, i+1); 
        break; 
      } 
    } 
   return str; 
} 
</script>

4、javascript中變量類型有哪些？

String、Number、Boolean、Function、Object、Undefined、Array、Null，其中Function、Object（Null）、Array爲引用類型，其他爲值類型

5、對數組進行隨機排序

<script>
var arr1 = [1,3,4,5,2,6,7];
var arr2.sort(function(a,b){
// 升序排列
return a-b;
// 降序排列
return b-a；
})
</script>

6、有個長度未知的數組，如果它的長度爲0就將數字1放入數組中，否則按照先進後出的隊列規則讓第一個元素出隊

Arr.length === 0 ? Arr.push(1) : Arr.splice(0,1) 或 Arr.length === 0 ? Arr.push(1) : Arr.shift(Arr[0])

7、下面的代碼會輸出什麼？

<script>
  var test = (function(a){
    this.a = a;
    return function(b){
      return this.a +b;
    }
  }(function(a,b){
    return a;
  }(1,2)))
  console.log(test(4))
</script>

8、請把<ul><li>第一行</li><li>第二行</li>...<li>第10行</li></ul> 插入body裏面，注：需要考慮性能問題

<script>
  var lis = '';
  var ulEle = document.createElement('ul');
  for(var i=1; i<=10; i++){
    lis += "<li>第"+i+"行</li>";
  }
  ulEle.innerHTML = lis;
  document.body.appendChild(ulEle )
</script>

由於javascript操作dom消耗較大，要提高性能就要減少dom操作

9、不使用loop循環，創建一個長度爲100的數組，並且每個元素的值等於它的下標

<script>
  var a = new Array(100).join(',').split(',');
  a.map(function(item,index,arr){
    return arr[index] = index ;
  })
  console.log(a)
</script>

10、實現對數組進行亂序

<script>
  var arr = [1,2,3,4,5,6,7,8,9],
    r = arr.sort(function(){
      return Math.random() > .5 ? -1:1;
    });
  console.log(r);
</script>

11、有一個長度爲100的數組，請以優雅的方式求出該數組的前10個元素之和

<script>
  var arr = [1,2,3,4,5,6,7,8,9,23,23,24,556];
  var arr1 = arr.slice(0,10),sum = 0;
  sum = arr1.reduce(function(preValue,curValue){
    return preValue + curValue
  })
</script>

雖然上面使用的for循環能夠達到目的，但是效率較低，考慮優雅的方式下面用數組的 reduce實現

<script>
  var arr = [1,2,3,4,5,6,7,8,9,23,23,24,556];
  var arr1 = arr.slice(0,10),sum = 0;
  sum = arr1.reduce(function(preValue,curValue){
    return preValue + curValue
  })
</script>

12、當項目的某個模塊發生問題了，你是怎麼定位錯誤的？你常用的調試工具是什麼？

主觀題，可以根據自己的實際情況回答。我這裏給出自己的理解：打開chrome的控制檯打斷點進行調試，常用調試工具有Chrome的開發者工具，firefox插件Firebug（firefox瀏覽器 - 添加附件 - 搜索firebug - 安裝，然後在firefox瀏覽器的右上角會有個蟲子的圖標，那個就是firebug了。除此之外，firefox也內置了開發者的工具，可以從設置按鈕打開開發者工具。），IE的開發者工具等等

13、我們在跟後端進行交互式，怎樣避免嵌套太深問題？

使用es6的promise

14、判斷一個字符串是否是迴文？

首先說明一下什麼是迴文，迴文指的是把相同的詞彙或句子在下文調換位置，產生首尾迴環的情趣。例如：mamam redivider

<script>
 function checkPalindrom(str) {
   return str == str.split('').reverse().join('');
 }
</script>

15、去掉一組數組中重複的值

<script>
 let unique = function(arr){
   let hashTable = {};
   let data = [];
   for(let i=0,len=arr.length; i<len; i++){
     if(!hashTable[arr[i]]){
       hashTable[arr[i]] = true;
       data.push(arr[i]);
     }
   }
   return data
 }

或 

<script>
  var unique = function(arr){
    var data = [];    
    for(var i=0,len=arr.length; i<len; i++){
      if(data.indexOf(arr[i]) == -1){
        data.push(arr[i]);
      }
    }
    return data;
  }
</script>

或 

<script>
var unique = function(arr){
    arr.sort();
    var data = [];
    data[0] = arr[0];
    for(var i=0,len=arr.length; i<len; i++){
      //判斷相鄰兩個元素是否相等，如果相等說明數據重複，否則將元素寫入結果數組
      if(arr[i] !== arr[i- 1]){
        data.push(arr[i]);
      }
    }
    return data;
  }
</script>