面試中遇到的原生js題總結

最近面試，遇到不少js相關的面試題，總結一下。

一、js 去重
1) indexOf

Array.prototype.unique = function(){
    var result = [];
    var len = this.length;
    for(var i = 0; i<len; i++){
        if(result.indexOf(this[i])<0){
            result.push(this[i]);
        }
    }
    return result;
}
var arr = [1,2,3,2,1,3,2,1];
arr.unique();//arr = [1,2,3]

• 在IE六、七、8不支持indexOf方法，能夠在Array原型鏈上擴展indexOf方法

if(!Array.prototype.indexOf){    
   Array.prototype.indexOf = function(val){    
       var value = this;    
       for(var i =0; i < value.length; i++){    
          if(value[i] == val) return i;    
       }    
      return -1;    
   };    
}

2)數組先排序

Array.prototype.unique = function(){
    this.sort();
    var result = [this[0]];
    var len = this.length;
    for(var i = 0; i<len; i++){
        if(this[i] !== result[result.length-1]){
            result.push(this[i]);
        }
    }
    return result;
}
var arr = [1,2,3,2,1,3,2,1];
arr.unique();//arr = [1,2,3]

3)ES6新方法set和Array.from

function unique(arr){
  return Array.from(new Set(arr));
}

• set是一種新的數據結構，它能夠接收一個數組或者是類數組對象，自動去重其中的重複項目，返回的是json對象
• Array.from能夠把類數組對象、可迭代對象轉化爲數組

二、js 字符串轉爲駝峯法

function tansform(str){
    var re = /-(\w)/g;
    return str.replace(re,function($0,$1){//replace 中正則表達式$0,$1,$n等表明正則表達式內小括號的匹配值，從$1開始，$0表明正則表達式的總體值
        return $1.toUpperCase();
    });
}
var str = 'border-left-color';
tansform(str);//borderLeftColor

三、查找字符串中最多的字符及個數

function repeatCharNum(str){
    var arr = str.split('');
    str = arr.sort().join('');
    var re = /(\w)\1+/g;
    var index = 0;
    var value = '';
    str.replace(re,function($0,$1){
        if(index < $0.length){
            index = $0.length;
            value = $1 ;
        }
    });
    alert ('最多字符'+value+'出現的次數'+index);
}

四、編寫一個函數，將輸入的參數中的數字字符追加爲一個數字字符串，參數輸入不肯定

function getStrChange(){
  var len = arguments.length;//參數不肯定時使用arguments關鍵字
  var re = /^\d+$/;
  var str = '';debugger;
  for(var i =0; i< len; i++){
    if(!(re.test(arguments[i]))){ 
      continue;
    }
    if(i == len-1){
      str = str+arguments[i];
    }else{
      str = str+arguments[i]+',';
    }  
  }
  return str;
}
alert(getStrChange('1','a','45','b','3',1));//('1,45,3,1')

五、var和function的預解析問題,以及變量和function的前後順序的問題

// 如下代碼執行輸出結果是什麼
    function b () {
        console.log(a);// function a(){}
        var a = 10;
        function a() {};
        a = 100;
        console.log(a);//100
    }
    b();

    function c () {
        console.log(a);//function a(){}
        function a() {};
        var a = 10;
        a = 100;
        console.log(a);//100
    }
    c();

    (function d (num) {
        console.log(num);//100
        var num = 10;
    }(100))

    (function e (num) {
        console.log(num);//function num () {};
        var num = 10;
        function num () {};
    }(100))

    (function f (num) {
        function num () {};
        console.log(num);//function num () {};
        var num =10
        console.log(num);//10
    }(100))

    //仍然是預解析(在與解析過程當中還要考慮一下當前變量的做用於)
    function m () {
        console.log(a1); // underfined
        console.log(a2); // underfined
        console.log(b1); // underfined
        console.log(b2); // underfined
        if(false) {
            function b1 (){};
            var a1 = 10;
        }
        if(true) {
            function b2 (){};
            var a2 = 10;
        }
        console.log(a1); // underfined
        console.log(a2); // 10
        console.log(b1); // underfined
        console.log(b2); // function
    }
    m();

    function n() {
        if(2>1) {
            arr = 10;
            brr = 10;
            let arr;//要在嚴格模式'use strict'下運行
            var brr;
            console.log(arr);
            console.log(brr);
        }
    }
    n(); // ReferenceError

• 函數聲明：function a(){}能夠提早解析；
• 函數表達式：var b = function a(){} : 命名函數表達式
  var b = function (){} ：匿名函數表達式
  (function a(){}) : 表達式
  位運算符：（爲了區分函數表達式和函數聲明）
  ~funtion a(){} : 表達式
  -funtion a(){} : 表達式
  +funtion a(){} : 表達式
  ！funtion a(){} : 表達式
  （不能夠被提早解析）
• 函數表達式和函數聲明的區別：函數聲明能夠提早被解析，函數表達式不能夠，須要在引用前提早聲明；函數表達式能夠直接後面加括號執行，函數聲明不能夠。
• let關鍵字要在嚴格模式'use strict'下運行

六、判斷數據類型

function gettype(nm){
    return Object.prototype.toString.call(nm);
} 
   console.log(gettype(3)); //[object number]

• js基礎數據類型：number string null undefined string boolean，存放在棧內存
• js引用數據類型：Object （Array，Date，RegExp，Function），存放在堆內存

七、如何將arguments轉爲array

function changeArg(arguments){
    return Array.prototype.slice.apply(arguments);
}

八、如何判斷array對象
可使用Array.isArray()或者Object.prototype.toString.call()判斷

九、原生dom實現刪除dom結點

function deleteNode(node){
    if(!node) return;
    if(node.parentNode){
        node.parentNode.removeChild(node);
    }
}

十、給button綁定click事件

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //全部主流瀏覽器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

• 還能夠用onclick()綁定，可是onclick()混合了js和html，不建議使用。
• addEventListener("click", function,useCapture)，useCapture默認false，表明事件冒泡階段執行，true表明事件捕獲階段執行。
• addEventListener和onclick的區別：addEventListener能夠添加多個事件，不會被覆蓋；onclick只能夠一個事件，重複添加，後面一個會覆蓋前面一個的事件。

十一、排序算法
1）冒泡排序

function bubbleSort(arr){
  for(var i = 0;i< arr.length-1;i++){
    for(j=i+1;j<arr.length;j++){
      if(arr[i]>arr[j]){
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
      }
    }
  }
  return arr;
}

2）快速排序

function quickSort(arr){
  if(arr.length<=1){
    return arr;
  }
  var len = Math.floor(arr.length/2);
  var cur = arr.splice(len,1);
  var left = [];
  var right = [];
  for(var i=0;i<arr.length;i++){
    if(cur>arr[i]){
      left.push(arr[i]);
    }else{
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat(cur,quickSort(right));
}