• 第 43 題：使用 sort() 對數組 [3, 15, 8, 29, 102, 22] 進行排序，輸出結果

let arr = [3, 15, 8, 29, 102, 22]
arr.sort((a, b)=> a - b);
console.log(arr)

call 和 apply 的區別是什么，哪個性能更好一些

1、Function.prototype.apply和Function.prototype.call 的作用是一樣的，區別在于傳入參數的不同；
2、第一個參數都是，指定函數體內this的指向；
3、第二個參數開始不同，apply是傳入帶下標的集合，數組或者類數組，apply把它傳給函數作為參數，call從第二個開始傳入的參數是不固定的，都會傳給函數作為參數。
4、call比apply的性能要好，平常可以多用call, call傳入參數的格式正是內部所需要的格式

某公司 1 到 12 月份的銷售額存在一個對象里面，如下：{1:222, 2:123, 5:888}，請把數據處理為如下結構：[222, 123, null, null, 888, null, null, null, null, null, null, null]

創新互聯公司主要從事成都做網站、網站設計、網頁設計、企業做網站、公司建網站等業務。立足成都服務沙灣,10年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:028-86922220

let obj = {1:222, 2:123, 5:888}
let arr= Array.from({length:12}).map((n,i)=>obj[i+1])
console.log(arr)
// [222, 123, null, null, 888, null, null, null, null, null, null, null]

• 性能優化

前端優化的方法有很多種，可以將其分為兩大類，

第一類是頁面級別的優化如http請求數，內聯腳本的位置優化等，

第二類為代碼級別的優化，例Javascript中的DOM 操作優化、CSS選擇符優化、圖片優化以及 HTML結構優化等等。

一、減少請求資源大小或者次數　
1、盡量合并和壓縮css和js文件，減少http請求次數以及減少請求資源的大小
2、盡量所使用的字體圖標或者SVG圖標來代替傳統png圖
3、采用圖片的懶加載（延遲加載），減少頁面第一次加載過程中http的請求次數
　　具體步驟：
　　　　1、頁面開始加載時不去發送http請求，而是放置一張占位圖
　　　　2、當頁面加載完時，并且圖片在可視區域再去請求加載圖片信息
4、能用css做的效果，不要用js做，能用原生js做的，不要輕易去使用第三方插件。
　　避免引入第三方大量的庫。而自己卻只是用里面的一個小功能
5、使用雪碧圖或者是說圖片精靈 css sprites6、減少對cookie的使用（最主要的就是減少本地cookie存儲內容的大小），因為客戶端操作cookie的時候，這些信息總是在客戶端和服務端傳遞。如果上設置不當，每次發送一個請求將會攜帶cookie

二、代碼優化相關
1、在js中盡量減少閉包的使用
　　原因：使用閉包后，閉包所在的上下文不會被釋放

2、減少對DOM操作，主要是減少DOM的重繪與回流（重排）
　　關于重排（回流）的分離讀寫：如果需要設置多個樣式，把設置樣式全放在一起設置，不要一條一條的設置。使用文檔碎片或者字符串拼接做數據綁定（DOM的動態創建）

3、在js中避免嵌套循環和"死循環"(一旦遇到死循環，瀏覽器就會直接卡掉)

4、把css放在body上，把js放在body下面
　　讓其先加載css（注意：這里關于優化沒有多大關系）

5、減少css表達式的使用

6、css選擇器解析規則所示從右往左解析的。減少元素標簽作為對后一個選擇對象

7、盡量將一個動畫元素單獨設置為一個圖層（避免重繪或者回流的大小）
　　注意：圖層不要過多設置，否則不但效果沒有達到反而更差了

8、在js封裝過程中，盡量做到低耦合高內聚。減少頁面的冗余代碼
10、css導入的時候盡量減少@import導入式，因為@import是同步操作，只有把對應的樣式導入后，才會繼續向下加茲安，而link是異步的操作

11、使用window.requestAnimationFrame(js的幀動畫)代替傳統的定時器動畫
　　如果想使用每隔一段時間執行動畫，應該避免使用setInterval，盡量使用setTimeout
　　代替setInterval定時器。因為setInterval定時器存在弊端：可能造成兩個動畫間隔時間
　　縮短

12、盡量減少使用遞歸。避免死遞歸
　　解決：建議使用尾遞歸

13、基于script標簽下載js文件時，可以使用defer或者async來異步加載

14、在事件綁定中，盡可能使用事件委托，減少循環給DOM元素綁定事件處理函數。

15、在js封裝過程中，盡量做到低耦合高內聚。減少頁面的冗余代碼

16、減少Flash的使用

三、存儲

1、結合后端，利用瀏覽器的緩存技術，做一些緩存（讓后端返回304，告訴瀏覽器去本地拉取數據）。（注意：也有弊端）可以讓一些不太會改變的靜態資源做緩存。比如：一些圖片，js，cs

2、利用h5的新特性（localStorage、sessionStorage）做一些簡單數據的存儲，
　　避免向后臺請求數據或者說在離線狀態下做一些數據展示。

• 談談前端工程化的理解

  前端工程化就是為了簡化開發流程，并行開發，互不影響且能夠方便合并整個項目。核心目標就是建立一種開發環境，提升整體的開發效率。

  • 并行開發，縮短開發周期
  • 快速定位問題，迅速解決問題
  • 部署可以動靜分離，簡化流程，提升程序的健壯性

• 緩存

    都是保存在瀏覽器端，并且是同源的

特性	cookie	localStorage	sessionStorage	indexDB
數據生命周期	一般由服務器生成，可以設置過期時間	除非被清理，否則一直存在	頁面關閉就清理	除非被清理，否則一直存在
數據存儲大小	4K	5M	5M	無限
與服務端通信	每次都會攜帶在 header 中，對于請求性能影響 cookie在瀏覽器和服務器間來回傳遞	不會自動把數據發給服務器，僅在本地保存	不會自動把數據發給服務器，僅在本地保存

• http

• 繼承 講的很通透的一篇

https://blog.csdn.net/qq593249106/article/details/83098432?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1

• instanceof 實現原理

    instanceof 用來測試一個對象是否為一個類的實例，用法為：

1	boolean result = objinstanceof Class

其中 obj 為一個對象，Class 表示一個類或者一個接口，當 obj 為 Class 的對象，或者是其直接或間接子類，或者是其接口的實現類，結果result 都返回 true，否則返回false。

• promise 限制并發數
• flex 1 全寫
• vue 雙向綁定原理
• https 實現原理（越詳細越好）
• node 進程之間如何通訊
• node 跟瀏覽器的 event loop 區別
• 瀏覽器渲染也頁面過程
• webpack 插件原理，如何寫一個插件
• 緩存有哪些，區別是什么
• 手寫 bind、reduce
• 防抖截流
• 遍歷樹，求樹的大層數。求某層最多的節點數
• node 開啟進程的方法有哪些，區別是什么
• node 如何部署的
• node check 階段做了什么，觸發了什么事件
• 前端模塊化的理解
• node 如何處理錯誤的
• 隱式轉換
• 數字在計算機怎么儲存的
• webpack 優化
• webpack 的 require 是如何查找依賴的
• webpack 如何實現動態加載
• 給你一個項目，從頭開始你怎么考慮
• 跨域有哪些
• 變量提升 let const var 區別
• script 標簽中 async 跟 defer 的區別

一道有趣的題

下面這個JS程序的輸出是什么：  

1 2 3 4 5 6 7 8 9 10 11 12

function Foo() { var i =0; return function() { console.log(i++); } }   var f1 = Foo(), f2 = Foo(); f1(); f1(); f2();

這道題考察閉包和引用類型對象的知識點：
1.一般來說函數執行完后它的局部變量就會隨著函數調用結束被銷毀，但是此題foo函數返回了一個匿名函數的引用（即一個閉包），它可以訪問到foo()被調用產生的環境，而局部變量i一直處在這個環境中，只要一個環境有可能被訪問到，它就不會被銷毀，所以說閉包有延續變量作用域的功能。這就好理解為什么：

 

1 2	f1();//0 f1();//1

2.我一開始認為f1和f2都=foo()是都指向了同一個function引用類型，所以順理成章就會答錯認為：

 

1

f2();//2

但其實foo()返回的是一個匿名函數，所以f1,f2相當于指向了兩個不同的函數對象，所以結果也就順理成章的變為：

 

1

f2();//0

網站標題：總結3-創新互聯
文章鏈接：http://www.2m8n56k.cn/article38/dhhpsp.html

成都網站建設公司_創新互聯，為您提供移動網站建設、網站設計公司、品牌網站設計、品牌網站制作、虛擬主機、手機網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯