前端面試題2019持續整理彙總

一、快速擾亂數組排序

var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.sort(function(){
        return Math.random() - 0.5;
    })
    console.log(arr);
複製代碼

二、JS判斷設備來源

function deviceType(){
        var ua = navigator.userAgent;
        var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
        for(var i=0; i<len,len = agent.length; i++){
            if(ua.indexOf(agent[i])>0){         
                break;
            }
        }
    }
    deviceType();
    window.addEventListener('resize', function(){
        deviceType();
    })

    微信的 有些不太同樣
    function isWeixin(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=='micromessenger'){
            return true;
        }else{
            return false;
        }
    }
複製代碼

三、audio元素和video元素在ios和andriod中實現自動播放

緣由： 由於各大瀏覽器都爲了節省流量，作出了優化，在用戶沒有行爲動做時（交互）不予許自動播放；

    /音頻，寫法一
    <audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>
    
    //音頻，寫法二
    <audio controls="controls"> 
        <source src="music/bg.ogg" type="audio/ogg"></source>
        <source src="music/bg.mp3" type="audio/mpeg"></source>
        優先播放音樂bg.ogg，不支持在播放bg.mp3
    </audio>
    
    //JS綁定自動播放（操做window時，播放音樂）
    $(window).one('touchstart', function(){
        music.play();
    })
    
    //微信下兼容處理
    document.addEventListener("WeixinJSBridgeReady", function () {
        music.play();
    }, false);
    
    //小結
    //1.audio元素的autoplay屬性在IOS及Android上沒法使用，在PC端正常；
    //2.audio元素沒有設置controls時，在IOS及Android會佔據空間大小，而在PC端Chrome是不會佔據任何空間；
    //3.注意不要遺漏微信的兼容處理須要引用微信JS；
複製代碼

四、讓文本不可複製

-webkit-user-select: none; 
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
複製代碼

添加版權信息思路：

一、答案區域監聽copy事件，並阻止這個事件的默認行爲。
二、獲取選中的內容（window.getSelection()）加上版權信息，而後設置到剪切板（clipboarddata.setData()）。
複製代碼

五、水平垂直居中

一、定位 盒子寬高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;

    二、table-cell佈局 父級 display: table-cell; vertical-align: middle;  子級 margin: 0 auto;
    
    三、定位 + transform ; 適用於 子盒子 寬高不定時； （這裏是本人經常使用方法）
        
        position: relative / absolute;
        /*top和left偏移各爲50%*/
           top: 50%;
           left: 50%;
        /*translate(-50%,-50%) 偏移自身的寬和高的-50%*/
        transform: translate(-50%, -50%); 注意這裏啓動了3D硬件加速哦 會增長耗電量的 （至於何是3D加速 請看瀏覽器進程與線程篇）
    
    四、flex 佈局
        父級： 
            /*flex 佈局*/
            display: flex;
            /*實現垂直居中*/
            align-items: center;
            /*實現水平居中*/
            justify-content: center;
    
    再加一種水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);
複製代碼

六、改變placeholder的字體顏色

***只適用於pc端
    input::-webkit-input-placeholder { 
        /* WebKit browsers */ 
        font-size:14px;
        color: #333;
    } 
    input::-moz-placeholder { 
        /* Mozilla Firefox 19+ */ 
        font-size:14px;
        color: #333;
    } 
    input:-ms-input-placeholder { 
        /* Internet Explorer 10+ */ 
        font-size:14px;
        color: #333;
    }
複製代碼

七、window.onload()和$(document).ready()的區別

window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。 
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

 window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個 
$(document).ready()能夠同時編寫多個，而且均可以獲得執行 
複製代碼

八、如何判斷一個object是數組類型

一、Array.isArray([1,2,3])
二、根據對象的class屬性(類屬性)，跨原型鏈調用toString()方法(比較推薦)
Object.prototype.toString.call([1,2,3]);
三、從原型入手，Array.prototype.isPrototypeOf(obj);

複製代碼

九、CORS http請求和普通http請求的區別

[跨域資源共享 CORS 詳解](http://www.ruanyifeng.com/blog/2016/04/cors.html)


感謝[面試的信心來源於過硬的基礎](https://segmentfault.com/a/1190000013331105)這篇文章的分享

另外添加兩個github上整理的面試題
[https://github.com/qiu-deqing/FE-interview](https://github.com/qiu-deqing/FE-interview)、[https://github.com/fouber/blog](https://github.com/fouber/blog)
複製代碼

十、盒子模型你是怎麼理解的？

1）盒子模型有兩種，W3C和IE盒子模型
（1）w3c的盒模型width=content，不包括margin，padding,border
（2）IE盒模型width=content+padding+border
（3）box-sizng  border-box在已設定的寬度和高度以內去設定padding和border
    content-box在已設定的高度和寬度以外設置padding和border
複製代碼

十一、行內元素，塊元素，空元素有哪些？

（1）行內元素：
    a - 錨點，em - 強調，strong - 粗體強調，span - 定義文本內區塊，i - 斜體，img - 圖片，b - 粗體，label-表格標籤，select-項目選擇，textarea-多行文本輸入框，
    sub - 下標，sup - 上標，q - 短引用，
（2）塊元素：
    div - 經常使用塊級，dl-定義列表，dt，dd，ul-非排序列表，li，ol-排序表單，p-段落，h1，h2，h3，h4，h5-標題，table-表格，
    fieldset - form控制組，form - 表單，
（3）空元素：
    br-換行，hr-水平分割線
複製代碼

十二、src和href的區別？

（1）href：
    href是Hypertext Reference的縮寫，表示超文本引用。用來創建當前元素和文檔之間的連接。如link a 並行下載該文檔，而且不會中止對當前文檔的處理
（2）src：
    src是source的縮寫，src指向的內容會嵌入到文檔當前標籤所在位置
    如img、script、iframe當瀏覽器解析到該元素時，會暫停瀏覽器的渲染，直到該資源加載完畢。
複製代碼

1三、什麼是css HACK？

CSS hack是經過在CSS樣式中加入一些特殊的符號，讓不一樣的瀏覽器識別不一樣的符號，以達到應用不一樣的CSS樣式的目的
複製代碼

1四、優雅降級和漸進加強？

優雅降級：一開始就構建功能完整的網站，而後根據低版本瀏覽器進行兼容。
漸進加強：針對低版本瀏覽器，保證最基本的功能，而後再根據高版本的瀏覽器進行交互功能的升級。
複製代碼

1五、new操做符的實現

function New(func){
    var res = {};
    if(func.prototype !== null){
        res.__proto__=func.prototype;
    }
    var set = func.apply(res,Array.prototype.slice(arguments,1));
    if((typeof set === "object" || typeof set === "function")&&rest !== null){
        return set;
    }
    return res;
}
var obj = New(A,1,2) === var obj = new A(1,2)



function _new(fn, ...arg) {
    const obj = Object.create(fn.prototype);
    const ret = fn.apply(obj, arg);
    return ret instanceof Object ? ret : obj;
}
複製代碼

1六、遞歸深拷貝

var obj ={q:1,w:[{e:1},2],r:{t:'123'}};
function deepClone(obj){
    if(!obj || (typeof obj !== 'object')){
        return;
    }
    var newObj = Object.prototype.toString.call(obj) == '[object Array]'?[]:{};
    for(let key in obj){
        if(typeof obj[key] == 'object'){
            newObj[key] = deepClone(obj[key])
        }else{
            newObj[key] = obj[key];
        }
    }
	return newObj;
}  
console.log(deepClone(obj)==obj)
console.log(deepClone(obj))
複製代碼

1七、JS常見的四種內存泄漏

一、意外的全局變量

// bar變量未聲明  解決辦法就是使用js嚴格模式 'use strict'(嚴格模式下this 爲undefind)
function foo(){
    bar='123';
}
複製代碼

二、定時器和回調函數

// 定時器
var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        // 處理 node 和 someResource
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);
// 回調函數
var element = document.getElementById('button');
function onClick(event) {
    element.innerHTML = 'text';
}

element.addEventListener('click', onClick);

複製代碼

現代的瀏覽器（包括 IE 和 Microsoft Edge）使用了更先進的垃圾回收算法（標記清除），已經能夠正確檢測和處理循環引用了。即回收節點內存時，沒必要非要調用 removeEventListener 了。現代的瀏覽器（包括 IE 和 Microsoft Edge）使用了更先進的垃圾回收算法（標記清除），已經能夠正確檢測和處理循環引用了。即回收節點內存時，沒必要非要調用 removeEventListener 了。

三、脫離dom的引用

四、閉包 定義：閉包是指有權訪問另一個函數做用域中的變量的函數

閉包三個特性：

（1）能夠訪問當前函數之外的變量 （2）即便外部函數已經返回，閉包仍能訪問外部函數定義的變量 （3）閉包能夠更新外部變量的值