JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中使用數組方法:訪問器方法

本文最初是為 DigitalOcean 編寫的 .

JavaScript 中的數組由元素列表組成。 JavaScript 有許多有用的內置方法來處理數組。修改原始數組的方法稱為 mutator 方法和返回新值或表示的方法稱為 訪問器 方法。在本教程中,我們將重點介紹訪問器方法。

為了充分利用本教程,您應該對數組的創建、索引、修改和循環有一定的了解,您可以在教程中了解 JavaScript 中的數組。

本教程將介紹連接數組、將數組轉換為字符串、將數組的一部分複製到新數組以及查找數組索引的方法。

concat()

concat() 方法將兩個或多個數組合併在一起形成一個新數組。

在下面的示例中,我們將創建兩個貝類類型的數組,並將它們組合成一個新數組。

// Create arrays of monovalves and bivalves
let monovalves = ['abalone', 'conch']
let bivalves = ['oyster', 'mussel', 'clam']

// Concatenate them together into shellfish variable
let shellfish = monovalves.concat(bivalves)

shellfish
[ 'abalone', 'conch', 'oyster', 'mussel', 'clam' ]

concat() 方法可以接受多個參數,有效地允許您使用單個方法將多個數組連接在一起。

join()

join() 方法將數組的所有元素轉換為一個新的字符串。

let fish = ['piranha', 'barracuda', 'koi', 'eel']

如果沒有給出參數,join() 的輸出 將是一個逗號分隔的字符串,沒有多餘的空格。

// Join the elements of an array into a string
let fishString = fish.join()

fishString
'piranha,barracuda,koi,eel'

join() 的參數 函數將包含每個數組元素之間的分隔符。

// Join the elements of an array into a string
let fishString = fish.join(', ')

fishString
'piranha, barracuda, koi, eel'

在上面的例子中,寫 ', ' 用空格以更易讀的方式分隔數組項。作為參數提供的空字符串將完全刪除默認逗號。

slice()

slice() 方法將數組的一部分複製到一個新數組中。

let fish = ['piranha', 'barracuda', 'koi', 'eel']

假設我們想將數組中的最後兩項複製到一個新數組中。我們將從我們想要的第一個元素的索引號開始,即 2 對於 koi .我們將以索引號結束以下 我們想要的最後一個元素。 eel4 ,所以我們把 5 .

// Slice a new array from 2 to 5
let fishWithShortNames = fish.slice(2, 5)

fishWithShortNames
[ 'koi', 'eel' ]

在這種特殊情況下,由於 eel 是數組中的最後一項,第二個參數實際上是不必要的。 slice() 如果沒有提供第二個參數,將從第一個索引開始並在數組末尾停止。

// Slice a new array from 2 to the end of the array
let fishWithShortNames = fish.slice(2)

fishWithShortNames
[ 'koi', 'eel' ]

slice() 不要與 splice() 混淆 ,可以在原始數組中添加或刪除項目。

indexOf()

indexOf() 方法返回元素第一個實例的索引號。

在下面的示例中,我們有一個字符串,其中 barracuda 被列出兩次。

let fish = ['piranha', 'barracuda', 'koi', 'barracuda']

我們將使用 indexOf() 找到第一個實例。

// Find the first instance of an element
fish.indexOf('barracuda')
1

如果給定的參數是數組中不存在的值,控制台將返回 -1 .

lastIndexOf()

lastIndexOf() 方法返回元素最後一個實例的索引號。

我們可以在 indexOf() 中測試相同的示例 ,其中包括 barracuda 兩次。

let fish = ['piranha', 'barracuda', 'koi', 'barracuda']

// Find the last instance of an element
fish.lastIndexOf('barracuda')
3

lastIndexOf() 將從數組末尾開始搜索並返回找到的第一個索引號。

結論

在本課中,我們回顧了 JavaScript 中主要的內置訪問器數組方法。訪問器方法創建數組的新副本或表示,而不是改變或修改原始數組。我們學習瞭如何將數組連接在一起,將它們端到端組合,以及如何將數組轉換為逗號分隔的字符串。我們還學習瞭如何將數組的一部分複製到一個新數組中,並找到數組中給定元素的第一個和最後一個索引。

要查看數組的基礎知識,請閱讀了解 JavaScript 中的數組。要查看所有數組方法的完整列表,請查看 Mozilla 開發者網絡上的數組參考。


Tutorial JavaScript 教程
  1. 如何選擇 contenteditable div 中的所有文本?

  2. JavaScript調試器實用介紹;

  3. 從 NodeJS 應用程序收集實時堆棧跟踪

  4. 前端應該堅持什麼,在哪裡堅持?

  5. WebGL 月。第 31 天。WebGL 月度總結

  6. 如何通過 Chrome 應用模式窗口在資源管理器中打開本地文件夾?

  7. CSS 部件的有效名稱

  1. 字符類

  2. 將 React 的簡單性帶入你的整個堆棧。

  3. 當更改來自另一個函數時,onchange 事件不會觸發

  4. 什麼是 ECMAScript?

  5. 使用 Docker 設置節點的分步指南

  6. 點擊圖片展開

  7. 300行重寫React Fiber核心算法

  1. 使用 Leaflet 在 Vue 中進行地圖可視化

  2. 如何使用 React Spring 製作五彩紙屑大砲

  3. 使用 Bearer 更輕鬆地進行 OAuth 和 API 調用

  4. 5 個 API 為您的下一個項目提供靈感