你今天應該掌握的5種javascript陣列方法

想了解JavaScript陣列,但卻無法掌握它們?檢視我們的JavaScript陣列示例以獲得指導。...

從新手程序員到編碼專家,所有技能級別的Web開發人員都認識到JavaScript在開發現代網站中的重要性。JavaScript是如此的優勢,所以知道是否要創建應用程序是一項關鍵技能。

javascript-array-methods

JavaScript語言內置的最強大的構建塊之一是數組。數組通常存在於許多編程語言中,用於存儲數據。

JavaScript使用數組,但添加了稱為數組方法的有用特性。作為一名開發人員,有五種方法可以幫助你提高技能。

什麼是數組方法(array methods)?

數組方法是JavaScript內置的函數,可以應用於數組。每個方法都有一個唯一的函數,可以對數組執行更改或計算,從而使您無需從頭開始編寫通用函數。

JavaScript中的數組方法是使用附加到數組變量的點表示法運行的。因為它們只是JavaScript函數,所以總是以括號結束,括號可以容納可選參數。下面是一個附加到名為myArray的簡單數組的方法。

var myArray = [1,2,3]; myArray.pop();

這段代碼將對數組應用一個名為pop的方法。

示例數組

對於每個示例,讓我們使用一個我們將調用myArray的示例數組來執行這些方法。隨時拉上您的控制檯和代碼隨著我們去。

var myArray = [2,4,5,7,9,12,14];

這些示例將假定您知道JavaScript是什麼以及它是如何工作的基礎。如果你不知道,沒關係,我們都在這裡學習和成長。

讓我們深入探討五種強大的方法!

1數組.推送()

它的作用:push()獲取數組並將一個或多個元素添加到數組的末尾,然後返回數組的新長度。此方法將修改現有數組。

讓我們通過運行push()將數字20添加到數組中,使用20作為參數。

var myArray = [2,4,5,7,9,12,14];myArray.push(20);

讓我們看看它是否有效

c***ole.log(myArray); [2,4,5,7,9,12,14,20]

在myArray上運行push()方法將參數中給定的值添加到數組中。在這種情況下,20。當您在控制檯中檢查myArray時,您將看到值現在被添加到數組的末尾。

2數組.concat()

is的作用:concat()可以將兩個或多個數組合併到一個新數組中。它不修改現有的數組,而是創建一個新的數組。

讓我們使用myArray並將一個名為newArray的數組合併到其中。

var myArray = [2,4,5,7,9,12,14];var newArray = [1,2,3];var result = myArray.concat(newArray); c***ole.log(result); [2,4,5,7,9,12,14,1,2,3]

在處理需要組合的多個數組或值時,這種方法非常有效,在使用變量時只需一個非常簡單的步驟。

三。數組.join()

它的作用是:join()獲取一個數組,並將數組的內容連接起來,並用逗號分隔。結果被放置在字符串中。如果要使用逗號的替代項,可以指定分隔符。

讓我們看看如何使用myArray。首先使用不帶分隔符參數的默認方法,該方法將使用逗號。

var myArray = [2,4,5,7,9,12,14];myArray.join(); "2,4,5,7,9,12,14"

JavaScript將輸出一個字符串,數組中的每個值用逗號分隔。可以使用函數中的參數更改分隔符。讓我們看兩個參數:一個空格和一個字符串。

myArray.join(' ');"2 4 5 7 9 12 14" myArray.join(' and ');"2 and 4 and 5 and 7 and 9 and 12 and 14"

第一個例子是一個空格,它可以使您輕鬆地讀取字符串。

第二個示例使用('and'),這裡需要知道兩件事。

首先,我們使用“和”兩個詞來分隔值。其次,單詞“和”的兩邊都有一個空間。使用join()時,請記住這一點。JavaScript從字面上讀取參數,因此如果這個空間被遺漏,所有的東西都會被擠在一起(例如“2and4and5…”等等),不是一個非常可讀的輸出!

4數組.foreach()

它的功能:forEach()(區分大小寫!)對數組中的每個項執行函數。此函數是您創建的任何函數,類似於使用“for”循環將函數應用於數組,但編寫代碼的工作量要少得多。

forEach()還有一些內容,讓我們看看語法,然後執行一個簡單的函數來演示。

myArray.forEach(function(item){//code});

我們使用的是myArray,forEach()是用點表示法應用的。將要使用的函數放在參數括號內,即示例中的函數(項)。

讓我們來談談函數(項)。這是forEach()內部執行的函數,它有自己的參數。我們正在調用參數項。關於這個論點有兩件事要知道:

  • 當forEach()在數組上循環時,它將代碼應用於此參數。可以將其視為保存當前元素的臨時變量。
  • 如果選擇參數的名稱,則可以將其命名為任何名稱。通常,這會被命名為更容易理解的東西,比如“item”或“element”。

考慮到這兩件事,讓我們看一個簡單的例子。讓我們給每個值加15,讓控制檯顯示結果。

myArray.forEach(function(item){ c***ole.log(item + 15);});

我們在本例中使用item作為變量,因此編寫函數,通過item向每個值添加15。然後控制檯打印結果。下面是谷歌Chrome控制檯中的外觀。

forEach Function Applied to Array in JavaScript C***ole

結果是數組中的每一個數字,但加上15!

5數組.map()

它的作用:map()對數組中的每個元素執行一個函數,並將結果放入一個新數組中。

在每個元素上運行函數聽起來像forEach()。這裡的區別是map()在運行時創建一個新數組。ForEach()不會自動創建新數組,必須編寫特定函數才能創建。

讓我們使用map()將myArray中每個元素的值加倍,並將它們放入一個新數組中。您將看到相同的函數(item)語法,以便進一步練習。

var myArray = [2,4,5,7,9,12,14]; var doubleArray = myArray.map(function(item){return item * 2;});

讓我們在控制檯中檢查結果。

c***ole.log(doubleArray); [4,8,10,14,18,24,28]

myArray保持不變:

c***ole.log(myArray); [2,4,5,7,9,12,14]

javascript旅程的下一步

數組是JavaScript語言中一個強大的部分,這就是為什麼有這麼多內置的方法可以讓您作為一個開發人員的生活更輕鬆。掌握這五種方法最好的方法就是實踐。

當您繼續學習JavaScript時,MDN是一個很好的詳細文檔資源。另外,下面是您應該學習的JavaScript框架。在控制檯中獲得舒適感,然後使用最好的程序員JavaScript編輯器將您的技能提高一個檔次。快樂的編碼!

  • 發表於 2021-03-18 11:00
  • 閱讀 ( 51 )
  • 分類:程式設計

你可能感興趣的文章

打字稿(typescript)和es6型(es6)的區別

主要區別–typescript與es6 TypeScript和ES6是與javascript相關的兩種技術在全球資訊網上有大量的網頁可用。每個組織都有自己的網站來與客戶溝通,瞭解市場趨勢。web應用程式開發中使用了多種技術。最常見的三種技術是HTML、CSS...

  • 發佈於 2020-10-17 01:32
  • 閲讀 ( 36 )

json格式(json)和xml(xml)的區別

...交換資料的兩種常用格式。JSON和XML的主要區別在於JSON(JavaScript物件表示法)是一種元語言,而XML(可擴充套件標記語言)顧名思義是一種標記語言。本文討論JSON和XML的關鍵特性以及它們之間的異同。 目錄 1. 概述和主要區別 2....

  • 發佈於 2020-10-20 01:35
  • 閲讀 ( 44 )

你將來應該學習哪種程式語言?

...言來學習和掌握未來,那就沒有什麼可比性了:那一定是JavaScript。 ...

  • 發佈於 2021-03-11 19:38
  • 閲讀 ( 56 )

powershell foreach、while和其他迴圈的工作原理

...分解這裡發生的事情:我們將把所有的舊檔案移到一個以今天的日期命名的超過30天的新目錄中。一旦資料夾建立,我們就必須建立同名的ZIP存檔。我們將測試以確保存檔成功並且.ZIP檔案存在,然後刪除新資料夾。將此設定為每...

  • 發佈於 2021-03-11 23:17
  • 閲讀 ( 52 )

什麼是es6以及javascript程式設計師需要知道什麼

ES6是ECMA指令碼程式語言的版本6。ECMA指令碼是JavaScript的標準化名稱,版本6是繼2011年釋出的版本5之後的下一個版本。它是JavaScript語言的一個主要增強,並添加了更多的功能,以使大規模軟體開發更容易。 ...

  • 發佈於 2021-03-12 16:38
  • 閲讀 ( 47 )

c程式設計的特點,使其獨特(和更好)

...相比之下,C++聲明瞭82個關鍵字,java有50個保留關鍵字,JavaScript有63個。COBOL聲明瞭高達357個關鍵字。想象一下,要記住和避開這麼多的關鍵字是多麼令人頭痛! ...

  • 發佈於 2021-03-13 04:35
  • 閲讀 ( 45 )

使用sql連線字串的巧妙方法

...串的非常有用的方法。PHP使用句號將字串連線在一起,而JavaScript和jQuery使用加號。 ...

  • 發佈於 2021-03-13 07:05
  • 閲讀 ( 47 )

如何用photoshop指令碼自動化photoshop

... 不要擔心這聽起來是否複雜:指令碼是用JavaScript編寫的,JavaScript是一種簡單但功能強大的語言。 ...

  • 發佈於 2021-03-13 07:15
  • 閲讀 ( 59 )

為高效的程式設計師和程式設計師提供的5個最佳javascript編輯器

... JavaScript從一開始就是一種混亂的語言,因此您需要所有能得到的幫助。一個適當的、裝備精良的文字編輯器可以幫助您更快地編寫程式碼,編寫更乾淨的程式碼,儘早地...

  • 發佈於 2021-03-14 08:05
  • 閲讀 ( 52 )

網路上的python:你可以構建的驚人的東西

...網站您將看到第五個最流行的web框架是基於Python的。除了JavaScript和Ruby之外,Python是用於web開發的最佳語言之一。 ...

  • 發佈於 2021-03-15 03:11
  • 閲讀 ( 47 )