前端面試集錦（3）

時間  2019-12-14
標籤 前端 面試 集錦 欄目 快樂工作 简体版
原文   原文鏈接

一、寫一個function,清除字符串先後的空格（兼容全部瀏覽器）javascript

 function trimfn(str) {

　　return str.replace(/^\s+/,"").replace(/\s+$/,"")
　　//return this.replace(/(^\s+)|(\s+$)/g,"");

}

 

二、請寫出至少三種減小頁面加載時間的方法css

　　https://blog.csdn.net/gongzhuxiaoxin/article/details/52454213html

1. 儘可能減小頁面中重複的HTTP請求數量前端

2. 服務器開啓gzip壓縮vue

3. css樣式的定義放置在文件頭部
4. Javascript腳本放在文件末尾html5

5. 壓縮Javascript、CSS代碼java

6. Ajax採用緩存調用node

7. 儘量減小DCOM元素ios

八、網址後面加上「/」:對服務器而言，不加斜槓服務器會多一次判斷的過程，加斜槓就會直接返回網站設置的存放在網站根目錄下的默認頁面。git

 

三、瀏覽器的內核分別是什麼？各有哪些優缺點？

　　https://www.jianshu.com/p/77fa8edcf85c

　　http://ask.zol.com.cn/x/5066257.html

　　IE：trident內核

　　firefox：gecko內核

       Safari：webkit內核

       opera：之前是用presto內核，如今已經改用google chrome的blink內核

       chrome：blink（基於webkit，是google與opera software共同開發的

 

四、請寫一個方法，清除數組中的重複元素？

 一、Es6：new Set()

let unique = [...new Set(array)]

new Set()，用來去重數組
let arr = [1, 2, 2, 3];
let set = new Set(arr);
let newArr = Array.from(set);
console.log(newArr); // [1, 2, 3]

二、遍歷，indexOf判斷是否存在，已存在就不添加

三、遍歷，對象不能添加相同的屬性名，而後用Object.keys()返回這個對象可枚舉屬性組成的數組

 

五、編寫程序打印圖形，如圖

Q

QQ

QQQ

QQQQ

QQQQQ

 https://blog.csdn.net/heechul8/article/details/77096483

function printQ(max) {
            for (var i = 1; i <= max; i++) {
                for (var j = 1; j <= i; j++) {
                    document.write("Q")
                }
                document.write("<br/>");
            }
            
}
 printQ(5)

 

 

六、CSS如何實現垂直水平居中（居中元素大小不固定）

　　https://blog.csdn.net/u011295864/article/details/80675192

　　https://www.jianshu.com/p/f3df6ccc050a

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>垂直水平居中</title>
    <style>
    /*(1)
    .parent{
        width: 100%;
        height: 500px;
        border:1px solid black;
        align-items:center;
        display: -webkit-flex;
        justify-content:center;
    }
    .center{
        border:1px solid red;
    }
    */
    .parent{
        width: 100%;
        height: 500px;
        border:1px solid black;
        position:relative;
    }
    .center{
        border:1px solid red;
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="center">hahhaha</div>
    
    </div>
</body>
</html>

 

七、列舉哪些方式會建立塊格式化上下文（BFC）

  • 根元素
  • float屬性不爲none
  • position爲absolute或fixed
  • display爲inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不爲visible

八、setItmeout、async/await、promise考察程序打印順序

　　http://www.javashuo.com/article/p-dyxhstqu-ma.html

        async function async1() {
            console.log("async1 start");
            await  async2();
            console.log("async1 end");
 
        }
        async  function async2() {
           console.log( 'async2');
        }
        console.log("script start");
        setTimeout(function () {
            console.log("settimeout");
        },0);
        async1();
        new Promise(function (resolve) {
            console.log("promise1");
            resolve();
        }).then(function () {
            console.log("promise2");
        });
        console.log('script end');

 

　　總結：先執行同步代碼，遇到異步代碼就先加入隊列，而後按入隊的順序執行異步代碼，最後執行setTimeout隊列的代碼。

　　隊列任務優先級：promise.Trick()>promise的回調>setTimeout>setImmediate

 

 

九、已知以下數組：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

編寫一個程序將數組扁平化去併除其中重複部分數據，最終獲得一個升序且不重複的數組

　　http://www.javashuo.com/article/p-czmarxuh-go.html

　　https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat　

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]
// 扁平化
let flatArr = arr.flat(4)
// 去重
let disArr = Array.from(new Set(flatArr))
// 排序
let result = disArr.sort(function(a, b) {
    return a-b
})
console.log(result)

 

十、聊聊瀏覽器兼容性

　　https://cloud.tencent.com/developer/article/1333299

 　　http://www.javashuo.com/article/p-rxtxbuqu-ey.html

　　https://www.jianshu.com/p/56e0eb736526

1、html部分

1.H5新標籤在IE9如下的瀏覽器識別

<!--[if lt IE 9]>

 <script type="text/javascript" src="js/html5shiv.js"></script>

<![endif]-->

 html5shiv.js下載地址

https://github.com/aFarkas/html5shiv/releases

2.ul標籤內外邊距問題

ul標籤在IE6\IE7中，有個默認的外邊距，可是在IE8以上及其餘瀏覽器中有個默認的內邊距。

解決方法：統一設置ul的內外邊距爲0

2、CSS樣式的兼容性

1.css的hack問題：主要針對IE的不一樣版本，不一樣的瀏覽器的寫法不一樣  IE的條件註釋hack：  <!--[if IE 6]>此處內容只有IE6.0可見<![endif]-->            <!--[if IE 7]>此處內容只有IE7.0可見<![endif]-->

2.IE6雙邊距問題：IE6在浮動後，又有橫向的margin，此時，該元素的外邊距是其值的2倍 解決辦法：display:block;

3.IE6下圖片的下方有空隙 解決方法：給img設置display:block;

4.IE6下兩個float之間會有個3px的bug    解決辦法：給右邊的元素也設置float:left;

5.IE6下沒有min-width的概念，其默認的width就是min-width

6.IE6下在使用margin:0 auto;沒法使其居中 解決辦法：爲其父容器設置text-align:center;

7.被點擊事後的超連接再也不具備hover和active屬性 解決辦法:按lvha的順序書寫css樣式，  ":link": a標籤還未被訪問的狀態；  ":visited": a標籤已被訪問過的狀態；  ":hover": 鼠標懸停在a標籤上的狀態；  ":active": a標籤被鼠標按着時的狀態；

8.在使用絕對定位或者相對定位後，IE中設置z-index失效，緣由是由於其元素依賴於父元素的z-index，可是父元素默認爲0， 子高父低，因此不會改變顯示的順序

9.IE6下沒法設置1px的行高，緣由是由其默認行高引發的 解決辦法：爲期設置overflow:hidden;或者line-height:1px;

3、JavaScript的兼容性

1.標準的事件綁定方法函數爲addEventListener，但IE下是attachEvent；

2.事件的捕獲方式不一致，標準瀏覽器是由外至內，而IE是由內到外，可是最後的結果是將IE的標準定爲標準

3.window.event獲取的。而且獲取目標元素的方法也不一樣，標準瀏覽器是event.target，而IE下是event.srcElement

4.在低版本的IE中獲取的日期處理函數的值不是與1900的差值，可是在高版本的IE中和標準瀏覽器保持了一致，獲取的值也是與1900的差值。 好比：var year= new Date().getYear();

5.ajax的實現方式不一樣，這個我所理解的是獲取XMLHttpRequest的不一樣，IE下是activeXObject

6.IE中不能操做tr的innerHtml

7.得到DOM節點的父節點、子節點的方式不一樣 其餘瀏覽器：parentNode  parentNode.childNodes   IE：parentElement parentElement.children

八、常見CSS屬性兼容

  • inline-block: >=ie8
  • min-width/min-height: >=ie7
  • :before,:after: >=ie8
  • div:hover: >=ie7
  • inline-block: >=ie8
  • background-size: >=ie9
  • 圓角: >= ie9
  • 陰影: >= ie9
  • 動畫/漸變: >= ie10

 

十一、vue項目開發遇到的問題，如何解決？

　　（1）VUE對象屬性改變視圖未更新問題

　　　　https://blog.csdn.net/qq_41715870/article/details/81982675

　　　　https://blog.csdn.net/weixin_43056561/article/details/82626374

　　（2）路由變化頁面數據不刷新問題

　　　　當使用路由參數時，例如從 /user/foo 導航到 user/bar，原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。

　　　　http://www.javashuo.com/article/p-sgnuyhty-gq.html

　　（3）vue-router beforeEach死循環

　　　　http://www.javashuo.com/article/p-oskyowqg-bg.html

　　　　https://blog.csdn.net/qq_38334525/article/details/80682351

router.beforeEach((to, from, next) => {
　　let url = 'http://10.2.149.109/permission/getPagePermission';
　　let data={
　　　　pagename:to.name,
　　} 
　　axios.get(url,{params: data}).then((response)=>{
　　　　if(!response.data.Status){
　　　　　　return next({path:'/prompt'})
　　　　}
　　　　return next()
　　})

})

next()直接跳轉到to.path路徑，沒有再執行一遍beforeEach導航鉤子，而 next({path:'/prompt'})路由跳轉的時候還執行一遍beforeEach導航鉤子，因此上面出現死循環；

解決方案以下：

router.beforeEach((to, from, next) => {
　　let url = 'http://10.2.149.106:9897/permission/getPagePermission';
　　let data={
　　　　pagename:to.name,
　　}
　　if(data.pagename=="prompt"){
　　　　next(); //避免出現死循環
　　}else{
　　　　axios.get(url,{params: data}).then((response)=>{
　　　　　　if(!response.data.Status){
　　　　　　　　return next({path:'/prompt'})
　　　　　　}
　　　　　　return next()
　　　　})
　　}
})

　　(4)vue模板Element UI中組件scoped屬性問題，深度選擇器/deep/

　　　　http://www.javashuo.com/article/p-wnagzmzb-bs.html

 　　　　https://blog.csdn.net/webjhh/article/details/84977864

　　(5)npm run dev的時候控制檯報錯Vue packages version mismatch

　　　　http://www.javashuo.com/article/p-fzumgymc-go.html　　　

　　　　但是檢查package.json文件裏vue和vue-template-compiler的版本確是同樣的

　　　　解決方案：把package-lock.json和node_modules這兩個文件完全刪除而後再從新npm install

　　(6)本地開發環境請求服務器接口跨域的問題

　　　　https://blog.csdn.net/sd19871122/article/details/80922726

　　　　vue-cli初始化的項目，在配置文件中提供了proxyTable來解決本地開發的跨域問題。config文件的index.js文件中，找到proxyTable選項，進行以下配置：　　

proxyTable: {
// 用‘/api’開頭，代理全部請求到目標服務器 
'/api': {
     target: 'http://jsonplaceholder.typicode.com', 
    // 接口域名
     changeOrigin: true, 
    // 是否啓用跨域 
    pathRewrite: { // '^/api': '' } 
}
}

 

十二、vue項目用了什麼組件？如何實現的？

 

1三、對象的深拷貝

　　http://www.javashuo.com/article/p-qcpduydr-ev.html

　　一、var copy = JSON.parse(JSON.stringify(person))
　　二、
function deepcopy(obj) {
            var result = Array.isArray(obj) ? [] : {}
            for (var key in obj) {
                if(obj.hasOwnProperty(key)) {
                    if (typeof obj[key] == 'object') {
                        result[key] = deepcopy(obj[key])
                    } else {
                        result[key] = obj[key]
                    }
                }
            }
            return result
        }

 

1四、路由如何動態建立

　　https://blog.51cto.com/4837471/2176714 

 1.vue中路由是如何初始化，放入到vue實例中的？

　　路由初始化發生在vue實例化時

 

 2.vue中提供了什麼實現動態路由加載呢？

　　經過addRoutes進行動態路由註冊

 

1五、閉包的理解

　　http://www.cnblogs.com/xiaohuochai/p/5728577.html

　　閉包(closure)，是指函數變量能夠保存在函數做用域內，所以看起來是函數將變量「包裹」了起來

 

1六、angular中依賴注入的理解

 

1七、oop的瞭解　

　　http://www.javashuo.com/article/p-wuudzxgx-bb.html

　　OOP(object oriented programming)，即面向對象編程，其中兩個最重要的概念就是類和對象。
　　世間萬物都具備自身的屬性和方法，經過這些屬性和方法能夠區分出不一樣的物質。
　　屬性和方法的集合就造成了類，類是面向對象編程的核心和基礎，
　　經過類就將零散的用於實現某個功能的代碼有效地管理起來了。
　　類只是具有了某些功能和屬性的抽象模型，而實際應用中須要一個一個實體，也就是須要對類進行實例化，
　　類在實例化以後就是對象。
　　OOP具備三大特色：
　　1. 封裝性：
　　也稱爲信息隱藏，就是將一個類的使用和實現分開，只保留部分接口和方法與外部聯繫，或者說只公開了一些供開發人員使用的方法。
　　因而開發人員只須要關注這個類如何使用，而不用去關心其具體的實現過程，這樣就能實現MVC分工合做，也能有效避免程序間相互依賴，實現代碼模塊間鬆藕合。

　　2. 繼承性：
　　就是子類自動繼承其父級類中的屬性和方法，並能夠添加新的屬性和方法或者對部分屬性和方法進行重寫。繼承增長了代碼的可重用性。

　　3. 多態性：
　　子類繼承了來自父級類中的屬性和方法，並對其中部分方法進行重寫。
　　因而多個子類中雖然都具備同一個方法，可是這些子類實例化的對象調用這些相同的方法後卻能夠得到徹底不一樣的結果，這種技術就是多態性。多態性加強了軟件的靈活性。

1八、面向對象編程和函數式編程區別　

是什麼
在敘述區別和優劣以前，簡單介紹一下二者。
函數式編程，顧名思義，這種編程是以函數思惟作爲核心，在這種思惟的角度去思考問題。這種編程最重要的基礎是λ演算，接受函數看成輸入和輸出。
面向對象編程，這種編程是把問題看做由對象的屬性與對象所進行的行爲組成。基於對象的概念，以類做爲對象的模板，把類和繼承做爲構造機制，以對象爲中心，來思考並解決問題。

優勢
函數式編程：支持閉包和高階函數，閉包是一種能夠起函數的做用並能夠如對象般操做的對象；而高階函數是能夠以另外一個函數做爲輸入值來進行編程。支持惰性計算，這就能夠在求值須要表達式的值得時候進行計算，而不是固定在變量時計算。還有就是能夠用遞歸做爲控制流程。函數式編程所編程出來的代碼相對而言少不少，並且更加簡潔明瞭。
面向對象編程：面向對象有三個主要特徵，分別是封裝性、繼承性和多態性。類的說明展示了封裝性，類做爲對象的模板，含有私有數據和公有數據，封裝性能使數據更加安全依賴的就是類的特性，使得用戶只能看到對象的外在特性，不能看到對象的內在屬性，用戶只能訪問公有數據不能直接訪問到私有數據。類的派生功能展示了繼承性，繼承性是子類共享父類的機制，可是因爲封裝性，繼承性也只限於公有數據的繼承（還有保護數據的繼承），子類在繼承的同時還能夠進行派生。而多態性是指對象根據接收的信息做出的行爲的多態，不一樣對象接收同一信息會造成多種行爲。

缺點
函數式編程：全部的數據都是不能夠改變的，嚴重佔據運行資源，致使運行速度也不夠快。
面向對象編程：爲了編寫能夠重用的代碼致使許多無用代碼的產生，而且許多人爲了面向對象而面向對象致使代碼給後期維護帶來不少麻煩。

 

1九、JavaScript實現功能的封裝、繼承、多態

　　https://www.cnblogs.com/peng14/archive/2012/09/05/2671900.html

 

20、JavaScript中漸進式框架的理解　

　　https://www.zhihu.com/question/51907207

　　Progressive（漸進式的） 在多個技術領域裏有不一樣的做用與解釋，因此有理解成本也能夠意料之中的。記得好多年前接觸這個詞，印象較深的是對相似 jpeg 圖片在頁面展現的一種處理方式。咱們知道，圖片的默認加載方式是從上到下，一小塊一小塊地加載，直到徹底加載。而 Progressive 圖片是先加載整張圖片主體，從一開始模糊的視圖加載到清晰。這背後是基於優先展現全局總體核心，而不是「管中窺豹」的優化理念。
　　 Vue 提到漸進式的框架理念，個人理解是先看到核心的部分（最小集），或者說是 Vue 這個名字的「初衷」： View，而後在此基礎上進行開發者自身的 DIY 擴展，也就是按需採用。這個過程是隨着開發者的需求逐步變化增加的，由簡單到複雜的應用場景均可以涵蓋到，正是其強大之處，其實與 React 的理念也是很像。
 
2一、ESLint代碼檢查工具
 
2二、js實現a頁面向b頁面傳參

方法一：使用HTML5本地化存儲(localStorage) 組件（本地最大能存儲5M數據）localStorage是本地永久存儲數據，是cookie的優化

方法二：使用cookie將數據存放在客戶的瀏覽器 （最大存儲2M數據）

方法三：使用url傳參 （將要傳遞的數據保存爲一個存儲變量，而後傳給url）方法以下;

a.html

var app = {};
app.list = '123'
app.test = '1';

window.location.href = "b.html?name="+app;

如何參數是對象的話要先轉化字符JSON.stringify(app)，在b頁面獲取的話再轉換化爲對象

b.html

接收url傳遞過來的參數

function GetRequest() {   
   var url = location.search; //獲取url中"?"符後的字串   
   var theRequest = new Object();   
   if (url.indexOf("?") != -1) {   
      var str = url.substr(1);   
      strs = str.split("&");   
      for(var i = 0; i < strs.length; i ++) {   
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
      }   
   }   
   return theRequest;   
}    
console.log(JSON.parse(GetRequest().name).list)

 

2三、如何在頁面上實現一個圓形的可點擊區域

　　https://blog.csdn.net/lxcao/article/details/52809221

　　https://blog.csdn.net/yaodebian/article/details/84778425

 

2四、原生JavaScript插件封裝開發

　　https://www.jianshu.com/p/937c6003851a

　　https://blog.csdn.net/hj7jay/article/details/54310784

 

2五、js定時器的執行順序和機制

 

2六、html頁面渲染過程？重排和重繪？何時會發生

https://www.cnblogs.com/dojo-lzz/p/3983335.html

 

2七、iframe優缺點

　　http://www.javashuo.com/article/p-failqrug-mz.html

　　https://www.jianshu.com/p/8fbee843437c

iframe是一種框架，也是一種很常見的網頁嵌入方式

iframe的優勢：

1.iframe可以原封不動的把嵌入的網頁展示出來。

2.若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。

3.網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。

4.若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。

iframe的缺點：

1.會產生不少頁面，不容易管理。

2.iframe框架結構有時會讓人感到迷惑，若是框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的注意力，用戶體驗度差。

3.代碼複雜，沒法被一些搜索引擎索引到，這一點很關鍵，如今的搜索引擎爬蟲還不能很好的處理iframe中的內容，因此使用iframe會不利於搜索引擎優化。

4.不少的移動設備（PDA 手機）沒法徹底顯示框架，設備兼容性差。

5.iframe框架頁面會增長服務器的http請求，對於大型網站是不可取的。

分析了這麼多，如今基本上都是用Ajax來代替iframe，因此iframe已經漸漸的退出了前端開發

 

2八、CommonJS中的require/exports和ES6中的import/export區別？

　　http://www.javashuo.com/article/p-ckzwyfvj-dm.html

 

2九、ES6解構變量

 

30、var爲何能夠重複聲明

　　https://blog.csdn.net/DurianPudding/article/details/87953939

 

3一、web storage 和 cookie區別

　　http://www.javashuo.com/article/p-yklndxfy-o.html

　　https://blog.csdn.net/hdp134793/article/details/81519074

 

3二、vue實現雙向數據綁定的原理

　　http://www.javashuo.com/article/p-amemhaoy-gq.html

var Book = {}
        var name = ''
        
        Object.defineProperty(Book, 'name', {
            set: function(value) {
                name = value
                console.log('你設置了name的值爲：' + value)
            },
            get: function(){
                return '《' + name + '》'
            }  
        })
        
        Book.name = 'vue權威指南';  
        console.log(Book.name);
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程