前端工程師面試問題概括（3、代碼類）

其餘隨筆：

前端工程師面試問題概括（1、問答類html/css/js基礎）

前端工程師面試問題概括（2、問答類JQ相關）

（二）、手寫代碼 

1 、數組去重的實現

//方法一
var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);//[0, 2, 3, 4]

//方法二
var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);//[2, 3, 4, 5, 6]

//方法三
var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
    return self.indexOf(element) === index;
});
console.log(arr2);//[2, 3, 4, 5, 6]

filter方法用於過濾數組成員，知足條件的成員組成一個新數組返回。 
它的參數是一個函數，全部數組成員依次執行該函數，返回結果爲true的成員組成一個新數組返回。該方法不會改變原數組。

filter方法的參數函數能夠接受三個參數：當前成員，當前位置和整個數組。

indexOf方法返回給定元素在數組中第一次出現的位置，若是沒有出現則返回-1。

//思路：先將原數組排序，在與相鄰的進行比較，若是不一樣則存入新數組

function unique(arr){

　　var arr2 = arr.sort();

　　var res = [arr2[0]];

　　for(var i=1;i<arr2.length;i++){

　　　　if(arr2[i] !== res[res.length-1]){

　　　　　　res.push(arr2[i]);

　　　　}

　　}

　　return res;

}

//先排序後去重

Array.prototype.unique = function(){

var result = [this[0]];
    this.sort(); this.forEach(function(v){ v != result[result.length - 1] && result.push(v); //僅與result最後一個元素比較  }); } //利用ES6 Set去重 //ES6環境下 Array.prototype.unique = function(){ return [...new Set(this)]; }

2 、快速排序的實現

「快速排序」的思想很簡單，整個排序過程只須要三步：

　　（1）在數據集之中，找一個基準點

　　（2）創建兩個數組，分別存儲左邊和右邊的數組

　　（3）利用遞歸進行下次比較

 <script type="text/javascript">
 
        function quickSort(arr){
            if(arr.length<=1){ return arr;//若是數組只有一個數，就直接返回；  } var num = Math.floor(arr.length/2);//找到中間數的索引值，若是是浮點數，則向下取整 var numValue = arr.splice(num,1);//找到中間數的值 var left = []; var right = []; for(var i=0;i<arr.length;i++){ if(arr[i]<numValue){ left.push(arr[i]);//基準點的左邊的數傳到左邊數組  } else{ right.push(arr[i]);//基準點的右邊的數傳到右邊數組  } } return quickSort(left).concat([numValue],quickSort(right));//遞歸不斷重複比較  } alert(quickSort([32,45,37,16,2,87]));//彈出「2,16,32,37,45,87」 </script>

//方法一(儘量不用js數組方法）
function quickSort(arr){
    qSort(arr,0,arr.length - 1); } function qSort(arr,low,high){ if(low < high){ var partKey = partition(arr,low,high); qSort(arr,low, partKey - 1); qSort(arr,partKey + 1,high); } } function partition(arr,low,high){ var key = arr[low]; //使用第一個元素做爲分類依據 while(low < high){ while(low < high && arr[high] >= arr[key]) high--; arr[low] = arr[high]; while(low < high && arr[low] <= arr[key]) low++; arr[high] = arr[low]; } arr[low] = key; return low; }

//方法二（使用js數組方法）
function quickSort(arr){
   if(arr.length <= 1) return arr; var index = Math.floor(arr.length/2); var key = arr.splice(index,1)[0]; var left = [],right = []; arr.forEach(function(v){ v <= key ? left.push(v) : right.push(v); }); return quickSort(left).concat([key],quickSort(right)); } //另外要知道，快速排序的平均時間複雜度O(nlogn),最壞狀況是有序的狀況，時間複雜度爲n的平方，另外快速排序是不穩定的。

 

3 、寫一個獲取非行間樣式的函數

 

四、實現一個函數clone，能夠對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值複製

Object.prototype.clone = function(){
 
            var o = this.constructor === Array ? [] : {};
 
            for(var e in this){
 
                    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
 
            }
 
            return o;
    }

五、如何刪除一個cookie

1.將時間設爲當前時間往前一點。

var date = new Date();
 
date.setDate(date.getDate() - 1);//真正的刪除

setDate()方法用於設置一個月的某一天。

2.expires的設置

document.cookie = 'user='+ encodeURIComponent('name')  + ';
expires = ' + new Date(0)

六、編寫一個方法 求一個字符串的字節長度

function GetBytes(str){
 
        var len = str.length;
 
        var bytes = len;
 
        for(var i=0; i<len; i++){
 
            if (str.charCodeAt(i) > 255) bytes++;
 
        }
 
        return bytes;
 
    }
 
alert(GetBytes("你好,as"));

 七、請寫出函數運行結果

function test(){
    var a;
    function foo(){
        return 2;
    }
    console.log(a);//undefined
    console.log(foo());//2
    a = 1;
}
test();

function fun(n,o){
    console.log(o);
    return {
        fun:function(m){
            return fun(m,n);
        }
    }
}
var a = fun(0);a.fun(1);a.fun(2);a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);c.fun(2);c.fun(3);
//undefined 0 0 0
//undefined 0 1 2
//undefined 0 1 1

var a = 9;
var b = a++ + a-- + ++a + --a + a--
//console.log(a);//8
//console.log(b);//47

var objName = "name1";
function obj(){
    var objName = "name2";
    function innerObj(){
        alert(objName);//name2
    }
    innerObj();
}
console.log(obj());//undefined

八、求數組最大值 

//1.sort排序（先把數組從小到大排序，數組第一個即爲最小值，最後一個即爲最大值）
ary.sort(function(a,b){return a-b;});
var minN = ary[0];
var maxN = ary[ary.length-1];
//2.假設數組第一個爲最大（或最小值），和後邊進行比較，若後邊的值比最大值大（或比最小值小），則替換最大值（或最小值）
var maxN = ary[0];
var minN = ary[0];
for(var i=1;i<ary.length;i++){
    var cur = ary[i];
    cur>maxN ? maxN=cur : null;
    cur<minN ? minN=cur : null;
}
//3.Math的max和min方法
Math.max.apply(null, a);
Math.min.apply(null, a);

九、用css實現垂直居中 

https://www.cnblogs.com/zhouhuan/p/vertical_center.html

十、用es6的方法將數組[5,6,7]插入數組[1,2,3,4]，獲得數組[1,2,5,6,7,3,4]

var arry1 = [1,2,3,4];
var arry2 = [5,6,7];
//這裏的...爲擴展運算符（spread）：表示將一個數組轉爲用逗號分隔的參數序列。
arry1.splice(2,0,...arry2);
console.log(arry1);

splice方法用於刪除原數組的一部分紅員，並能夠在刪除的位置添加新的數組成員，返回值是被刪除的元素。該方法會改變原數組。 
splice方法的第一個參數是刪除的起始位置（從0開始），第二個參數是被刪除的元素個數（第二個參數設爲0的時候表示只插入元素）。若是後面還有更多的參數，則表示這些就是要被插入數組的新元素。 
…擴展運算符（spread）：將一個數組轉爲用逗號分隔的參數序列。

十一、JavaScript中如何檢測一個變量是一個String類型？請寫出函數實現

typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String

十二、請用js去除字符串空格？

方法一：使用replace正則匹配的方法

去除全部空格: str = str.replace(/\s*/g,"");      

去除兩頭空格: str = str.replace(/^\s*|\s*$/g,"");

去除左空格： str = str.replace( /^\s*/, 「」);

去除右空格： str = str.replace(/(\s*$)/g, "");

str爲要去除空格的字符串，實例以下：

var str = " 23 23 ";
var str2 = str.replace(/\s*/g,"");
console.log(str2); // 2323

方法二：使用str.trim()方法

str.trim()侷限性：沒法去除中間的空格，實例以下：

var str = "   xiao  ming   ";
var str2 = str.trim();
console.log(str2);   //xiao  ming 

同理，str.trimLeft()，str.trimRight()分別用於去除字符串左右空格。

方法三：使用jquery,$.trim(str)方法

$.trim(str)侷限性：沒法去除中間的空格，實例以下：

var str = "   xiao  ming   ";
var str2 = $.trim(str)
console.log(str2);   //  xiao  ming

1三、你如何獲取瀏覽器URL中查詢字符串中的參數？

測試地址爲：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23

實例以下：

function showWindowHref(){
    var sHref = window.location.href;
    var args = sHref.split('?');
    if(args[0] == sHref){
        return "";
    }
    var arr = args[1].split('&');
    var obj = {};
    for(var i = 0;i< arr.length;i++){
        var arg = arr[i].split('=');
        obj[arg[0]] = arg[1];
    }
    return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming

1四、寫出3個使用this的典型應用

（1）、在html元素事件屬性中使用，如：

<input type=」button」 onclick=」showInfo(this);」 value=」點擊一下」/>

（2）、構造函數

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}

（3）、input點擊，獲取值

<input type="button" id="text" value="點擊一下" />
<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此處的this是按鈕元素
    }
</script>

(4)、apply()/call()求數組最值

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458

1五、判斷一個字符串中出現次數最多的字符，統計這個次數

var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
    if(!json[str.charAt(i)]){
       json[str.charAt(i)] = 1;
    }else{
       json[str.charAt(i)]++;
    }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
    if(json[i]>iMax){
         iMax = json[i];
         iIndex = i;
    }
}        
console.log('出現次數最多的是:'+iIndex+'出現'+iMax+'次');
//結果以下：出現次數最多的是:a出現9次

1六、使用正則表達式驗證郵箱格式

var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
 var email = "example@qq.com";
 console.log(reg.test(email));  // true  

1七、請寫一個簡單的幻燈效果頁面

js

 

css3

18.解釋下爲何接下來這段代碼不是IIFE(當即調用的函數表達式)：function foo(){}();.

要作哪些改動使它變成IIFE?
由於在解析器解析全局的function或者function內部function關鍵字的時候，默認是認爲function聲明，而不是function表達式，若是你不顯示告訴編譯器，它默認會聲明成一個缺乏名字的function，而且拋出一個語法錯誤信息，由於function聲明須要一個名字。

var foo = function() {

    // doSomeThing.

}； 

foo();

19."123456789876543212345678987654321..."的第n位是什麼？

function getNum(n){
    let num=0, flag=true;
    for(let i=0; i<n;i++){
        if(num===1)  flag=true;
        if(num===9)  flag=false;
        flag?num++:num--
    }
    return num
}