<menuitem id="1h7lz"><th id="1h7lz"></th></menuitem>

    <big id="1h7lz"></big>

                    ??谶_內IT培訓
                    美國上市IT培訓機構

                    18035108441

                    JavaScript 編碼技術經驗,??贗T培訓

                    • 時間:2021-01-15 15:49
                    • 發布:不詳
                    • 來源:網絡

                    本文來源于多年的 JavaScript 編碼技術經驗,適合所有正在使用 JavaScript 編程的開發人員閱讀。

                    本文的目的在于幫助大家更加熟練的運用 JavaScript 語言來進行開發工作。

                    文章將分成初級篇和高級篇兩部分,分別進行介紹。

                    初級篇

                    1、三目運算符

                    下面是一個很好的例子,將一個完整的 if 語句,簡寫為一行代碼。

                    constx =20;letanswer;if(x >10) {answer='greater than 10'; }else{answer='less than 10'; }

                    簡寫為:

                    constanswer = x >10?'greater than 10':'less than 10';

                    2、循環語句

                    當使用純 JavaScript(不依賴外部庫,如 jQuery 或 lodash)時,下面的簡寫會非常有用。

                    for(leti = 0; i < allImgs.length; i++)

                    簡寫為:

                    for(letindexofallImgs)

                    下面是遍歷數組 forEach 的簡寫示例:

                    functionlogArrayElements(element, index, array) { console.log("a["+ index +"] = "+ element); }[2, 5, 9].forEach(logArrayElements);// logs:// a[0] = 2// a[1] = 5// a[2] = 9

                    3、聲明變量

                    在函數開始之前,對變量進行賦值是一種很好的習慣。在申明多個變量時:

                    letx;lety;letz = 3;

                    可以簡寫為:

                    letx, y, z=3;

                    4、if 語句

                    在使用 if 進行基本判斷時,可以省略賦值運算符。

                    if (likeJavaScript=== true)

                    簡寫為:

                    if (likeJavaScript)

                    5、十進制數

                    可以使用科學計數法來代替較大的數據,如可以將 10000000 簡寫為 1e7。

                    for(leti = 0; i < 10000; i++) { }

                    簡寫為:

                    for(leti = 0; i < 1e7; i++) { }

                    6、多行字符串

                    如果需要在代碼中編寫多行字符串,就像下面這樣:

                    constlorem ='Loremipsum dolor sit amet, consectetur\n\t' +'adipisicingelit, seddoeiusmod tempor incididunt\n\t' +'utlabore et dolore magna aliqua. Ut enim ad minim\n\t' +'veniam, quis nostrud exercitation ullamco laboris\n\t' +'nisiut aliquip ex ea commodo consequat. Duis aute\n\t' +'iruredolorinreprehenderitinvoluptate velit esse.\n\t'

                    但是還有一個更簡單的方法,只使用引號:

                    constlorem = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, seddoeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolorinreprehenderitinvoluptate velit esse.`

                    高級篇

                    1、變量賦值

                    當將一個變量的值賦給另一個變量時,首先需要確保原值不是 null、未定義的或空值。

                    可以通過編寫一個包含多個條件的判斷語句來實現:

                    if(variable1 !==null|| variable1 !==undefined|| variable1 !=='') {letvariable2 = variable1; }

                    或者簡寫為以下的形式:

                    constvariable2 = variable1 ||'new';

                    可以將下面的代碼粘貼到 es6console 中,自己測試:

                    letvariable1;letvariable2 = variable1 ||'';console.log(variable2 ==='');// prints truevariable1 ='foo'; variable2 = variable1 ||'';console.log(variable2);// prints foo

                    2、默認值賦值

                    如果預期參數是 null 或未定義,則不需要寫六行代碼來分配默認值。我們可以只使用一個簡短的邏輯運算符,只用一行代碼就能完成相同的操作。

                    letdbHost;if(process.env.DB_HOST) {dbHost= process.env.DB_HOST; }else{dbHost='localhost'; }

                    簡寫為:

                    constdbHost = process.env.DB_HOST ||'localhost';

                    3、對象屬性

                    ES6 提供了一個很簡單的辦法,來分配屬性的對象。如果屬性名與 key 名相同,則可以使用簡寫。

                    const obj = {x:x,y:y };

                    簡寫為:

                    constobj = { x, y };

                    4、箭頭函數

                    經典函數很容易讀寫,但是如果把它們嵌套在其它函數中進行調用時,整個函數就會變得有些冗長和混亂。這時候可以使用箭頭函數來簡寫:

                    functionsayHello(name){console.log('Hello', name); } setTimeout(function(){console.log('Loaded') },2000); list.forEach(function(item){console.log(item); });

                    簡寫為:

                    sayHello = name => console.log('Hello', name); setTimeout(() => console.log('Loaded'),2000);list.forEach(item => console.log(item));

                    5、隱式返回值

                    返回值是我們通常用來返回函數最終結果的關鍵字。只有一個語句的箭頭函數,可以隱式返回結果(函數必須省略括號({ }),以便省略返回關鍵字)。

                    要返回多行語句(例如對象文本),需要使用()而不是{ }來包裹函數體。這樣可以確保代碼以單個語句的形式進行求值。

                    functioncalcCircumference(diameter){returnMath.PI * diameter }

                    簡寫為:

                    calcCircumference = diameter => (Math.PI * diameter; )

                    6、默認參數值

                    可以使用 if 語句來定義函數參數的默認值。ES6 中規定了可以在函數聲明中定義默認值。

                    functionvolume(l, w, h){if(w ===undefined) w =3;if(h ===undefined) h =4;returnl * w * h; }

                    簡寫為:

                    volume = (l, w =3, h =4) => (l * w * h); volume(2)//output: 24

                    7、模板字符串

                    過去我們習慣了使用“+”將多個變量轉換為字符串,但是有沒有更簡單的方法呢?

                    ES6 提供了相應的方法,我們可以使用反引號和 $ { } 將變量合成一個字符串。

                    constwelcome ='Youhave loggedinas' + first +' '+ last +'.'constdb ='http://' + host + ':' + port + '/' + database;

                    簡寫為:

                    constwelcome =`You have logged in as${first}${last}`;constdb =`http://${host}:${port}/${database}`;

                    8、解構賦值

                    解構賦值是一種表達式,用于從數組或對象中快速提取屬性值,并賦給定義的變量。

                    在代碼簡寫方面,解構賦值能達到很好的效果。

                    constobservable =require('mobx/observable');constaction =require('mobx/action');construnInAction =require('mobx/runInAction');conststore =this.props.store;constform =this.props.form;constloading =this.props.loading;consterrors =this.props.errors;constentity =this.props.entity;

                    簡寫為:

                    import{ observable, action, runInAction }from'mobx';const{ store, form, loading, errors, entity } =this.props;

                    甚至可以指定自己的變量名:

                    const{ store, form, loading, errors, entity:contact } =this.props;

                    9、展開運算符

                    展開運算符是在 ES6 中引入的,使用展開運算符能夠讓 JavaScript 代碼更加有效和有趣。

                    使用展開運算符可以替換某些數組函數。

                    // joining arraysconstodd = [1,3,5];constnums = [2,4,6].concat(odd);// cloning arraysconstarr = [1,2,3,4];constarr2 = arr.slice( )

                    簡寫為:

                    // joining arraysconstodd = [1,3,5];constnums = [2,4,6, ...odd]; console.log(nums);// [ 2, 4, 6, 1, 3, 5 ]// cloning arraysconstarr = [1,2,3,4];constarr2 = [...arr];

                    和 concat( ) 功能不同的是,用戶可以使用擴展運算符在任何一個數組中插入另一個數組。

                    constodd = [1,3,5];constnums = [2, ...odd,4,6];

                    也可以將展開運算符和 ES6 解構符號結合使用:

                    const{ a, b, ...z } = { a:1, b:2, c:3, d:4}; console.log(a)// 1console.log(b)// 2console.log(z)// { c: 3, d: 4 }

                    10、強制參數

                    默認情況下,如果不向函數參數傳值,那么 JavaScript 會將函數參數設置為未定義。其它一些語言則會發出警告或錯誤。要執行參數分配,可以使用if語句拋出未定義的錯誤,或者可以利用“強制參數”。

                    functionfoo(bar){if(bar ===undefined) {thrownewError('Missing parameter!'); }returnbar; }

                    簡寫為:

                    mandatory = ( ) => {thrownewError('Missing parameter!'); } foo = (bar = mandatory( )) => {returnbar; }

                    11、Array.find

                    如果你曾經編寫過普通 JavaScript 中的 find 函數,那么你可能使用了 for 循環。在 ES6 中,介紹了一種名為 find()的新數組函數,可以實現 for 循環的簡寫。

                    const pets = [ {type:'Dog', name:'Max'}, {type:'Cat', name:'Karl'}, {type:'Dog', name:'Tommy'}, ]functionfindDog(name){for(let i =0; i<pets.length; ++i) {if(pets[i].type==='Dog'&& pets[i].name === name) {returnpets[i]; } } }

                    簡寫為:

                    pet = pets.find(pet => pet.type==='Dog'&& pet.name ==='Tommy'); console.log(pet); // {type:'Dog', name:'Tommy'}

                    12、Object [key]

                    雖然將 foo.bar 寫成 foo ['bar'] 是一種常見的做法,但是這種做法構成了編寫可重用代碼的基礎。

                    請考慮下面這個驗證函數的簡化示例:

                    functionvalidate(values){if(!values.first)returnfalse;if(!values.last)returnfalse;returntrue; }console.log(validate({first:'Bruce',last:'Wayne'}));// true

                    上面的函數完美的完成驗證工作。但是當有很多表單,則需要應用驗證,此時會有不同的字段和規則。如果可以構建一個在運行時配置的通用驗證函數,會是一個好選擇。

                    // object validation rulesconstschema = { first: { required:true}, last: { required:true} }// universal validation functionconstvalidate = (schema, values) => {for(fieldinschema) {if(schema[field].required) {if(!values[field]) {returnfalse; } } }returntrue; }console.log(validate(schema, {first:'Bruce'}));// falseconsole.log(validate(schema, {first:'Bruce',last:'Wayne'}));// true

                    現在有了這個驗證函數,我們就可以在所有窗體中重用,而無需為每個窗體編寫自定義驗證函數。

                    13、雙位操作符

                    位操作符是 JavaScript 初級教程的基本知識點,但是我們卻不常使用位操作符。因為在不處理二進制的情況下,沒有人愿意使用 1 和 0。

                    但是雙位操作符卻有一個很實用的案例。你可以使用雙位操作符來替代 Math.floor( )。雙否定位操作符的優勢在于它執行相同的操作運行速度更快。

                    Math.floor(4.9) ===4//true

                    簡寫為:

                    ~~4.9===4//true

                    JavaScript 開發工具推薦

                    SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網格功能控件,提供了完備的公式引擎、排序、過濾、輸入控件、數據可視化、Excel 導入/導出等功能,適用于 .NET、Java 和移動端等各平臺在線編輯類 Excel 功能的表格程序開發。

                    總結

                    上述是一些常用的 JavaScript 簡寫技巧,如果有其它未提及的簡寫技巧,也歡迎大家補充。

                    更多精彩內容請關注達內??贗T培訓官網!

                    本文轉載自網絡,本著一顆分享閱讀的心,版權歸原作者所有,如有侵權請聯系刪除!

                    上一篇:作為一個開發人員你用了什么瀏覽器?
                    下一篇:UI設計師的響應式的定義,??贗T培訓

                    UI設計師的響應式的定義,??贗T培訓

                    什么樣的字體排版才具有設計感?

                    • 掃碼領取資料

                      回復關鍵字:視頻資料

                      免費領取 達內課程視頻學習資料

                    • 視頻學習QQ群

                      添加QQ群:1143617948

                      免費領取達內課程視頻學習資料

                    Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

                    選擇城市和中心
                    江西省

                    貴州省

                    廣西省

                    海南省

                    亚洲做性视频在线观看|中文字幕乱偷在线|色777狠狠|四虎影视库的网站,亚欧美综合性色,国产高清在线观看91最新,色婷婷综合缴情综