前端面试题总结（一）

本文是根据本人自身参加的一些面试以及平时看到的前端面试题进行的总结：
注：由于没有用手机拍照记录，有些是凭记忆记下来的，可能描述不太准确的地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>