關於玩轉前端javascript的信息

本文目錄一覽：

• 1、Web前端工程師應該知道的JavaScript使用小技巧
• 2、Web前端新手應該知道的JavaScript開發技巧有哪些?
• 3、幫助Web前端初學者快速掌握JavaScript技術的方法

Web前端工程師應該知道的JavaScript使用小技巧

今天小編要跟大家分享的文章是關於Web前端工程師應該知道的JavaScript使用小技巧。任何一門技術在實際中都會有一些屬於自己的小技巧。同樣的，在使用JavaScript時也有一些自己的小技巧，只不過很多時候有可能容易被大家忽略。而在互聯網上，時不時的有很多同行朋友會總結(或收集)一些這方面的小技巧。

今天在這篇文章中，小編會整理一些大家熟悉或不熟悉的有關於JavaScript的小技巧，希望能夠對大家的學習和工作有所幫助。

一、數組

先來看使用數組中常用的一些小技巧。

01、數組去重

ES6提供了幾種簡潔的數組去重的方法，但該方法並不適合處理非基本類型的數組。對於基本類型的數組去重，可以使用…new

Set()來過濾掉數組中重複的值，創建一個只有唯一值的新數組。

constarray=[1,1,2,3,5,5,1]

constuniqueArray=[…newSet(array)];

console.log(uniqueArray);

Result:(4)[1,2,3,5]

這是ES6中的新特性，在ES6之前，要實現同樣的效果，我們需要使用更多的代碼。該技巧適用於包含基本類型的數組：undefined、null、boolean、string和number。如果數組中包含了一個object,function或其他數組，那就需要使用另一種方法。

除了上面的方法之外，還可以使用Array.from(newSet())來實現：

constarray=[1,1,2,3,5,5,1]

Array.from(newSet(array))

Result:(4)[1,2,3,5]

另外，還可以使用Array的.filter及indexOf()來實現：

constarray=[1,1,2,3,5,5,1]

array.filter((arr,index)=array.indexOf(arr)===index)

Result:(4)[1,2,3,5]

注意，indexOf()方法將返回數組中第一個出現的數組項。這就是為什麼我們可以在每次迭代中將indexOf()方法返回的索引與當索索引進行比較，以確定當前項是否重複。

02、確保數組的長度

在處理網格結構時，如果原始數據每行的長度不相等，就需要重新創建該數據。為了確保每行的數據長度相等，可以使用Array.fill來處理：

letarray=Array(5).fill(”);

console.log(array);

Result:(5)[“”,””,””,””,””]

03、數組映射

不使用Array.map來映射數組值的方法。

constarray=[

{

ame:’大漠’,

email:’w3cplus@#’

},

{

ame:’Airen’,

email:’airen@#’

}

]

constname=Array.from(array,({name})=name)

Result:(2)[“大漠”,”Airen”]

04、數組截斷

如果你想從數組末尾刪除值(刪除數組中的最後一項)，有比使用splice()更快的替代方法。

例如，你知道原始數組的大小，可以重新定義數組的length屬性的值，就可以實現從數組末尾刪除值：

letarray=[0,1,2,3,4,5,6,7,8,9]

console.log(array.length)

Result:10

array.length=4

console.log(array)

Result:(4)[0,1,2,3]

這是一個特別簡潔的解決方案。但是，slice()方法運行更快，性能更好：

letarray=[0,1,2,3,4,5,6,7,8,9];

array=array.slice(0,4);

console.log(array);

Result:[0,1,2,3]

05、過濾掉數組中的falsy值

如果你想過濾數組中的falsy值，比如0、undefined、null、false，那麼可以通過map和filter方法實現：

constarray=[0,1,’0′,’1′,’大漠’,’#’,undefined,true,false,null,’undefined’,’null’,NaN,’NaN’,’1’+0]

array.map(item={

returnitem

}).filter(Boolean)

Result:(10)[1,”0″,”1″,”大漠”,”#”,true,”undefined”,”null”,”NaN”,”10″]

06、獲取數組的最後一項

數組的slice()取值為正值時，從數組的開始處截取數組的項，如果取值為負整數時，可以從數組末屬開始獲取數組項。

letarray=[1,2,3,4,5,6,7]

constfirstArrayVal=array.slice(0,1)

Result:[1]

constlastArrayVal=array.slice(-1)

Result:[7]

console.log(array.slice(1))

Result:(6)[2,3,4,5,6,7]

console.log(array.slice(array.length))

Result:[]

正如上面示例所示，使用array.slice(-1)獲取數組的最後一項，除此之外還可以使用下面的方式來獲取數組的最後一項：

console.log(array.slice(array.length-1))

Result:[7]

07、過濾並排序字元串列表

你可能有一個很多名字組成的列表，需要過濾掉重複的名字並按字母表將其排序。

在我們的例子里準備用不同版本語言的JavaScript

保留字的列表，但是你能發現，有很多重複的關鍵字而且它們並沒有按字母表順序排列。所以這是一個完美的字元串列表(數組)來測試我們的JavaScript小知識。

varkeywords=[‘do’,’if’,’in’,’for’,’new’,’try’,’var’,’case’,’else’,’enum’,’null’,’this’,’true’,’void’,’with’,’break’,’catch’,’class’,’const’,’false’,’super’,’throw’,’while’,’delete’,’export’,’import’,’return’,’switch’,’typeof’,’default’,’extends’,’finally’,’continue’,’debugger’,’function’,’do’,’if’,’in’,’for’,’int’,’new’,’try’,’var’,’byte’,’case’,’char’,’else’,’enum’,’goto’,’long’,’null’,’this’,’true’,’void’,’with’,’break’,’catch’,’class’,’const’,’false’,’final’,’float’,’short’,’super’,’throw’,’while’,’delete’,’double’,’export’,’import’,’native’,’public’,’return’,’static’,’switch’,’throws’,’typeof’,’boolean’,’default’,’extends’,’finally’,’package’,’private’,’abstract’,’continue’,’debugger’,’function’,’volatile’,’interface’,’protected’,’transient’,’implements’,’instanceof’,’synchronized’,’do’,’if’,’in’,’for’,’let’,’new’,’try’,’var’,’case’,’else’,’enum’,’eval’,’null’,’this’,’true’,’void’,’with’,’break’,’catch’,’class’,’const’,’false’,’super’,’throw’,’while’,’yield’,’delete’,’export’,’import’,’public’,’return’,’static’,’switch’,’typeof’,’default’,’extends’,’finally’,’package’,’private’,’continue’,’debugger’,’function’,’arguments’,’interface’,’protected’,’implements’,’instanceof’,’do’,’if’,’in’,’for’,’let’,’new’,’try’,’var’,’case’,’else’,’enum’,’eval’,’null’,’this’,’true’,’void’,’with’,’await’,’break’,’catch’,’class’,’const’,’false’,’super’,’throw’,’while’,’yield’,’delete’,’export’,’import’,’public’,’return’,’static’,’switch’,’typeof’,’default’,’extends’,’finally’,’package’,’private’,’continue’,’debugger’,’function’,’arguments’,’interface’,’protected’,’implements’,’instanceof’];

因為我們不想改變我們的原始列表，所以我們準備用高階函數叫做filter，它將基於我們傳遞的回調方法返回一個新的過濾後的數組。回調方法將比較當前關鍵字在原始列表裡的索引和新列表中的索引，僅當索引匹配時將當前關鍵字push到新數組。

最後我們準備使用sort方法排序過濾後的列表，sort只接受一個比較方法作為參數，並返回按字母表排序後的列表。

在ES6下使用箭頭函數看起來更簡單:

constfilteredAndSortedKeywords=keywords

.filter((keyword,index)=keywords.lastIndexOf(keyword)===index)

.sort((a,b)=a

這是最後過濾和排序後的JavaScript保留字列表：

console.log(filteredAndSortedKeywords);

Result:[‘abstract’,’arguments’,’await’,’boolean’,’break’,’byte’,’case’,’catch’,’char’,’class’,’const’,’continue’,’debugger’,’default’,’delete’,’do’,’double’,’else’,’enum’,’eval’,’export’,’extends’,’false’,’final’,’finally’,’float’,’for’,’function’,’goto’,’if’,’implements’,’import’,’in’,’instanceof’,’int’,’interface’,’let’,’long’,’native’,’new’,’null’,’package’,’private’,’protected’,’public’,’return’,’short’,’static’,’super’,’switch’,’synchronized’,’this’,’throw’,’throws’,’transient’,’true’,’try’,’typeof’,’var’,’void’,’volatile’,’while’,’with’,’yield’]

08、清空數組

如果你定義了一個數組，然後你想清空它。通常，你會這樣做：

letarray=[1,2,3,4];

functionemptyArray(){

array=[];

}

emptyArray();

但是，這有一個效率更高的方法來清空數組。你可以這樣寫:

letarray=[1,2,3,4];

functionemptyArray(){

array.length=0;

}

emptyArray();

09、拍平多維數組

使用…運算符，將多維數組拍平：

10、從數組中獲取最大值和最小值

可以使用Math.max和Math.min取出數組中的最大小值和最小值：

constnumbers=[15,80,-9,90,-99]

constmaxInNumbers=Math.max.apply(Math,numbers)

constminInNumbers=Math.min.apply(Math,numbers)

console.log(maxInNumbers)

Result:90

console.log(minInNumbers)

Result:-99

另外還可以使用ES6的…運算符來完成：

constnumbers=[1,2,3,4];

Math.max(…numbers)

Result:4

Math.min(…numbers)

Result:1

二、對象

在操作對象時也有一些小技巧。

01、使用…運算符合併對象或數組中的對象

同樣使用ES的…運算符可以替代人工操作，合併對象或者合併數組中的對象。

//合併對象

constobj1={

ame:’大漠’,

url:’#’

}

constobj2={

ame:’airen’,

age:30

}

constmergingObj={…obj1,…obj2}

Result:{name:”airen”,url:”#”,age:30}

//合併數組中的對象

constarray=[

{

ame:’大漠’,

email:’w3cplus@#’

},

{

ame:’Airen’,

email:’airen@#’

}

]

constresult=array.reduce((accumulator,item)={

return{

…accumulator,

[item.name]:item.email

}

},{})

Result:{大漠:”w3cplus@#”,Airen:”airen@#”}

02、有條件的添加對象屬性

不再需要根據一個條件創建兩個不同的對象，以使它具有特定的屬性。為此，使用…操作符是最簡單的。

constgetUser=(emailIncluded)={

return{

ame:’大漠’,

blog:’w3cplus’,

…emailIncluded{email:’w3cplus@#’}

}

}

constuser=getUser(true)

console.log(user)

Result:{name:”大漠”,blog:”w3cplus”,email:”w3cplus@#”}

constuserWithoutEmail=getUser(false)

console.log(userWithoutEmail)

Result:{name:”大漠”,blog:”w3cplus”}

03、解構原始數據

你可以在使用數據的時候，把所有數據都放在一個對象中。同時想在這個數據對象中獲取自己想要的數據。

在這裡可以使用ES6的Destructuring特性來實現。比如你想把下面這個obj中的數據分成兩個部分：

constobj={

ame:’大漠’,

blog:’w3cplus’,

email:’w3cplus@#’,

joined:’2019-06-19′,

followers:45

}

letuser={},userDetails={}

({name:user.name,email:user.email,…userDetails}=obj)

{name:”大漠”,blog:”w3cplus”,email:”w3cplus@#”,joined:”2019-06-19″,followers:45}

console.log(user)

Result:{name:”大漠”,email:”w3cplus@#”}

console.log(userDetails)

Result:{blog:”w3cplus”,joined:”2019-06-19″,followers:45}

04、動態更改對象的key

在過去，我們首先必須聲明一個對象，然後在需要動態屬性名的情況下分配一個屬性。在以前，這是不可能以聲明的方式實現的。不過在ES6中，我們可以實現：

constdynamicKey=’email’

letobj={

ame:’大漠’,

blog:’w3cplus’,

[dynamicKey]:’w3cplus@#’

}

console.log(obj)

Result:{name:”大漠”,blog:”w3cplus”,email:”w3cplus@#”}

05、判斷對象的數據類型

使用Object.prototype.toString配合閉包來實現對象數據類型的判斷：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisArray=isType(‘Array’)([1,2,3])

console.log(isArray)

Result:true

上面的代碼相當於：

functionisType(type){

returnfunction(target){

return`[object${type}]`===Object.prototype.toString.call(target)

}

}

isType(‘Array’)([1,2,3])

Result:true

或者：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisString=isType(‘String’)

constres=isString((‘1’))

console.log(res)

Result:true

06、檢查某對象是否有某屬性

當你需要檢查某屬性是否存在於一個對象，你可能會這樣做：

varobj={

ame:’大漠’

}

if(obj.name){

console.l

Web前端新手應該知道的JavaScript開發技巧有哪些?

今天小編要跟大家分享的文章是關於Web前端新手應該知道的JavaScript開發技巧有哪些?熟悉Web前端的小夥伴都知道，Javascript

的很多擴展的特性是的它變得更加的犀利，同時也給予程序員機會創建更漂亮並且更讓用戶喜歡的網站。

儘管很多的開發人員都樂於頌揚javascript，但是仍舊有人看到它的陰暗面。

使用很多javascript代碼的Web頁面會載入很慢，過多的使用javascript使得網頁醜陋和拖沓。很快如何有效地使用

javascript成為一個非常火熱的話題。

今天小編就為Web前端新手準備了這篇JavaScript開發技巧，希望能夠對你有所幫助，下面我們一起來看一看吧!

1、儘可能的保持代碼簡潔

可能大家都聽到過了N遍這個代碼簡潔問題了。作為一個開發人員你可能在你的代碼開發過程中使用了很多次，但千萬不要在js開發中忘記這點。

§盡量在開發模式中添加註釋和空格，這樣保持代碼的可讀性

§在發布到產品環境前請將空格和注釋都刪除，並且盡量縮寫變數和方法名

§使用第三方工具幫助你實現壓縮javascript。

2、思考後再修改prototypes

添加新的屬性到對象prototype中是導致腳本出錯的常見原因。

yourObject.prototype.anotherFunction=’Hello’;

yourObject.prototype.anotherMethod=function(){…}

在上面代碼中，所有的變數都會被影響，因為他們都繼承於yourObject。這樣的使用會導致意想不到的行為。所以建議在使用完後刪除類似的修改。

yourObject.prototype.anotherFunction=’Hello’;

yourObject.prototype.anotherMethod=function(){};

test.anotherMethod();

deleteyourObject.prototype.anotherFunction=’Hello’;

deleteyourObject.prototype.anotherMethod=function(){};

3、DebugJavascript代碼

即使最好的開發人員都會犯錯。為了最大化的減少類似錯誤，請在你的debugger中運行你的代碼，確認你沒有遇到任何細微的錯誤。

4、避免Eval

你的JS在沒有eval方法的時候也可以很好的工作。eval允許訪問javascript編譯器。如果一個字元串作為參數傳遞到

eval，那麼它的結果可以被執行。

這會很大的降低代碼的性能。盡量避免在產品環境中使用eval。

5、最小化DOM訪問

DOM是最複雜的API，會使得代碼執行過程變慢。有時候Web頁面可能沒有載入或者載入不完整。最好避免DOM。

6、在使用javascript類庫之前先學習javascript

互聯網充斥著很多的javascript類庫，很多程序員都往往使用js類庫而不理解負面影響。強烈建議你在使用第三方類庫之前學習基本的JS

代碼，否則，你就準備著倒霉吧。

7、不要用「SetTimeOut」和「Setinterval」方法來作為「Eval」的備選

setTimeOut(“document.getID(‘value’)”,3000);

在以上代碼中document.getID(『value』)在setTimeOut方法中被作為字元串來處理。這類似於eval

方法，在每個代碼執行中來執行一個字元串，因此會降低性能，因此，建議在這些方法中傳遞一個方法。

setTimeOut(yourFunction,3000);

8、[]比newArray();更好

一個常犯的錯誤在於使用當需要數組的時候使用一個對象或者該使用對象的時候使用一個數組。但是使用原則很簡單：

「當屬性名稱是小的連續整數，你應該使用數組。否則，使用一個對象」_DouglasCrockford,JavaScript:Good

Parts的作者.

建議：

vara=[‘1A’,’2B’];

避免：

vara=newArray();

a[0]=”1A”;

a[1]=”2B”;

9、盡量不要多次使用var

在初始每一個變數的時候，程序員都習慣使用var關鍵字。相反，建議你使用逗號來避免多餘的關鍵字，並且減少代碼體積。如下：

varvariableOne=’string1′,

variableTwo=’string2′,

variableThree=’string3′;

10、不要忽略分號「;」

這往往是大家花費數個小時進行debug的原因之一。

我很確信你肯定也在其它的文章中閱讀過以上相關的內容，但是大家可能往往都忽略了很多基本的規則。你是不是也曾經忽略過分號。是不是也遇到過eval

關鍵字問題導致性能問題?

以上就是小編今天為大家分享的關於Web前端新手應該知道的JavaScript

開發技巧有哪些?的文章，希望本篇文章能夠對剛剛接觸Web前端行業的新手們有所幫助。想要了解更多Web前端知識記得關注北大青鳥Web前端培訓官網!

*聲明：內容與圖片均來源於網路(部分內容有修改)，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯繫我們刪除或授權事宜。

幫助Web前端初學者快速掌握JavaScript技術的方法

今天小編要跟大家分享的文章是關於幫助web前端初學者快速掌握JavaScript技術的方法。當你試圖學習JavaScript或其他編程語言的時候，你通常會遇到如下挑戰：

·一些概念讓你感到困惑，特別是如果之前學過其他類型的語言。

·很難找到學習的時間(或者動力)去學習。

·你很容易忘掉之前學到的東西。

·JavaScript工具太多並且經常更新，以至於很難找到學習的切入點。

幸運的是，這些難題最終能夠被克服。在這篇文章，將展示六個能夠幫助你更快、更開心、更高效地學習JavaScript的六個思維技巧。下面來和小編一起看一看吧！

1、不要對未來的憂慮干擾你現在的學習

有些JavaScript初學者會問剛開始要學習哪種框架，但是如果你還沒能熟練使用原生JavaScript，你就不應該問這種問題。因為你會花很多時間研究各種框架而得不到進步。

走出這個陷阱的一個方法是制定一個學習路徑圖。例如，要成為前端開發，你的路徑圖可能是下圖。在將來你能夠使用HTML和CSS製作動態頁面。

將上圖步驟分開執行，每個時間段只專註於提高一項技能，你將不會把時間浪費在擔心後面的技能上。

2、不要讓自信騙你進入持續遺忘的陷阱

快速理解一個概念會是JavaScript進步的最大阻礙，下面我將解釋。

當你遇到一個知識點，而你好像理解了，你很可能抑制不住內心跳到下一個知識點的衝動。現實可能是你會理解下一個知識點然後繼續跳到下一個知識點。但是，很快你會到達一個節點，在這個節點你發現自己已經忘了前面所學，於是你需要回過頭複習，你快速瞟了一下之前所學然後又繼續學習新的知識。但是現在，你忘記了其他東西。你一直重複這種繼續-回顧-繼續-回顧模式直到你發現自己完全迷失。你開始沮喪，想要休息，然後當你開始重振旗鼓，卻發現自己已經忘掉所有。

幸運的是，我們有兩個應對上述問題的方法：

1、一次只學一樣東西

2、做練習-實際上是敲代碼

當你學習一個新的概念，你要將它實踐出來，練習它，與它和善相處，甚至能夠將它與其他概念聯繫到一起。當你學習一個示例，最重要的是你要自己將代碼敲出來，這樣能幫助你吸收它。另外，一次只學一個東西能夠幫助你鞏固所學，因為記憶更少的東西更容易。

這個過程看起來貌似比閱讀然後快速跳到下一個知識點要花費更長的時間，但是實際上它所花的時間更少，因為這樣你就不需要頻繁複習之前所學。我在好幾個場合後才艱難的領悟到這個道理。

3、使用正確的思維方式練習

很多人認為敲代碼是煩人的重複性工作，所以他們通常會跳過這個步驟試著尋找捷徑。如果你試圖為JavaScript練習尋找捷徑，你將會為此花費更多的時間。但是我們如何才能使得敲代碼更加的有趣，使得我們願意去敲代碼呢?

試著改變為下面的思維模式：

如果你剛學了一個JavaScript概念，然而你被告知不能使用它，對此你感覺如何?個人來說我會感到有點惱火，特別是為了弄懂它我花費了寶貴的時間。這就像是一個小孩得到了一個新的玩具，但卻被限制不能玩它。

當你學習JavaScript的新知識，試著將這個知識點視作一個新玩具，例如新車、一雙新鞋、或任何你覺得值得有趣的東西。然後，不要把敲代碼當成工作，將敲代碼視作你正在玩遊戲。你正在使用剛學的技能做一些很酷的事情。給自己驚喜，把成果展示給你的朋友。

帶著遊戲的思維模式你將學得更快，將記憶的更牢，同時你將體會到更多樂趣。

4、使用Facebook技巧為編程騰時間

人們遇到的一個普遍問題是，他們通常找不到時間去敲代碼。通常，這些人會花好幾個小時瀏覽例如Facebook、YouTube、Wikipedia或者Reddit這樣的網站。無論你是否符合上述描述，我們都能從中學到一些東西。

我當然有時間只瀏覽Facebook一會兒，但通常我會在上面待好幾個小時瀏覽往返。這是如何發生的?我認為原因在於，剛開始我並沒打算花在這上面花費那麼多時間。開始行動是做一件事情最困難的部分，所以將目標設定的足夠小能夠幫助我們進入狀態。如果有人問我是不是打算花幾個小時瀏覽Facebook，我會回答不，因為我沒有時間。然而，對於僅僅嘗試一下我是能夠接受的，這也是我能夠沉浸其中的方法。

好消息是，你能夠對敲代碼運用同樣的心理技巧。不要計劃花幾個小時敲代碼，因為你會發現自己沒有時間。相反的，告訴自己只敲三分鐘代碼。這樣你就不需要為尋找敲代碼的時間煩心。

5、思考的慢你將學得更快

這一條聽起來違反直覺，所以下面我將用一個故事來解釋。

我的一個朋友又一次對JavaScript的一個特性感到困惑。我讓他將他知道的解釋給我聽，然後告訴我哪兒讓他困惑。當它向我解釋代碼，我發現他在跳步。

「等會兒!」我說道。「慢慢來，然後將這些一步步解釋給我聽。」

我的朋友直接將整個代碼的功能總結給我聽。

我再次讓他暫停。「你還是在跳步。再解釋一次，這次我需要你一步步將每一行代碼發生了什麼解釋給我聽。」

這一次，我的朋友能夠更好的解釋代碼是如何運行的。關鍵在於他花時間去理解每一行代碼而不是試圖一下理解所有。

在上述這種案例中，思考的更慢實際上讓你學得更快。

6、在寫複雜代碼前先用簡單語言寫下

如果你要寫的代碼是複雜並且不常見的，先用簡單語言將代碼寫下。這樣，你能夠你能夠在真正寫之前知道自己要做什麼。下面是使用這個方法的兩個好處：

1、你將更容易更快速的寫代碼，因為你不需要時刻停下來思考自己將要怎麼做。

2、由於你知道代碼要幹什麼，能夠更好的排除錯誤。

總結：

我們已經講了好幾個更快速學習JavaScript的方法，但是你也能將上述方法運用於學習其他東西。下面是上述方法的概括：

1、不要再想將要學什麼，沉浸於現在

2、通過把新技能當做玩具使得練習更有趣

3、就像瀏覽Facebook、YouTube之類的網站一樣，在敲代碼前告訴自己只敲幾分鐘，這樣你就擁有了敲代碼的時間

4、慢下來，小步向前，你將學得更快

以上就是小編今天為大家分享的關於幫助web前端初學者快速掌握JavaScript技術的方法的文章，希望本篇文章能夠對正在從事web前端學習的小夥伴們有所幫助，想要了解更多web前端相關知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。

來源：#/shehui/2016/10-24/11717064.html