A. Web前端工程師該如何寫出高質量的JavaScript代碼
今天小編要跟大家分享的文章是關於Web前端工程師該如何寫出高質量的JavaScript代碼。很多正在從事web前端工作的小夥伴們都想知道怎樣寫出高質量的JavaScript。因為想寫好一個JavaScript確實並不是一份簡單的事情，所以我們來聊聊零基礎要寫好JavaScript代碼的一些細節。關注好這些細節，你也能寫出高質量的JavaScript代碼了。
所謂的高質量的JavaScript代碼，其實指的就是可維護性高，可讀性高，可拓展性高的代碼，不僅開發的過程中寫得舒服，而且後期維護也很輕松的代碼質量。讓我們一起從細節來把握我們的JavaScript質量。一、可維護性高的代碼在我們開發過程中，當出現bug的時候，我們立刻去修復，這時候解決代碼bug的思路是最清晰的。否則，你去做了別的代碼任務或者這個bug出現了一段時間，你再去處理，你就忘了你寫的思路是什麼了，那這時候去處理這些代碼你就需要想兩個問題了：
1.花時間去學習和理解這個代碼問題
2.花時間了解bug的解決方案
同時，你如果是在企業中做的大型項目，都是團隊開發，開發和維護可能都不是同一個人（發現bug和修復bug的都不是作者）。
所以，必須降低大量的理解代碼的時間，無論是你自己寫的代碼，還是團隊中其他人的代碼。
這關繫到整個項目的發展和開發團隊每個人的生活幸福啊，畢竟我們應該多花時間去研究更多好的代碼想法，而不是時間都浪費在維護遺留代碼裡面。
所以，可維護性高的代碼很重要，一般可維護性高的代碼都有以下這些原則：
1._可讀性高（例如好的命名，解析性強的注釋）
2._一致性強（命名風格，編碼風格，代碼規范）
3._可預測性（明顯看出運行效果）
4._風格統一（看上去就知道是不是同一個人寫完的）
5._有記錄（有清晰的注釋開發記錄）二、全局變數的問題什麼是全局變數的問題，就是在你的javascript程序和網頁中的所有代碼都共享這些變數，他們都住在同一個命名空間裡面（全局作用域），所以當程序在執行過程中兩個不同部分定義同名但不同作用的全局變數的時候，命名沖突的情況就很常見了（許多小白遇到了就抓不著頭腦了：咦，這個命名沒問題啊，為什麼報錯了？）。
而且，網頁裡麵包含有其他不是開發作者寫的代碼而產生的全局命名問題也是比較常見的。比如說：
1.第三方javascript庫
2.甲方（或開發團隊自己封裝的代碼）的腳步代碼
3.第三方用戶跟蹤或分析代碼
4.不同類型的UI組件
.....
這些帶來的情況就很常見了，比如說，第三方腳本定義了一個變數，叫做userId，接著，你的函數裡面也寫了個userId的全局變數。這個時候的結果就是，後面的覆蓋掉前面的變數，第三方腳本直接就無效了，這種情況是很難調試出來的。
所以，盡可能的少使用全局變數很重要，例如命名空間模式或者函數立即執行，不過要想讓全局變數減少，最重要的還是多用var來聲明變數。三、忘記var的副作用隱式全局變數和顯式定義的全局變數是有點差異的。
具體如下：
·___ü_ar創建的全局變數（任何函數之外的程序中創建）是不能被刪除的。
·___揮型ü_ar創建的隱式全局變數（無視是否在函數中創建）是能被刪除的。
所以隱式全局變數並不是真正的全局變數，但它們是全局對象的屬性。
屬性是可以通過delete操作符刪除的，而變數是不能的，具體的代碼我這里就不說了。四、訪問全局對象在瀏覽器中，全局對象可以通過window屬性在代碼任何地方訪問（除非說你做了一些很超乎想像的事情，比如說聲明了一個名為window的局部變數）。
但是在其他環境下，這個方便的屬性可能被叫做其他什麼東西（甚至在程序中不可用）。
如果你需要在沒有硬編碼的window標識符下訪問全局對象，你可以在任何層級的函數作用域中做如下操作：
五、for循環在使用for循環的時候，可以遍歷拿到數組或者數組類似對象的值，比如說arguments和HTMLCollection對象，一般我們的寫法都是這樣的：
這種循環的方式並不是很好，每次執行循環的時候都需要獲取一次數組的長度，這個時候我們代碼的執行效率就特別低了，特別是當myArray不是數組的時候，而是一個HTMLCollection對象的時候。六、不擴展內置原型
擴增構造函數的prototype屬性是個很強大的增加功能的方法，但有時候它太強大了。
增加內置的構造函數原型（如Object(),Array(),或Function()）挺誘人的，但是這嚴重降低了可維護性，因為它讓你的代碼變得難以預測。
使用你代碼的其他開發人員很可能更期望使用內置的JavaScript方法來持續不斷地工作，而不是你另加的方法。
另外，屬性添加到原型中，可能會導致不使用hasOwnProperty屬性時在循環中顯示出來，這會造成混亂。七、避免隱式類型轉換JavaScript的變數在比較的時候會隱式類型轉換。
這就是為什麼一些諸如：false==0或「」==0返回的結果是true。
為避免引起混亂的隱含類型轉換，在你比較值和表達式類型的時候始終使用===和!==操作符。
八、編碼規范建立和遵循編碼規范是很重要的，這讓你的代碼保持一致性，一目瞭然，更易於閱讀和理解。
一個新的開發者加入這個團隊可以通讀規范，能馬上理解其它團隊成員書寫的代碼，更快上手進行開發。九、縮進代碼開發，標準的縮進是最基本的，沒有縮進的代碼基本就不能讀了。唯一糟糕的事情就是不一致的縮進，因為它看上去像是遵循了規范，但是可能一路上伴隨著混亂和驚奇。重要的是規范地使用縮進。十、注釋注釋這個，其實是應該只要是寫了代碼，都要有注釋的，讓別人一看你的代碼就能快速理解你的代碼。
在平時我們開發的時候，你很花時間去研究一個程序怎麼實現，你會很清楚的知道這個代碼是幹嘛用的。但是，你一周之後回來再看這段代碼，你就會燒掉很多腦細胞了。
當然，注釋也不能走極端路線：有的人就說不是要理解沒一段代碼嗎，那每個單獨變數或是單獨一行就給一段注釋。這樣就很沒有意義了。
一般來說，注釋都是記錄在函數的部分，它們的參數和返回值，或是一些不尋常的技術和方法。通過注釋可以給你代碼的未來閱讀者以諸多提示；
閱讀你代碼的人需要的是（不要讀太多的東西）注釋和函數名來理解你的代碼意義。十一、花括弧{}花括弧（也稱大括弧，下同）應該多使用，即使在它們為可選的時候。技術上來說，在in或是for中如果執行語句僅一條時，花括弧是不需要寫也能執行理想效果的，但是你最好還是用花括弧，因為這會讓你的代碼更有持續性和易於更新，並且更加好理解。
以上就是小編今天為大家分享的關於Web前端工程師該如何寫出高質量的JavaScript代碼的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
B. Web前端面試題匯總之JavaScript篇
今天小編要跟大家分享的文章是關於web前端面試題匯總之JavaScript篇。正在從事web前端學習和准備找工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
1，介紹js的基本數據類型。
Undefined、Null、Boolean、Number、String
2，介紹js有哪些內置對象?
Object是JavaScript中所有對象的父對象
數據封裝類對象：Object、Array、Boolean、Number和String
其他對象：Function、Arguments、Math、Date、RegExp、Error
3，說幾條寫JavaScript的基本規范?，
1.不要在同一行聲明多個變數。
2.請使用===/!==來比較true/false或者數值
3.使用對象字面量替代newArray這種形式
4.不要使用全局函數。
5.Switch語句必須帶有default分支
6.函數不應該有時候有返回值，有時候沒有返回值。
7.For循環必須使用大括弧
8.If語句必須使用大括弧
9.for-in循環中的變數應該使用var關鍵字明確限定作用域，從而避免作用域污染。
4，JavaScript原型，原型鏈?有什麼特點?
每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，
如果這個對象內部不存在這個屬性，那麼他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，
於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。
關系：instance.constructor.prototype=instance.__proto__
特點：
JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。
當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性，如果沒有的話，
就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到Object內建對象。
functionFunc(){}
Func.prototype.name="Sean";
Func.prototype.getInfo=function(){returnthis.name;}
varperson=newFunc();
//現在可以參考
varperson=Object.create(oldObject);
console.log(person.getInfo());
//它擁有了Func的屬性和方法//"Sean"console.log(Func.prototype);
//Func{name="Sean",getInfo=function()}復制代碼
5，JavaScript有幾種類型的值?，你能畫一下他們的內存圖嗎?
棧：原始數據類型(Undefined，Null，Boolean，Number、String)
堆：引用數據類型(對象、數組和函數)
兩種類型的區別是：存儲位置不同;
原始數據類型直接存儲在棧(stack)中的簡單數據段，占據空間小、大小固定，屬於被頻繁使用數據，所以放入棧中存儲;
引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定,如果存儲在棧中，將會影響程序運行的性能;引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其
在棧中的地址，取得地址後從堆中獲得實體
6，Javascript如何實現繼承?
1、構造繼承
2、原型繼承
3、實例繼承
4、拷貝繼承
原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。
functionParent(){this.name='wang'}functionChild(){this.age=28;}
Child.prototype=newParent();//繼承了Parent，通過原型vardemo=newChild();
alert(demo.age);alert(demo.name);//得到被繼承的屬性復制代碼
7，Javascript作用鏈域?
作用域鏈的作用是保證執行環境里有權訪問的變數和函數是有序的，作用域鏈的變數只能向上訪問，變數訪問到window對象即被終止，作用域鏈向下訪問變數是不被允許的。
8，談談This對象的理解。
this總是指向函數的直接調用者(而非間接調用者);
如果有new關鍵字，this指向new出來的那個對象;
在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window;
this就是指的是當前對象
9，null，undefined的區別?
null表示一個對象被定義了，值為「空值」;
undefined表示不存在這個值。
typeofundefined//"undefined"
undefined:是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回
undefined;
例如變數被聲明了，但沒有賦值時，就等於undefined
typeofnull//"object"
null:是一個對象(空對象,沒有任何屬性和方法);
例如作為函數的參數，表示該函數的參數不是對象;
注意：
在驗證null時，一定要使用===，因為==無法分別null和undefined
undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：
(1)變數被聲明了，但沒有賦值時，就等於undefined。
(2)調用函數時，應該提供的參數沒有提供，該參數等於undefined。
(3)對象沒有賦值的屬性，該屬性的值為undefined。
(4)函數沒有返回值時，默認返回undefined。
null表示"沒有對象"，即該處不應該有值。典型用法是：
(1)作為函數的參數，表示該函數的參數不是對象。
(2)作為對象原型鏈的終點。
10，["1","2","3"].map(parseInt)答案是多少?
[1,NaN,NaN]因為parseInt需要兩個參數(val,radix)，
其中radix表示解析時用的基數。
map傳了3個(element,index,array)，對應的radix不合法導致解析失敗。
以上就是小編今天為大家分享的關於web前端面試題匯總之JavaScript篇的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
C. 2020年Web前端面試題匯總(一)
今天小編要跟大家分享的文章是關於2020年Web前端面試題匯總。由於內容較多小編分開為大家介紹，今天首先來和小編一起看一看第一部分的內容，希望這些面試題能夠對正准備找Web前端相關工作的小夥伴們有所幫助。
1.說幾條寫JavaScript的基本規范?
1)不要在同一行聲明多個變數;
2)請使用===/!==來比較true/false或者數值;
3)使用對象字面量替代newObject這種形式;
4)減少使用全局函數,全局變數;
5)switch語句必須帶有default分支;
6)if語句必須使用大括弧;
7)for-in循環中的變數;
應該使用var關鍵字明確限定作用域;
從而避免作用域全局污染。
2.說說平衡二叉樹?
平衡二叉搜索樹(Self-balancingbinarysearchtree)
又被稱為AVL樹。
具有以下性質：
1)它是一棵空樹或它的左右兩個子樹
的高度差的絕對值不超過1，
並且左右兩個子樹都是一棵平衡二叉樹。
2)平衡二叉樹必定是二叉搜索樹，反之則不一定。
3)平衡二叉樹的常用實現方法有紅黑樹、AVL、
替罪羊樹、Treap、伸展樹等。
最小二叉平衡樹的節點的公式如下：
F(n)=F(n-1)+F(n-2)+1備註：1是根節點，
F(n-1)是左子樹的節點數量，
F(n-2)是右子樹的節點數量。
3.清除浮動和解決垂直外邊距重疊的解決方案?
問題描述:
1)父元素沒有設置寬高，尺寸由子元素撐起;
子元素一旦浮動，父元素高度會發生塌陷。
2)子元素設置margin-top會作用的父元素的margin-top;
此時會造成垂直外邊距重疊。
.clearfix::after,.clearfix::before{
content:''
display:table;
clear:both;
}
4.sessionStorage、localStorage和cookie?
相同點:
都用於瀏覽器端存儲的緩存數據;
不同點:
1)存儲內容是否發送到伺服器端
當設置了Cookie後，數據會發送到伺服器端，
造成一定的寬頻浪費;xxxstorage則會將數據保存
到本地，不會造成寬頻浪費;
2)數據存儲大小不同
Cookie數據不能超過4K，適用於會話標識;
xxxstorage數據存儲可以達到5M;
3)數據存儲的有效期限不同
cookie只在設置了Cookid過期時間
之前一直有效，即使關閉窗口或者瀏覽器;
sessionStorage,僅在關閉瀏覽器之前有效;
localStorage,數據存儲永久有效;
4)作用域不同
cookie和localStorage是在同源同窗口中
都是共享的;
sessionStorage不在不同的瀏覽器窗口
中共享，即使是同一個頁面;
5.判斷一個單詞是否是迴文?
迴文是指把相同的詞彙或句子，
在下文中調換位置或顛倒過來，
產生首尾回環的情景，
叫做迴文，也叫回環。
比如cacac，redivider。
letcheckPalindrom=(str)=>{
returnstr===
str.split('').reverse().join('');
}
6.不藉助臨時變數，進行兩個整數的交換?
輸入a=3,b=1,
輸出a=1,b=3
letswap=(a,b)=>{
b=b-a;
a=a+b;
b=a-b;
return[a,b];
}
7.請寫出至少5個html5新增的標簽，並說明其語義和應用場景?
section：定義文檔中的一個章節;
nav：定義只包含導航鏈接的章節;
header：定義頁面或章節的頭部;
它經常包含logo、頁面標題和導航性的目錄。
footer：定義頁面或章節的尾部;
它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容，
如果被刪除，剩下的內容仍然很合理。
8.get和post請求在緩存方面的區別?
get請求類似於查找的過程，用戶獲取數據，
可以不用每次都與資料庫連接，所以可以使用緩存。
post不同，post做的一般是修改和刪除的工作，
所以必須與資料庫交互，所以不能使用緩存。
因此get請求適合於請求緩存。
9.如何解決非同步回調地獄?
promise、generator、async/await
10.圖片的懶載入和預載入?
預載入：提前載入圖片，
當用戶需要查看時可直接
從本地緩存中渲染。
懶載入：懶載入的主要目的
是作為伺服器前端的優化，
減少請求數或延遲請求數。
兩種技術的本質：
兩者的行為是相反的，
一個是提前載入，
一個是遲緩甚至不載入。
懶載入對伺服器前端有一定
的緩解壓力作用，
預載入則會增加伺服器前端壓力。
11.bind，apply，call的區別?
通過apply和call改變函數的this指向，
這兩個函數的第一個參數都是一樣的，
表示要改變指向的那個對象，
第二個參數，apply是數組，
而call則是arg1,arg2...這種形式。
通過bind改變this作用域
會返回一個新的函數，
這個函數不會馬上執行。
12.js怎麼控制一次載入一張圖片，載入完後再載入下一張?
方法一:
varobj=newImage();
obj.src="#/21.jpg";
obj.onload=function(){
document.getElementById("pic")
.innnerHTML="
}
D. 一個前端 Javascript的問題，有點迷，好像沒有問這種問題了，但是問了好多人都模糊其詞
這個涉及「變數聲明的提升」的知識
JavaScript程序在執行之前，有一個預讀階段。在預讀階段，程序會識別所有的變數定義。
如果使用一個變數，但是這個變數沒有定義過，會報錯：
console.log(a); //報錯，a is not define
如果使用一個變數，這個變數先使用然後再定義，這個變數會輸出undefined：
console.log(a); //undefined
var a = 10;
變數在預讀階段，提升的只是定義，不是它的值。所以JS規定，這種沒有值的變數，值默認是undefined。
需要注意的是，變數聲明的提升，會把變數提升到當前作用域的最開始位置。
E. 前端運算符有哪些
算術運算符 加減乘除 自增i++ 自減i-- %求余
賦值運算符 a+=c 相當於 a+c
邏輯運算符 與&& 或|| 非!
比較運算符 大於等於小於 不等於！=
F. 【Web前端基礎】算術運算符的優先順序順序
算術運算的優先順序順序：先乘除，後加減。如有括弧，先算括弧內的算式，後算括弧外的算式。如有小括弧、中括弧、大括弧，先算小括弧內的，再算中括弧內的，再算大括弧內的。
G. 在面試前端開發的時候遇到一個面試題，求解 var a =10; (function(){ console.log(a); var a=100; })
vara=10;
(function(){
console.log(a);
vara=100;
})();
結果：輸出undefined
解釋：
function中有var a = 100;
聲明會提升到function最開頭，但賦值發生在最後。
上面的代碼等價於：
vara=10;
(function(){
vara;
console.log(a);
a=100;
})();
列印a的時候，a並沒有在function內賦值，所以是undefined
H. web前端中原生js如何獲取後端php傳遞來json
json有2種結構，一種是中括弧括起來的，是數組，可以直接用 下標獲取值
還有一種是大括弧括起來的，是對象，對象的結構是 key：value，key：value。。形勢的，
這種取值的方法是 對象名。key
如果是數組，你可以直接 對象[對象.length]="你要加入的值"
如果是對象 你可以 對象.你要加的key = "你要加入的值"
I. 前端拿到的介面最後有一個大括弧代表什麼
比如dedecms
{channel}{/channel}
像這樣成對出現的標簽，都是開發這套程序的開發者為了方便使用，給用戶留下的使用介面。後台程序會通過這個標簽，調用指定的演算法和程序文件去做出響應。
差不多就是這個意思。
J. html中的{....}這兩個大括弧，是干什麼用的
據我所知，在html語言里是沒有{}這符號的，但在css里卻是必須用到，表示一個整體的選擇符，{}裡面寫的是css的各鍾屬性