今天小編要跟大家分享的文章是關於Web前端初學者要知道的JavaScript技巧。本篇文章小編為大家准備了一些JavaScript的編程技巧。熟悉Web前端工作的小夥伴都知道JavaScript的重要性。這篇文章是為初學者准備的，但我希望即使是中級JavaScript開發人員也能在這個列表中找到一些新的東西。下面我們一起來看一看吧！
1、...過濾唯一值
Set對象類型是在ES6中引入的，配合展開操作...一起，我們可以使用它來創建一個新數組，該數組只有唯一的值。constarray=[1,1,2,3,5,5,1]
constuniqueArray=[...newSet(array)];
console.log(uniqueArray);//Result:[1,2,3,5]
在ES6之前，隔離惟一值將涉及比這多得多的代碼。
此技巧適用於包含基本類型的數組：undefined，null，boolean，string和number。
(如果你有一個包含對象，函數或其他數組的數組，你需要一個不同的方法!)
2、與或運算
三元運算符是編寫簡單(有時不那麼簡單)條件語句的快速方法，如下所示：x>100?'Above100':'Below100'
x>100?(x>200?'Above200':'Between100-200'):'Below100'
但有時使用三元運算符處理也會很復雜。相反，我們可以使用'與'&&和'或'||邏輯運算符以更簡潔的方式書寫表達式。
這通常被稱為「短路」或「短路運算」。
它是怎麼工作的
假設我們只想返回兩個或多個選項中的一個。
使用&&將返回第一個條件為假的值。如果每個操作數的計算值都為true，則返回最後一個計算過的表達式。letone=1,two=2,three=3;
console.log(one&&two&&three);//Result:3
console.log(0&&null);//Result:0
使用||將返回第一個條件為真的值。如果每個操作數的計算結果都為false，則返回最後一個計算過的表達式。letone=1,two=2,three=3;
console.log(one||two||three);//Result:1
console.log(0||null);//Result:null
例一
假設我們想返回一個變數的長度，但是我們不知道變數的類型。
我們可以使用if/else語句來檢查foo是可接受的類型，但是這可能會變得非常冗長。或運行可以幫助我們簡化操作：
return(foo||[]).length
如果變數foo是true，它將被返回。否則，將返回空數組的長度:0。
例二
你是否遇到過訪問嵌套對象屬性的問題?你可能不知道對象或其中一個子屬性是否存在，這可能會導致令人沮喪的錯誤。
假設我們想在this.state中訪問一個名為data的屬性，但是在我們的程序成功返回一個獲取請求之前，data是未定義的。
根據我們使用它的位置，調用this.state.data可能會阻止我們的應用程序運行。為了解決這個問題，我們可以將其做進一步的判斷：if(this.state.data){
returnthis.state.data;
}else{return'FetchingData'
}
但這似乎很重復。'或'運算符提供了更簡潔的解決方案：
return(this.state.data||'FetchingData');
一個新特性:OptionalChaining
過去在Object屬性鏈的調用中，很容易因為某個屬性不存在而導致之後出現Cannotreadpropertyxxx
ofundefined的錯誤。
那optionalchaining就是添加了?.這么個操作符，它會先判斷前面的值，如果是null或undefined，就結束調用、返回
undefined。
例如，我們可以將上面的示例重構為this.state.data?.()。或者，如果我們主要關注state是否已定義，我們可以返回
this.state?.data。
該提案目前處於第1階段，作為一項實驗性功能。你可以在這里閱讀它，你現在可以通過Babel使用你的JavaScript，將
@babel/plugin-proposal-optional-chaining添加到你的.babelrc文件中。
3、轉換為布爾值
除了常規的布爾值true和false之外，JavaScript還將所有其他值視為『truthy』或『falsy』。
除非另有定義，否則JavaScript中的所有值都是'truthy'，除了0，「」，null，undefined，NaN，當然還有
false，這些都是'falsy'
我們可以通過使用負算運算符輕松地在true和false之間切換。它也會將類型轉換為「boolean」。constisTrue=!0;
constisFalse=!1;
constalsoFalse=!!0;
console.log(isTrue);//Result:true
console.log(typeoftrue);//Result:"boolean"
4、轉換為字元串
要快速地將數字轉換為字元串，我們可以使用連接運算符+後跟一組空引號""。
constval=1+"";
console.log(val);//Result:"1"
console.log(typeofval);//Result:"string"
5、轉換為數字
使用加法運算符+可以快速實現相反的效果。
letint="15";int=+int;
console.log(int);//Result:15
console.log(typeofint);Result:"number"
這也可以用於將布爾值轉換為數字，如下所示
console.log(+true);//Return:1
console.log(+false);//Return:0
在某些上下文中，+將被解釋為連接操作符，而不是加法操作符。當這種情況發生時(你希望返回一個整數，而不是浮點數)，您可以使用兩個波浪號:
~~。
連續使用兩個波浪有效地否定了操作，因為—_(_—_n_—_1)_—_1=n+1_—_1=n。換句話說，~—16等於15。
constint=~~"15"console.log(int);//Result:15
console.log(typeofint);
Result:"number"
雖然我想不出很多用例，但是按位NOT運算符也可以用在布爾值上：~true=-2和~false=-1。
6、性能更好的運算
從ES7開始，可以使用指數運算符**作為冪的簡寫，這比編寫Math.pow(2,3)更快。
這是很簡單的東西，但它之所以出現在列表中，是因為沒有多少教程更新過這個操作符。
console.log(2**3);//Result:8
這不應該與通常用於表示指數的^符號相混淆，但在JavaScript中它是按位異或運算符。
在ES7之前，只有以2為基數的冪才存在簡寫，使用按位左移操作符<<
Math.pow(2,n);
2<<(n-1);2**n;
例如，2<<3=16等於2**4=16。
7、快速浮點數轉整數
如果希望將浮點數轉換為整數，可以使用Math.floor()、Math.ceil()或Math.round()。但是還有一種更快的方法可以使用
|(位或運算符)將浮點數截斷為整數。
console.log(23.9|0);//Result:23
console.log(-23.9|0);//Result:-23
|的行為取決於處理的是正數還是負數，所以最好只在確定的情況下使用這個快捷方式。
如果n為正，則n|0有效地向下舍入。如果n為負數，則有效地向上舍入。
更准確地說，此操作將刪除小數點後面的任何內容，將浮點數截斷為整數。
你可以使用
~~來獲得相同的舍入效果，如上所述，實際上任何位操作符都會強制浮點數為整數。這些特殊操作之所以有效，是因為一旦強制為整數，值就保持不變。
刪除最後一個數字
按位或運算符還可以用於從整數的末尾刪除任意數量的數字。這意味著我們不需要使用這樣的代碼來在類型之間進行轉換。
letstr="1553";
Number(str.substring(0,str.length-1));
相反，按位或運算符可以這樣寫：
console.log(1553/10|0)//Result:155
console.log(1553/100|0)//Result:15
console.log(1553/1000|0)//Result:1
8、類中的自動綁定
我們可以在類方法中使用ES6箭頭表示法，並且通過這樣做可以隱含綁定。這通常會在我們的類構造函數中保存幾行代碼，我們可以愉快地告別重復的表達式，例如
this.myMethod=this.myMethod.bind(this)
importReact,{Component}fromReact;
{
constructor(props){
super(props);
this.state={};
}
myMethod=()=>{
//Thismethodisboundimplicitly!}
render(){
return(
<>
{this.myMethod()}
㈣ javascript中 if(!-[1,])是什麼意思呀
這是一個判斷IE瀏覽器版本的精簡腳本
IE瀏覽器不管是什麼版本，總是跟Web標准有些不太兼容。對於代碼工作者來說，自然是苦不堪言，為了考慮IE的兼容問題，不管是寫 CSS 還是 JS，往往都要對 IE 特別對待，這就少不了做些判斷。本文不討論如何區分 IE 的樣式，僅是 JS 判定 IE 瀏覽器。
這個目前世界上最短的 Javascript 判定 IE 瀏覽器的方法來自俄羅斯！它已經在各版本的 IE 以及目前其他流行的瀏覽器上經過測試，基於 IE 的 Bug，微軟雖然已經意識到，但是從來沒有糾正過。
<script type=』text/javascript』>
var ie = !-[1,];
alert(ie);
</script>
以上代碼運行結果：IE 下返回true，其他標准瀏覽器返回false。!-[1,]，僅僅只有 6 bytes！
不過如果反過來判斷，標准瀏覽器返回 true 而 IE 返回 false的話，則可以再縮短一個byte。
<script type=』text/javascript』>
notIe = -[1,];
if(-[1,]){
// 標准瀏覽器代碼
}else{
// IE Only的代碼
}
</script>
看完了這些，你們是不是很好奇這些是怎麼運行的？請繼續看下文。
這個 Bug 產生的原因是 IE 會添加一個空數組元素到數組元素的總數里。
[1,]. Length標准瀏覽器會返回 1 (基於標準的 ECMAscript ，在數組最後的逗號」,」會被忽略，這是為了方便在一列里顯示以及自動生成等)，但是 IE 會返回 2。當你列印這個數組的時候 IE 將會返回 「1, 「，也就是兩個元素，而其他標准瀏覽器將會返回 「1″。
這很容易驗證，比如在 IE 和 FF中運行以下代碼：
<script type=』text/javascript』>
alert([,]==』,』);
//這是8個字元判定IE
</script>
[1,]實際上瀏覽器的操作是toString()轉換成字元串的操作，-[1,]是將字元串強制轉換為數字。而 IE 將會返回 NaN，但是遺憾的是 NaN 並不是一個數字，因為[1,]轉換成字元串後的」1,」裡面帶有逗號。而其他標准瀏覽器會返回 -1，這是一個非 0 的數字。
你知道，NaN 轉換成 Boolean 型將返回 false，所以-[1,]在 IE 下將返回 false。而任何非 0 的數字轉換成 Boolean 型(例如-1)，在 標准瀏覽器下都將返回 true。所以我們得到了一個判定結果，!-[1,]在 IE 下返回true，而在其他標准瀏覽器下返回 false。也就達到了區分判定 IE 瀏覽器的目的。
當然，如前文所說，這個 Bug 其實微軟很早就已經知道，但是卻一直沒有去修復它，所以在未來的 > IE8 的 IE 瀏覽器也就不確定是否依舊可以，不過基本上這么多代的 IE 都沒有修復，未來的 IE 也不太會去修復的樣子。
以下是其他的一些區分判定 IE 瀏覽器的代碼，也可以參考下:
<script type=』text/javascript』>
// Option from Dean Edwards:
var ie = /*@cc_on!@*/false;
// Use the commented line:
var ie//@cc_on=1;
// Variation (shorter variable):
var ie = 』\v』==』v』;
/ / Option to Gareth Hayes (former record-holder):
var ie = !+"\v1";
</ script>
㈤ Web前端初學者要避免的常見錯誤有哪些
今天小編要跟大家分享的文章是關於Web前端初學者要避免的常見錯誤有哪些?相信對於剛剛接觸Web前端的初學者，會遇到很多問題，在學習的過程中也會有各種各樣的挫折。雖然有些錯誤與某一個具體的行為相關，但有些錯誤卻是所有Web開發人員都需要面對的挑戰。
今天小編為大家准備了這篇關於Web初學者常見的錯誤的文章，希望能夠對小夥伴們有所幫助。下面來和小編一起看一看吧！
錯誤一：所謂「應該能行」的代碼
錯誤：無論是JavaScript，還是在伺服器上運行的代碼，開發人員都需要測試並確認它是否可以正常工作，而不是在部署了之後，就認為它應該就能從一而終地運行。
影響：不經過適當錯誤檢查的網站就是對最終用戶耍流氓。不僅會極大地影響用戶體驗，而且其錯誤消息內容的類型可能會給黑客線索來滲透這個站點。
如何避免：是人都會犯錯，這個哲理同樣適用於編碼。使用JavaScript，一定要實施好的技術來防止並抓住錯誤。雖然這篇文章描繪了用JavaScript編碼WindoWs應用程序，但是大部分的內容也適用於Web開發，許多提示都很不錯!另一種能讓代碼變得可靠又能在未來變化中存活下來的方法是單元測試。
如果我們夠仔細，那麼就能捕捉到伺服器端的代碼失敗，而不被用戶發現。只顯示必要的信息，並且一定要確保設置友好的錯誤頁面，如HTTP404s。
錯誤二：寫分叉代碼
錯誤：本著支持所有瀏覽器和版本的崇高理念，開發人員立志創建可對任意可能情況作出回應的代碼。代碼中if語句成堆，所有方向都有分叉。
影響：隨著瀏覽器新版本的更新，代碼文件會變得越來越笨拙和難以管理。
如何避免：實現代碼的功能檢測和瀏覽器/版本檢測。功能檢測技術不僅可以顯著減少代碼量，還更易於閱讀和管理。不妨考慮使用如Modernizr這樣的庫，不僅有助於功能檢測，還能自動幫助提供不能跟上HTML5和CSS3速度的舊版瀏覽器的反饋支持。
錯誤三：非響應式設計
錯誤：假設開發/設計人員在相同尺寸的顯示器上開發網站。
影響：當在移動設備或在非常大的屏幕查看網站時，用戶體驗要麼很難看到頁面的重要方面，要麼甚至要時刻注意著不導航至其他網頁。
如何避免：響應式的思維方式。在網站中使用響應式設計。這里有一些關於這方面的實用教程，包括響應式圖片，還有一個非常受歡迎的庫，那就是Bootstrap。
錯誤四：網站過多刷新
錯誤：創建的網站需要為每一個互動而全面刷新頁面。
影響：類似於頁面臃腫，頁面載入時間的性能會受到影響。用戶體驗缺乏流暢性，並且每次互動都可能導致網頁短暫(或長時間)的復位。
如何避免：快速避免這種情況的一個方法就是，通過測定回發到伺服器的內容是否是真正需要的。例如，當不依賴伺服器端資源的時候，客戶端腳本可用於提供直接結果。你也可以應用AJAX技術或進一步使用單頁的應用程序「SPA」方法。流行的JavaScript庫/框架，如JQuery、KnockoutJS和AngularJS，能讓這些方法的採用變得容易得多。
錯誤五：做了太多的無用功
錯誤：開發人員花了很長的時間來創建Web內容。大量的時間花在了重復的任務上，或者自己敲代碼寫了很多。
影響：初始網站的發布和後續的更新時間過於冗長。如果其他開發人員也在做同樣的工作，卻用了更少的時間和精力，那麼你的開發價值顯然就低了。手動勞動很容易出現錯誤，而排除故障錯誤需要更多的時間。
如何避免：探索你的選擇。在開發的每一個階段考慮使用新的工具和新的流程技術。例如，你目前使用的代碼編輯器相比SublimeText和Visual
Studio，如何?不管你使用的是什麼樣的代碼編輯器，你最近有好好鑽研它的功能嗎?也許只投入稍稍一點時間去仔細閱讀文檔，就可以發現做事的新方法，為今後節省一個又一個小時的時間。
例如，在這篇文章中，擴展Visual
Studio可以為Web開發人員提高生產效率。不要錯過網上可用的幫助工具!例如，檢查在dev.modern.ie上的工具以簡化測試(跨多個平台和設備)以及排除故障。
結語
通過識別這些常見的錯誤，Web開發人員可以避免很多讓其他人飽受煎熬的挫折。我們不僅需要承認錯誤，還應該清楚錯誤的影響，並採取措施避免錯誤，這樣才能有更好的開發表現——並有信心完成任務!
以上就是小編今天為大家分享的關於Web前端初學者要避免的常見錯誤有哪些的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
㈥ html5的CSS3選擇器中的反選偽類選擇器怎麼選
#div:not(':last-child')
選擇id=div的除了最後一個子元素以外的所有子元素
#div:not(p) 選擇id=div的元素下所有不是p元素的子元素
㈦ if (person!=null && person!="")WEB前端這個表示什麼，能分解一下嗎
1.這個if判斷代碼可能起到的作用與要達到的實際效果:
------>
person可能代表表單標簽中某個input輸入框的內容,
不管用戶做了什麼(比如什麼也不輸入就直接提交或者輸入又清空了後提交.....),
只要最後的輸入為空,就不能提交,並給出相應的提示,
這一點,我們應該有所體會了,尤其是我們在網站注冊用戶時經常遇到)
這里涉及網頁解釋執行的順序和緩存機制:
(幾乎所有的瀏覽器都支持javaScript,不支持的少數,幾乎可以排除,不使用)
網頁中的javaScript腳本代碼
往往需要在文檔載入完成後才能夠去執行，
否則可能導致無法獲取對象的情況，為了避免這種情況的發生，改變執行的先後順序,可以使用以下兩種方式:
一.將腳本代碼放在網頁的底端，這樣在運行腳本代碼的時候，可以確保要操作的對象已經載入完成。(但實際我們還是按照常規,不採用這種方式,一般為了開發效率,使用js框架,
script標簽放在head標簽內,位於正文body的前面)
二.通過原始的window.onload來執行腳本代碼(當然這是比較保險的做法)。(但實際也不採用,因為大多數都用js框架來封裝這個window.onload,使用的也是封裝後的window.onload,這也可能涉及兼容性問題)
以上2種方式都不採用,實際開發中使用js等框架,仍可能存在無法獲取對象(對象=null)問題
使用js框架往往有瀏覽器兼容性問題,不同瀏覽器有的支持,有的不支持
如果支持就能按照代碼的設想去執行,也就是框架可以使用封裝的onload改變腳本的執行順序
(當然,這是理想的情況,沒有考慮潛在兼容性問題)
如果不支持,那可能就不生效了,按照原始的從上到下的順序依次執行
這樣的情況下:
(使用js框架,script標簽放在head標簽內,位於正文body的前面,那麼)
if判斷的位置在產生person實例(body)之前,
第1次載入時:
if語句先於產生person實例執行,瀏覽器當前頁面的緩存為空,
有可能person為null的問題
(即使使用js框架去改變載入執行順序,有的瀏覽器可以做到person不為null,但這樣的改變潛在兼容性問題,有的可能不生效),
,執行if後才產生person實例,出現在瀏覽器緩存
第2次及以後的載入,瀏覽器讀取上一次時的person緩存,person不再為null
也就是,
if(person!=null),可以判斷網頁是否已經載入過person了(不再是第1次載入)
如果已經載入過了(person!=null條件成立,那麼再判斷輸入是否空輸入,""表示空輸入,輸入為空就不能提交了
關於&&邏輯操作符:
只有&&左邊的條件(person!=null)成立才會進行右邊的判斷(person!=""),否則不判斷,直接忽略這個if語句,不再執行if之後的語句體{...}
因此可以得到判斷這么寫的原因:
(不管載入執行順序如何)
只要不為null的情況下判斷輸入為空才有意義,反過來是沒有意義的
(判斷輸入為空的先決條件是person!=null)
補充:對於輸入的tips:
person!=null && person!=""
的判斷順序是不能調換的,
不能寫成 person!=""&&person!=null,
person!=""&&person!=null,
判斷順序不能調換的原因:無論person=null或者person!=null都滿足左邊的條件,雖然person=null不滿足右邊的條件,不會執行if的語句體,但person!=""沒有發揮應有的作用,因為沒有滿足person!=""判斷的先決條件
㈧ Java web中，定義函數max（），反回所有參數中的最大值！！
你這個函數既然要進行返回所有參數的最大值,首先你應該對你的參數格式進行檢查,我就舉個例子吧
function max(var a,var b,var c){
//其中isNaN是判斷參數是否為數字類型,是則返回false
if(!a.isNaN&&!b.isNaN&&!c.isNaN){
//進行排序
var array = [a,b,c];
var max = 0,
result = 0;
for(var i=0;i<array.length;i++){
result += array[i];
if(array[i] > max){
max = array[i];
}
//返回最大值
return max;
}
}
}
希望能夠採納,謝謝
㈨ Web前端工程師要掌握的JavaScript簡寫方法
今天小編要跟大家分享的文章是關於Web前端工程師要掌握的JavaScript簡寫方法。由於前端開發的火熱和一些IT巨頭公司對
web前端開發人員的需求旺盛，讓越來越多的人轉入前端。前端開發領域是IT技術語言領域唯一一個男女老少都可以快速入門並快速提升興趣的領域，今天就來聊聊前端的一些技巧，下面我們一起來看一看吧！
1.三元操作符
當想寫if...else語句時，使用三元操作符來代替。
1.constx=20;
2.letanswer;
3.if(x>10){
4.answer='isgreater'
5.}else{
6.answer='islesser'
7.}
簡寫：
1.constanswer=x>10?'isgreater':'islesser'
也可以嵌套if語句：
1.constbig=x>10?"greater10":x
2.短路求值簡寫方式
當給一個變數分配另一個值時，想確定源始值不是null，undefined或空值。可以寫撰寫一個多重條件的if語句。
1.if(variable1!==null||variable1!==undefined||variable1!=='')
{
2.letvariable2=variable1;
3.}
或者可以使用短路求值方法：
1.constvariable2=variable1||'new'
3.聲明變數簡寫方法
1.letx;
2.lety;
3.letz=3;
簡寫方法：
1.letx,y,z=3;
4.if存在條件簡寫方法
1.if(likeJavaScript===true)
簡寫：
1.if(likeJavaScript)
只有likeJavaScript是真值時，二者語句才相等。
如果判斷值不是真值，則可以這樣：
1.leta;
2.if(a!==true){
3.//dosomething...
4.}
簡寫：
1.leta;
2.if(!a){
3.//dosomething...
4.}
5.JavaScript循環簡寫方法
1.for(leti=0;i
簡寫：for(letindexinallImgs)也可以使用Array.forEach：
1.functionlogArrayElements(element,index,array){
2.console.log("a["+index+"]="+element);
3.}
4.[2,5,9].forEach(logArrayElements);
5.//logs:
6.//a[0]=2
7.//a[1]=5
8.//a[2]=9
6.短路評價
給一個變數分配的值是通過判斷其值是否為null或undefined，則可以：
1.letdbHost;
2.if(process.env.DB_HOST){
3.dbHost=process.env.DB_HOST;
4.}else{
5.dbHost='localhost'
6.}
簡寫：
1.constdbHost=process.env.DB_HOST||'localhost'
7.十進制指數
當需要寫數字帶有很多零時(如10000000)，可以採用指數(1e7)來代替這個數字：for(leti=0;i<10000;i++){}簡寫：
1.for(leti=0;i<1e7;i++){}
2.
3.//下面都是返回true
4.1e0===1;
5.1e1===10;
6.1e2===100;
7.1e3===1000;
8.1e4===10000;
9.1e5===100000;
8.對象屬性簡寫
如果屬性名與key名相同，則可以採用ES6的方法：
1.constobj={x:x,y:y};
簡寫：
1.constobj={x,y};
9.箭頭函數簡寫
傳統函數編寫方法很容易讓人理解和編寫，但是當嵌套在另一個函數中，則這些優勢就盪然無存。
1.functionsayHello(name){
2.console.log('Hello',name);
3.}
4.
5.setTimeout(function(){
6.console.log('Loaded')
7.},2000);
8.
9.list.forEach(function(item){
10.console.log(item);
11.});
簡寫：
1.sayHello=name=>console.log('Hello',name);
2.
3.setTimeout(()=>console.log('Loaded'),2000);
4.
5.list.forEach(item=>console.log(item));
10.隱式返回值簡寫
經常使用return語句來返回函數最終結果，一個單獨語句的箭頭函數能隱式返回其值(函數必須省略{}為了省略return關鍵字)
為返回多行語句(例如對象字面表達式)，則需要使用()包圍函數體。
1.functioncalcCircumference(diameter){
2.returnMath.PI*diameter
3.}
4.
5.varfunc=functionfunc(){
6.return{foo:1};
7.};
簡寫：
1.calcCircumference=diameter=>(
2.Math.PI*diameter;
3.)
4.
5.varfunc=()=>({foo:1});
11.默認參數值
為了給函數中參數傳遞默認值，通常使用if語句來編寫，但是使用ES6定義默認值，則會很簡潔：
1.functionvolume(l,w,h){
2.if(w===undefined)
3.w=3;
4.if(h===undefined)
5.h=4;
6.returnl*w*h;
7.}
簡寫：
1.volume=(l,w=3,h=4)=>(l*w*h);
2.
3.volume(2)//output:24
12.模板字元串
傳統的JavaScript語言，輸出模板通常是這樣寫的。
1.constwelcome='Youhaveloggedinas'+first+''+last+'.'
2.
3.constdb='http://'+host+':'+port+'/'+database;
ES6可以使用反引號和${}簡寫：
1.constwelcome=`Youhaveloggedinas${first}${last}`;
2.
3.constdb=`http://${host}:${port}/${database}`;
13.解構賦值簡寫方法
在web框架中，經常需要從組件和API之間來回傳遞數組或對象字面形式的數據，然後需要解構它。
1.constobservable=require('mobx/observable');
2.constaction=require('mobx/action');
3.construnInAction=require('mobx/runInAction');
4.
5.conststore=#;
6.constform=this.props.form;
7.constloading=this.props.loading;
8.consterrors=this.props.errors;
9.constentity=this.props.entity;
簡寫：
1.import{observable,action,runInAction}from'mobx'
2.
3.const{store,form,loading,errors,entity}=this.props;
也可以分配變數名：
1.const{store,form,loading,errors,entity:contact}=this.props;
2.//最後一個變數名為contact
14.多行字元串簡寫
需要輸出多行字元串，需要使用+來拼接：
1.constlorem='Loremipsumdolorsitamet,consectetur
'
2.+'adipisicingelit,seddoeiusmodtemporincidint
'
3.+'utlaboreetdoloremagnaaliqua.Utenimadminim
'
4.+'veniam,
'
5.+'.Duisaute
'
6.+'.
'
使用反引號，則可以達到簡寫作用：
1.constlorem=`Loremipsumdolorsitamet,consectetur
2.adipisicingelit,seddoeiusmodtemporincidint
3.utlaboreetdoloremagnaaliqua.Utenimadminim
4.veniam,
5..Duisaute
6..`
15.擴展運算符簡寫
擴展運算符有幾種用例讓JavaScript代碼更加有效使用，可以用來代替某個數組函數。
1.//joiningarrays
2.constodd=[1,3,5];
3.constnums=[2,4,6].concat(odd);
4.
5.//cloningarrays
6.constarr=[1,2,3,4];
7.constarr2=arr.slice()
簡寫：
1.//joiningarrays
2.constodd=[1,3,5];
3.constnums=[2,4,6,...odd];
4.console.log(nums);//[2,4,6,1,3,5]
5.
6.//cloningarrays
7.constarr=[1,2,3,4];
8.constarr2=[...arr];
不像concat()函數，可以使用擴展運算符來在一個數組中任意處插入另一個數組。
1.constodd=[1,3,5];
2.constnums=[2,...odd,4,6];
也可以使用擴展運算符解構：
1.const{a,b,...z}={a:1,b:2,c:3,d:4};
2.console.log(a)//1
3.console.log(b)//2
4.console.log(z)//{c:3,d:4}
16.強制參數簡寫
JavaScript中如果沒有向函數參數傳遞值，則參數為undefined。為了增強參數賦值，可以使用if語句來拋出異常，或使用強制參數簡寫方法。
1.functionfoo(bar){
2.if(bar===undefined){
3.thrownewError('Missingparameter!');
4.}
5.returnbar;
6.}
簡寫：
1.mandatory=()=>{
2.thrownewError('Missingparameter!');
3.}
4.
5.foo=(bar=mandatory())=>{
6.returnbar;
7.}
17.Array.find簡寫
想從數組中查找某個值，則需要循環。在ES6中，find()函數能實現同樣效果。
1.constpets=[
2.{type:'Dog',name:'Max'},
3.{type:'Cat',name:'Karl'},
4.{type:'Dog',name:'Tommy'},
5.]
6.
7.functionfindDog(name){
8.for(leti=0;i
9.if(pets[i].type==='Dog'&&pets[i].name===name){
10.returnpets[i];
11.}
12.}
13.}
簡寫：
1.pet=pets.find(pet=>pet.type==='Dog'&&pet.name===
'Tommy');
2.console.log(pet);//{type:'Dog',name:'Tommy'}
18.Object[key]簡寫
考慮一個驗證函數：
1.functionvalidate(values){
2.if(!values.first)
3.returnfalse;
4.if(!values.last)
5.returnfalse;
6.returntrue;
7.}
8.
9.console.log(validate({first:'Bruce',last:'Wayne'}));//true
假設當需要不同域和規則來驗證，能否編寫一個通用函數在運行時確認?
1.//對象驗證規則
2.constschema={
3.first:{
4.required:true
5.},
6.last:{
7.required:true
8.}
9.}
10.
11.//通用驗證函數
12.constvalidate=(schema,values)=>{
13.for(fieldinschema){
14.if(schema[field].required){
15.if(!values[field]){
16.returnfalse;
17.}
18.}
19.}
20.returntrue;
21.}
22.
23.console.log(validate(schema,{first:'Bruce'}));//false
24.console.log(validate(schema,{first:'Bruce',last:'Wayne'}));//
true
現在可以有適用於各種情況的驗證函數，不需要為了每個而編寫自定義驗證函數了
19.雙重非位運算簡寫
有一個有效用例用於雙重非運算操作符。可以用來代替Math.floor()，其優勢在於運行更快，可以閱讀此文章了解更多位運算。
1.Math.floor(4.9)===4//true
簡寫：
1.~~4.9===4//true
以上就是小編今天為大家分享的關於Web前端工程師要掌握的JavaScript
簡寫方法的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網。最後祝願小伙
㈩ Web前端工程師提升JavaScript技能的技巧
今天小編要跟大家分享的文章是關於Web前端工程師提升JavaScript技能的技巧。在使用JavaScript
時，我們常常要寫不少的條件語句。這里有五個小技巧，可以讓你寫出更干凈、漂亮的條件語句。下面來和小編一起看一看吧！
1.使用Array.includes來處理多重條件
舉個栗子：
//條件語句
functiontest(fruit){
if(fruit=='apple'||fruit=='strawberry'){
console.log('red');
}
}
乍一看，這么寫似乎沒什麼大問題。然而，如果我們想要匹配更多的紅色水果呢，比方說『櫻桃』和『蔓越莓』?我們是不是得用更多的||
來擴展這條語句?
我們可以使用Array.includes(Array.includes)重寫以上條件句。
functiontest(fruit){
//把條件提取到數組中
constredFruits=['apple','strawberry','cherry','cranberries'];
if(redFruits.includes(fruit)){
console.log('red');
}
}
我們把紅色的水果(條件)都提取到一個數組中，這使得我們的代碼看起來更加整潔。
2.少寫嵌套，盡早返回
讓我們為之前的例子添加兩個條件：
如果沒有提供水果，拋出錯誤。
如果該水果的數量大於10，將其列印出來。
functiontest(fruit,quantity){
constredFruits=['apple','strawberry','cherry','cranberries'];
//條件1：fruit必須有值
if(fruit){
//條件2：必須為紅色
if(redFruits.includes(fruit)){
console.log('red');
//條件3：必須是大量存在
if(quantity>10){
console.log('bigquantity');
}
}
}else{
thrownewError('Nofruit!');
}
}
//測試結果
test(null);//報錯：Nofruits
test('apple');//列印：red
test('apple',20);//列印：red，bigquantity
讓我們來仔細看看上面的代碼，我們有：
1個if/else語句來篩選無效的條件
3層if語句嵌套(條件1，2&3)
就我個人而言，我遵循的一個總的規則是當發現無效條件時盡早返回。
/_當發現無效條件時盡早返回_/
functiontest(fruit,quantity){
constredFruits=['apple','strawberry','cherry','cranberries'];
//條件1：盡早拋出錯誤
if(!fruit)thrownewError('Nofruit!');
//條件2：必須為紅色
if(redFruits.includes(fruit)){
console.log('red');
//條件3：必須是大量存在
if(quantity>10){
console.log('bigquantity');
}
}
}
如此一來，我們就少寫了一層嵌套。這是種很好的代碼風格，尤其是在if語句很長的時候(試想一下，你得滾動到底部才能知道那兒還有個else
語句，是不是有點不爽)。
如果反轉一下條件，我們還可以進一步地減少嵌套層級。注意觀察下面的條件2語句，看看是如何做到這點的：
/_當發現無效條件時盡早返回_/
functiontest(fruit,quantity){
constredFruits=['apple','strawberry','cherry','cranberries'];
if(!fruit)thrownewError('Nofruit!');//條件1：盡早拋出錯誤
if(!redFruits.includes(fruit))return;//條件2：當fruit不是紅色的時候，直接返回
console.log('red');
//條件3：必須是大量存在
if(quantity>10){
console.log('bigquantity');
}
}
通過反轉條件2
的條件，現在我們的代碼已經沒有嵌套了。當我們代碼的邏輯鏈很長，並且希望當某個條件不滿足時不再執行之後流程時，這個技巧會很好用。
然而，並沒有任何硬性規則要求你這么做。這取決於你自己，對你而言，這個版本的代碼(沒有嵌套)是否要比之前那個版本(條件2
有嵌套)的更好、可讀性更強?
是我的話，我會選擇前一個版本(條件2有嵌套)。原因在於：
這樣的代碼比較簡短和直白，一個嵌套的if使得結構更加清晰。
條件反轉會導致更多的思考過程(增加認知負擔)。
因此，始終追求更少的嵌套，更早地返回，但是不要過度。感興趣的話，這里有篇關於這個問題的文章以及StackOverflow上的討論：
AvoidElse,ReturnEarlybyTimOxley
StackOverflowdiscussiononif/elsecodingstyle
3.使用函數默認參數和解構
我猜你也許很熟悉以下的代碼，在JavaScript中我們經常需要檢查null/undefined並賦予默認值：
functiontest(fruit,quantity){
if(!fruit)return;
constq=quantity||1;//如果沒有提供quantity，默認為1
console.log(`Wehave${q}${fruit}!`);
}
//測試結果
test('banana');//Wehave1banana!
test('apple',2);//Wehave2apple!
事實上，我們可以通過函數的默認參數來去掉變數q。
functiontest(fruit,quantity=1){//如果沒有提供quantity，默認為1
if(!fruit)return;
console.log(`Wehave${quantity}${fruit}!`);
}
//測試結果
test('banana');//Wehave1banana!
test('apple',2);//Wehave2apple!
是不是更加簡單、直白了?請注意，所有的函數參數都可以有其默認值。舉例來說，我們同樣可以為fruit賦予一個默認值：function
test(fruit='unknown',quantity=1)。
那麼如果fruit是一個對象(Object)呢?我們還可以使用默認參數嗎?
functiontest(fruit){
//如果有值，則列印出來
if(fruit&&fruit.name){
console.log(fruit.name);
}else{
console.log('unknown');
}
}
//測試結果
test(undefined);//unknown
test({});//unknown
test({name:'apple',color:'red'});//apple
觀察上面的例子，當水果名稱屬性存在時，我們希望將其列印出來，否則列印『unknown』。我們可以通過默認參數和解構賦值的方法來避免寫出fruit
&&fruit.name這種條件。
//解構——只得到name屬性
//默認參數為空對象{}
functiontest({name}={}){
console.log(name||'unknown');
}
//測試結果
test(undefined);//unknown
test({});//unknown
test({name:'apple',color:'red'});//apple
既然我們只需要fruit的name屬性，我們可以使用{name}來將其解構出來，之後我們就可以在代碼中使用name變數來取代
fruit.name。
我們還使用{}作為其默認值。如果我們不這么做的話，在執行test(undefined)時，你會得到一個錯誤Cannot
destructurepropertynameof'undefined'or'null'.，因為undefined上並沒有name
屬性。(譯者註：這里不太准確，其實因為解構只適用於對象(Object)，而不是因為undefined上並沒有name屬性(空對象上也沒有)。參考解構賦值
-MDN)
如果你不介意使用第三方庫的話，有一些方法可以幫助減少空值(null)檢查：
使用Lodashget函數
使用Facebook開源的idx庫(需搭配Babeljs)
這里有一個使用Lodash的例子：
//使用lodash庫提供的_方法
functiontest(fruit){
console.log(_.get(fruit,'name','unknown');//獲取屬性name的值，如果沒有，設為默認值
unknown
}
//測試結果
test(undefined);//unknown
test({});//unknown
test({name:'apple',color:'red'});//apple
你可以在這里運行演示代碼。另外，如果你偏愛函數式編程(FP)，你可以選擇使用Lodashfp——函數式版本的Lodash(方法名變為get或
getOr)。
4.相較於switch，Map/Object也許是更好的選擇
讓我們看下面的例子，我們想要根據顏色列印出各種水果：
functiontest(color){
//使用switchcase來找到對應顏色的水果
switch(color){
case'red':
return['apple','strawberry'];
case'yellow':
return['banana','pineapple'];
case'purple':
return['grape','plum'];
default:
return[];
}
}
//測試結果
test(null);//[]
test('yellow');//['banana','pineapple']
上面的代碼看上去並沒有錯，但是就我個人而言，它看上去很冗長。同樣的結果可以通過對象字面量來實現，語法也更加簡潔：
//使用對象字面量來找到對應顏色的水果
constfruitColor={
red:['apple','strawberry'],
yellow:['banana','pineapple'],
purple:['grape','plum']
};
functiontest(color){
returnfruitColor[color]||[];
}
或者，你也可以使用Map來實現同樣的效果：
//使用Map來找到對應顏色的水果
constfruitColor=newMap()
.set('red',['apple','strawberry'])
.set('yellow',['banana','pineapple'])
.set('purple',['grape','plum']);
functiontest(color){
returnfruitColor.get(color)||[];
}
Map是ES2015引入的新的對象類型，允許你存放鍵值對。
那是不是說我們應該禁止使用switch語句?別把自己限制住。我自己會在任何可能的時候使用對象字面量，但是這並不是說我就不用
switch，這得視場景而定。
ToddMotto有一篇文章深入討論了switch語句和對象字面量，你也許會想看看。
懶人版：重構語法
就以上的例子，事實上我們可以通過重構我們的代碼，使用Array.filter實現同樣的效果。
constfruits=[
{name:'apple',color:'red'},
{name:'strawberry',color:'red'},
{name:'banana',color:'yellow'},
{name:'pineapple',color:'yellow'},
{name:'grape',color:'purple'},
{name:'plum',color:'purple'}
];
functiontest(color){
//使用Arrayfilter來找到對應顏色的水果
returnfruits.filter(f=>f.color==color);
}
解決問題的方法永遠不只一種。對於這個例子我們展示了四種實現方法。Codingisfun!
5.使用Array.every和Array.some來處理全部/部分滿足條件
最後一個小技巧更多地是關於使用新的(也不是很新了)JavaScript
數組函數來減少代碼行數。觀察以下的代碼，我們想要檢查是否所有的水果都是紅色的：
constfruits=[
{name:'apple',color:'red'},
{name:'banana',color:'yellow'},
{name:'grape',color:'purple'}
];
functiontest(){
letisAllRed=true;
//條件：所有的水果都必須是紅色
for(letfoffruits){
if(!isAllRed)break;
isAllRed=(f.color=='red');
}
console.log(isAllRed);//false
}
這段代碼也太長了!我們可以通過Array.every來縮減代碼：
constfruits=[
{name:'apple',color:'red'},
{name:'banana',color:'yellow'},
{name:'grape',color:'purple'}
];
functiontest(){
//條件：(簡短形式)所有的水果都必須是紅色
constisAllRed=fruits.every(f=>f.color=='red');
console.log(isAllRed);//false
}
清晰多了對吧?類似的，如果我們想要檢查是否有至少一個水果是紅色的，我們可以使用Array.some僅用一行代碼就實現出來。
constfruits=[
{name:'apple',color:'red'},
{name:'banana',color:'yellow'},
{name:'grape',color:'purple'}
];
functiontest(){
//條件：至少一個水果是紅色的
constisAnyRed=fruits.some(f=>f.color=='red');
console.log(isAnyRed);//true
}
以上就是小編今天為大家分享的關於Web前端工程師提升JavaScript
技能的技巧的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利！
來源：掘金，譯者：Hopsken，作者：@JecelynYeen
原文：#/tutorials/5-tips-to-write-better-conditionals-in-javascri
