目錄

盒子模型

樣式優先級

JS深度克隆

前端性能優化

水平垂直居中

經典的Foo和getName

JS中的this

清除浮動的方法

跨域

TCP與UDP

設計模式

多態

重載和重寫

原型鏈

快速查詢

閉包

冒泡查詢

xml和json的區別

時間復雜度

?

---

?

?

盒子模型

什么是盒子模型？盒子模型分為哪幾種？它們分別有什么特點？

1.內容content+內邊距padding+邊框border+外邊距margin

2.IE盒模型border-box和普通盒模型content-box

3.content-box 的width=content；border-box的width=content+padding+border

?

樣式優先級

1.內聯式?>?嵌入式 > 外部式

2.內聯樣式? > id選擇器樣式 > 類選擇器樣式 > 元素選擇器樣式

3.！important與以上的選擇器相遇時，強制使用此樣式

?

深拷貝和淺拷貝

【參考文章：https://www.cnblogs.com/echolun/p/7889848.html】

function deepClone(obj){let _obj = JSON.stringify(obj),objClone = JSON.parse(_obj);return objClone } let a=[0,1,[2,3],4],b=deepClone(a); a[0]=1; a[2][0]=1; console.log(a,b);

利用JSON對象的parse和stringify可以代替下面的深度克隆函數里的代碼

?

JS深度克隆

定義一個函數，讓對象深度克隆。

【參考文章：https://www.jianshu.com/p/2a3728cded4c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weixin】

需要實現一個對象類型判斷函數

const isType = (obj, type) => {if (typeof obj !== 'object') return false;// 判斷數據類型的經典方法：const typeString = Object.prototype.toString.call(obj);let flag;switch (type) {case 'Array':flag = typeString === '[object Array]';break;case 'Date':flag = typeString === '[object Date]';break;case 'RegExp':flag = typeString === '[object RegExp]';break;default:flag = false;}return flag; };

深度克隆函數

const clone = parent => {// 維護兩個儲存循環引用的數組const parents = [];const children = [];const _clone = parent => {if (parent === null) return null;if (typeof parent !== 'object') return parent;let child, proto;if (isType(parent, 'Array')) {// 對數組做特殊處理child = [];} else if (isType(parent, 'RegExp')) {// 對正則對象做特殊處理child = new RegExp(parent.source, getRegExp(parent));if (parent.lastIndex) child.lastIndex = parent.lastIndex;} else if (isType(parent, 'Date')) {// 對Date對象做特殊處理child = new Date(parent.getTime());} else {// 處理對象原型proto = Object.getPrototypeOf(parent);// 利用Object.create切斷原型鏈child = Object.create(proto);}// 處理循環引用const index = parents.indexOf(parent);if (index != -1) {// 如果父數組存在本對象,說明之前已經被引用過,直接返回此對象return children[index];}parents.push(parent);children.push(child);for (let i in parent) {// 遞歸child[i] = _clone(parent[i]);}return child;};return _clone(parent); };

?

前端性能優化

前端性能優化的方案有哪些？

減少HTTP請求、使用CDN、添加Expires頭、壓縮組件、將樣式表放在頭部、將腳本放在底部、避免CSS表達式、使用外部的JavaScript和CSS、減少DNS查找、精簡JavaScript、避免重定向、刪除重復腳本、配置ETag、使Ajax可緩存。

?

?

水平垂直居中

使未知寬高的child子元素在father父元素中水平垂直居中的方法有哪些？

1.顯示設置父元素為：table，子元素為：table-cell，這樣就可以使用vertical-align: middle，text-align: center

2.使用一個空標簽span設置他的vertical-align基準線為中間，并且讓它為inline-block，寬度為0

3.父元素position非static，子元素絕對定位，top 50%，left50%，然后使用css3 transform:translate(-50%; -50%)

4.使用css3 flex布局：父元素display：flex； 子元素margin：auto；

?

?

<li>標簽

li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

當<li>標簽設置為display:inline-block時，會出現看不見的空白間隔。

引起這種空白間隔的原因：

瀏覽器的默認行為是把inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是我們上面的代碼<li>換行后會產生換行字符，而它會變成一個空格，當然空格就占用一個字符的寬度。

解決方案：

1.既然是因為<li>換行導致的，那就可以將<li>代碼全部寫在一排；

2.<ul>內的字符尺寸直接設為0

3.在Safari瀏覽器方法2依然出現間隔空白，所以設置.wrap ul{letter-spacing: -5px;}，然后設置li內字符間隔.wrap ul li{letter-spacing: normal;}
?

?

經典的Foo和getName

【參考文章：https://www.cnblogs.com/laojun/p/8287399.html】

?

?

JS中的this

function?a(xx){this.x=xx;return?this }; var?x=a(5); var?y=a(6); //寫出以下代碼的輸出結果 console.log(x.x); console.log(y.x);

答案是undefined 6

原因：【參考文章：https://segmentfault.com/q/1010000018487598】

1.在全局環境中使用var x，相當于給window添加x屬性
2.執行var x = a(5)，在function中給x賦值為5，但是將this返回給它本身，則導致它又等于window，此時x === x.x === x.x.x === ... === window，按照理論來說只要你能輸出所有的x.x，那應該能有機會看到5，但這本身是一個無限循環
3.至于y為何沒有undefined，原因是它沒有和x變量同名

?

?

清除浮動的方法

【參考文章：https://www.cnblogs.com/nxl0908/p/7245460.html?】

?

?

跨域

1、什么是同域？是指域名相同,端口相同,協議相同。

2、什么是同源策略？
同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數據是會報錯的。

不受同源策略限制的：
1、頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。
2、跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。

3、什么是跨域？是指一個域下的文檔或腳本試圖去請求另一個域下的資源。

4、跨域方法？

1、 通過jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域資源共享（CORS）
7、 nginx代理跨域
8、 nodejs中間件代理跨域
9、 WebSocket協議跨域

?

?

TCP與UDP

tcp和udp的區別?

1.tcp面向連接；udp無連接。

2.tcp提供可靠的服務；udp盡最大努力交付，不保證可靠交付。

3.udp具有較好的實時性，工作效率比tcp高。

4.tcp連接是點對點；udp可支持一對一、一對多、多對一的交互通信。

5.tcp對系統資源要求較多，udp較少。

tcp是如何確保可靠性的？

tcp通過校驗和，重傳控制，序號標識，滑動窗口、確認應答實現可靠傳輸。如丟包時的重發控制，還可以對次序亂掉的分包進行順序控制。

?

設計模式

單例模式：保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。

簡單工廠模式：定義一個用于創建對象的接口。

工廠方法模式：是簡單工廠模式的衍生，解決了許多簡單工廠模式的問題。

抽象工廠模式：為創建一組相關或相互依賴的對象提供一個接口，而且無需指定他們的具體類。

?

?

多態

定義：指允許不同類的對象對同一消息做出響應。即同一消息可以根據發送對象的不同而采用多種不同的行為方式。

多態存在的三個必要條件：1.要有繼承；2.要有重寫；3.父類引用指向子類對象。

?

?

重載和重寫

重載：重載字面意思多次的意思，也就是同一個方法實現多個不同的邏輯，并可以在同一個類中可以實現。其實現的原理是，方法名相同，參數的個數或者類型不同即可。

重寫：重寫就是要重新去寫（實現），一個類中不可能兩個定義一樣的方法。因此，重寫就是子類對父類定義的方法重新實現一次。

?

?

閉包

閉包就是定義在函數中的函數。

閉包的兩大作用：一個是讀取函數中的變量，另外一個是將函數中的變量的值存儲于內存中。

閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。

?

?

JS的數據類型

【參考文章： https://www.cnblogs.com/starof/p/6368048.html】

?

?

原型鏈

【參考文章： https://www.jianshu.com/p/dee9f8b14771】

var o1 = {}; var o2 =new Object(); var o3 = new f1();function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)');console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object

【參考文章： https://blog.csdn.net/u010365819/article/details/81326349】

第一題：person1.__proto__?是什么？
因為?person1.__proto__ === person1 的構造函數.prototype
因為?person1的構造函數 === Person
所以?person1.__proto__ === Person.prototype

第二題：Person.__proto__?是什么？
因為?Person.__proto__ === Person的構造函數.prototype
因為?Person的構造函數 === Function
所以?Person.__proto__ === Function.prototype

第三題：Person.prototype.__proto__?是什么？
Person.prototype?是一個普通對象，我們無需關注它有哪些屬性，只要記住它是一個普通對象。
因為一個普通對象的構造函數 === Object
所以?Person.prototype.__proto__ === Object.prototype

第四題：Object.__proto__?是什么？? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 參照第二題，因為 Person 和 Object 一樣都是構造函數

第五題：Object.prototype__proto__?是什么？
Object.prototype?對象也有proto屬性，但它比較特殊，為 null 。因為 null 處于原型鏈的頂端，這個只能記住。
Object.prototype.__proto__ === null

?

?

快速排序

【參考文章：https://blog.csdn.net/adusts/article/details/80882649】

?

冒泡排序

?

?

xml和json的區別

【參考文章：https://www.cnblogs.com/SanMaoSpace/p/3139186.html】

?

?

時間復雜度

?

?

數據結構

數據結構有哪些？

數組、棧、隊列、鏈表、樹、圖、堆、散列表。

?

?

==和===的區別

==用于一般比較，===用于嚴格比較，==在比較的時候可以轉換數據類型，===嚴格比較，只要類型不匹配就返回flase。
舉例說明：

"1" == true類型不同，"=="將先做類型轉換，把true轉換為1，即為 "1" == 1；此時，類型仍不同，繼續進行類型轉換，把"1"轉換為1，即為 1 == 1。

1.如果比較："1" === true 左側為字符型，右側為bool布爾型或int數值型，左右兩側類型不同，結果為false；

2.如果比較： 1 === 1 左側為int數值型，右側為int數值型，左右兩側類型相同，數值大小也相同，結果為true；

3.如果比較： 1 === 2 左側為int數值型，右側為int數值型，左右兩側類型相同，但數值大小不同，結果為false。

?

?

typeOf和instanceOf的區別

?

?

?

?

?

總結

以上是生活随笔為你收集整理的2019春招笔试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。