備戰前端面試

時間 2019-11-12

原文原文鏈接

1. js的typeof返回哪些數據類型？

答案：
js有哪幾種數據類型：
object（複雜類型）
number function boolean undefined string symbol(ES6)（基本類型）
其中typeof isNaN //Functionhtml

2. 面向對象編程與面向過程編程的區別

答案：
面向對象和麪向過程是兩種不一樣的編程思想。vue

面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了。
面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲。

3. 普通函數與箭頭函數的區別

答案：
1) 箭頭函數是匿名函數，不能做爲構造函數，不能使用new
2) 箭頭函數不綁定arguments，取而代之用rest參數...解決
3) 箭頭函數不綁定this，會捕獲其所在的上下文的this值，做爲本身的this值
4) 箭頭函數經過call()或apply()方法調用一個函數時，只傳入了一個參數，對 this 並無影響。
5) 箭頭函數沒有原型屬性
6) 箭頭函數不能當作Generator函數,不能使用yield關鍵字html5

4. eval函數的做用

答案：
eval() 函數計算 JavaScript 字符串，並把它做爲腳本代碼來執行es6

5. 函數防抖和節流

以防止一個函數被無心義的高頻率調用
防抖: 觸發事件後在 n 秒內函數只能執行一次，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。編程

節流: 指連續觸發事件可是在 n 秒中只執行一次函數
https://www.jianshu.com/p/c8b86b09daf0json

6. h5新增的標籤有哪些？爲何要增強語義化

HTML5 如今已經不是 SGML(標準通用標記語言，是一種定義電子文檔結構和描述其內容的國際標準語言) 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。api

語義化更好的內容標籤（header,nav,footer,aside,article,section,datalistfieldset）
表單元素：calendar，date，time，number, url , search , mail;
拖拽釋放(Drag and drop) API
音頻、視頻(audio,video)API
畫布(Canvas) API
地理(Geolocation) API
存儲(localStorage , sessionStorage)API (本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失; sessionStorage 的數據在瀏覽器關閉後自動刪除)

新標籤：
文檔類型設定：<!doctype html>
字符設定：數組

增強語義化：瀏覽器

用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

7. 爲何要清除浮動？如何清除浮動？

浮動引發的問題：
1）子元素浮動致使父元素內高度爲0，父級盒子不能被撐開，發生高度塌陷，父元素背景不能正常顯示，邊框不能被撐開，margin和padding值不能正常顯示。
2）與子元素同級的非浮動元素會被遮蓋
如何清除浮動？
1）給父元素設置合適的高度
2）給父元素添加樣式：overflow:hidden/auto,這個屬性至關於觸發了BFC,讓父級緊貼內容
3）在最後一個子元素的後面追加一個空元素，併爲其添加樣式.clear{clear:both};
4）採用爲元素，給父元素後面追加:after,並設置樣式爲.clearfix{content:""; clear:both; display:block;}緩存

8. 行內元素，塊級元素有哪些？它們的區別

（1）行內元素
<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>
（2）塊級元素
<div>、<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<tr>、<td>、<div>、<form>
二者區別：
1）塊級元素會獨佔一行，其寬度自動填滿其父元素寬度
行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裏，直到一行排不下，纔會換行，其寬度隨元素的內容而變化
2）塊級元素能夠設置 width, height屬性，行內元素設置width, height無效
【注意：塊級元素即便設置了寬度，仍然是獨佔一行的】
3) 塊級元素能夠設置margin 和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，可是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效）

9. HTML5有幾種存儲方式？它們之間的區別？

h5以前，存儲主要是用cookies。用來維護用戶計算機中的信息，直到用戶刪除。
主要應用：購物車、客戶登陸
cookie的數量（<20條）和大小（<4KB）都有限制；
cookie數據會在http請求頭中攜帶（即cookie在瀏覽器和服務器間來回傳遞）；
cookie在過時時間以前都一直有效，即便窗口或瀏覽器關閉。
cookie在全部同源窗口中都是共享的
localStorage，以鍵值對(Key-Value)的方式存儲，
主要應用：數組，圖片，json，樣式，腳本。（只要是能序列化成字符串的內容均可以存儲）
localStorage大小限制爲5M
localStorage不會自動把數據發給服務器，僅在本地保存
localStorage始終有效，窗口和瀏覽器關閉也一直保存，所以用做持久數據
localStorage在全部同源窗口中都是共享的
sessionStorage用於在本地存儲一個會話中的數據。
sessionStorage大小限制爲5M
sessionStorage不會自動把數據發給服務器，僅在本地保存
sessionStorage僅在當前瀏覽器窗口關閉錢有效，不能持久保持；
sessionStorage不能再不一樣的瀏覽器窗口共享，即便事同一個頁面
application cache，應用程序離線緩存，在用戶沒有與網絡鏈接時，能夠正常訪問站點或應用；在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
使用方法：
①配置manifest文件
<html manifest = "demo.appcache">...</html>
②Manifest 文件：
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分爲三個部分：
- ①CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
- ②NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
- ③FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）
③服務器上：manifest文件須要配置正確的MIME-type，即 text/cache-manifest。
Application Cache的三個優點：
① 離線瀏覽
② 提高頁面載入速度
③ 下降服務器壓力

http://www.javashuo.com/article/p-hmzkrrnw-dp.html

10. ES6新的特性有哪些？

一、新增了let,const關鍵字
避免了變量提高，定義的變量只在塊級做用域中起做用
二、提供了定義類的語法糖(class)
三、新增了一種基本數據類型(Symbol)
四、新增了變量的解構賦值
五、函數參數容許設置默認值，引入了rest參數，新增了箭頭函數
默認參數：

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
 ...
}

六、數組新增了一些API，如 isArray / from / of 方法;數組實例新增了 entries()，keys() 和 values() 等方法
七、對象和數組新增了擴展運算符（...）
將一個數組轉爲用逗號分隔的參數序列
八、ES6 新增了模塊化(import/export)
九、ES6 新增了 Set 和 Map 數據結構
十、ES6 原生提供 Proxy 構造函數，用來生成 Proxy 實例
十一、ES6 新增了生成器(Generator)和遍歷器(Iterator)
十二、ES6中的模板表達式
模版表達式在其餘語言中通常是爲了在模版字符串中輸出變量
在反引號包裹的字符串中，使用${NAME}語法來表示模板字符

//ES5
var name = 'Your name is ' + name + '.'
var url = 'http://localhost:3000/api/messages/' + id
//ES6
var name = `Your name is ${first} ${last}`
var url = `http://localhost:3000/api/messages/${id}`

1三、ES6中的多行字符串
利用反引號 ``

11. 下面程序輸出的是什麼？如何修改可以輸出1-10

for(var i = 0; i < 10; i++){
    setTimeout(function(){
        console.log(i)
    },10)
}

輸出：10個10

//改進：
for(var i = 1; i <= 10; i++){
    (function(i){
        setTimeout(function(){
           console.log(i)
        },10)
    })(i);
}
//改進2：
for(let i = 0; i <= 10; i++){
    setTimeout(function(){
        console.log(i)
    },10)
}

12. vue實現雙向綁定的原理是什麼？

13. vue組件之間是怎麼傳值的？（父子組件，兄弟組件）

14. 讓A、B兩個按鈕實現按點擊次序執行請求

15. 怎麼實現文本不換行？超出部分顯示省略號

white-space:nowrap;/*強制在一行顯示*/
overflow:hidden;/*超出部分隱藏*/
text-overflow:ellipsis;/*文本超出部分用省略號代替*/

16. 兩欄佈局，如何實現左側固定右側自適應？

一、浮動，使左側div浮動起來脫離文檔流，右側自動向上，默認寬度。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            float: left;
            height: 400px;
            background-color: #99F;
        }
        .main{
            height: 400px;
            background: #ccc;
        }
   </style>
<body>
<div class="left">左側</div>
<div class="main">主要</div>
</body>

二、絕對定位，左側塊元素絕對定位；右側默認寬度，且margin-left設置爲左側盒子的寬度

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
            height: 400px;
            background-color: #99F;
        }
        .main{
            margin-left: 200px;
            height: 400px;
            background: #ccc;
        }
   </style>
<body>
<div class="left">左側</div>
<div class="main">主要</div>
</body>

三、彈性盒子，父元素設置爲彈性佈局，子元素經過flex的數值來控制所佔空間的比例

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
        }
        .left{
            width: 200px;
            height: 400px;
            background-color: #99F;
        }
        .main{
            height: 400px;
            background: #ccc;
            flex: 1;
        }
    </style>
<body>
<div class="left">左側</div>
<div class="main">主要</div>
</body>

17. 三欄佈局，如何實現左右定寬中間自適應寬度？

一、左右兩欄浮動，中間寬度自適應（html佈局中注意順序）

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            height: 400px;
            float: left;
            background-color: #99F;
        }
        .main{
            height: 400px;
            background: #ccc;
        }
        .right{
            width: 200px;
            height: 400px;
            float: right;
            background-color: #99F;
        }
    </style>
<body>
<div class="left">左側</div>
<div class="right">右側</div>
<div class="main">主要</div>
</body>

二、絕對定位法，左右側盒子定位到兩側，中間盒子默認寬度，設置margin值

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left,.right{
            width: 200px;
            height: 400px;
            background-color: #99F;
            position: absolute;
            top: 0;
        }
        .left{
            left:0;

        }
        .main{
            height: 400px;
            background: #ccc;
            margin: 0 200px;
        }
        .right{
            right: 0;
        }
     </style>
<body>
<div class="left">左側</div>
<div class="right">右側</div>
<div class="main">主要</div>
</body>

三、彈性盒子。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
        }
        .left,.right{
            width: 200px;
            height: 400px;
            background-color: #99F;

        }
        .main{
            height: 400px;
            background: #ccc;
            flex: 1;
        }
        
     </style>
<body>
<div class="left">左側</div>
<div class="main">主要</div>
<div class="right">右側</div>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。