首頁 > web前端 > js教程 > 主體

你應該知道的 JavaScript 陣列方法

WBOY
發布: 2024-07-17 17:44:22
原創
209 人瀏覽過

Métodos de Arrays em JavaScript que Você Deveria Saber

陣列是 JavaScript 程式設計的重要組成部分,提供了一種儲存和操作資料集合的強大方法。在本文中,我們將探討每個 JavaScript 程式設計師都應該知道的 18 種基本陣列方法,以便編寫更有效率、更清晰的程式碼。

1. 推

arr.push(..element) 方法將一個新元素加到數組末尾並傳回數組的新長度。該方法改變了原始數組。

文法:

arr.push(element1, element2, …)
登入後複製

範例:

let arr = [1, 2, 3];
arr.push(4); // arr agora é [1, 2, 3, 4]
登入後複製

2. 流行音樂

arr.pop() 方法從陣列中刪除最後一個元素並傳回刪除的元素。此方法也會變更原始數組及其長度。

文法:

arr.pop()
登入後複製

範例:

let arr = [1, 2, 3, 4];
arr.pop(); // arr agora é [1, 2, 3]
登入後複製

3. 轉變

arr.shift() 方法從陣列中刪除第一個元素並傳回刪除的元素。此方法也會更改原始數組的長度。

文法:

arr.shift()
登入後複製

範例:

let arr = [1, 2, 3, 4];
arr.shift(); // arr agora é [2, 3, 4]
登入後複製

4. 取消換檔

arr.unshift(elements) 方法將一個或多個元素加到陣列的開頭並傳回陣列的新長度。

文法:

arr.unshift(item1, item2, …)
登入後複製

範例:

let arr = [2, 3, 4];
arr.unshift(1); // arr agora é [1, 2, 3, 4]
登入後複製

5. 拼接

arr.splice() 方法透過刪除、取代或新增元素來修改原始陣列。

文法:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
登入後複製

範例:

let arr = [1, 2, 3, 4];
arr.splice(1, 1); // arr agora é [1, 3, 4]
登入後複製

6.切片

arr.slice() 方法選擇數組的一部分並傳回一個新數組,其中的項目從開始索引複製到末尾。原始數組沒有改變。

文法:

arr.slice(start, end)
登入後複製

範例:

let arr = [1, 2, 3, 4];
let newArr = arr.slice(1, 3); // newArr é [2, 3]
登入後複製

7. 包括

arr.includes(item, index) 方法檢查該項目是否存在於給定索引的陣列中,如果找到則傳回 true,否則傳回 false。

文法:

arr.includes(item, index)
登入後複製

範例:

let arr = [1, 2, 3, 4];
arr.includes(3); // true
登入後複製

8. 對於每個

arr.forEach() 方法為陣列的每個元素執行一次給定的函數。

文法:

arr.forEach(callback)
登入後複製

範例:

let arr = [1, 2, 3, 4];
arr.forEach(num => console.log(num)); // imprime 1, 2, 3, 4
登入後複製

9. 加入

arr.join(separator) 方法建立一個字串,其中連接了數組的所有元素,並用特定分隔符號分隔。

文法:

arr.join(separator)
登入後複製

範例:

let arr = [1, 2, 3, 4];
arr.join('-'); // "1-2-3-4"
登入後複製

10. 字串

arr.toString() 方法將陣列轉換為字串並傳回結果。

文法:

arr.toString()
登入後複製

範例:

let arr = [1, 2, 3, 4];
arr.toString(); // "1,2,3,4"
登入後複製

11. 地圖

map() 方法對原始陣列的每個元素呼叫回調函數,並傳回一個包含結果的新陣列。這是一種非變異方法。

文法:

  arr.map(function callback(currentValue, index, array) {
    // Retorna um novo valor
  })
登入後複製

範例:

let arr = [1, 2, 3, 4];
let doubled = arr.map(num => num * 2); // [2, 4, 6, 8]
登入後複製

12. 減少

reduce() 方法將函數應用於累加器和每個數組元素(從左到右)以減少為單一值。

文法:

arr.reduce(function callback(accumulator, currentValue, index, array) {
  // Retorna o valor acumulado
}, initialValue)
登入後複製

範例:

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, num) => acc + num, 0); // 10
登入後複製

13. 過濾器

filter() 方法建立一個新數組,其中包含透過所提供函數實現的測試的所有元素。

文法:

arr.filter(function callback(element, index, array) {
  // Retorna true para manter o elemento
})
登入後複製

範例:

let arr = [1, 2, 3, 4];
let even = arr.filter(num => num % 2 === 0); // [2, 4]
登入後複製

14.排序

sort() 方法按升序或根據提供的比較函數組織數組的元素。

文法:

arr.sort([compareFunction])
登入後複製

範例:

let arr = [4, 2, 3, 1];
arr.sort(); // [1, 2, 3, 4]
登入後複製

15.查找

find() 方法傳回數組中滿足給定測試函數的第一個元素。

文法:

arr.find(function callback(element, index, array) {
  // Retorna true para encontrar o elemento
})
登入後複製

範例:

let arr = [1, 2, 3, 4];
let found = arr.find(num => num > 2); // 3
登入後複製

16.索引

indexOf() 方法傳回在陣列中可以找到給定元素的第一個索引,如果該元素不存在,則傳回 -1。

文法:

arr.indexOf(searchElement, fromIndex)
登入後複製

範例:

let arr = [1, 2, 3, 4];
let index = arr.indexOf(3); // 2
登入後複製

17. 添加

some() 方法測試數組中至少一個元素是否通過實現的測試函數。

文法:

arr.some(function callback(element, index, array) {
  // Retorna true se pelo menos um elemento passar no teste
})
登入後複製

範例:

let arr = [1, 2, 3, 4];
let hasEven = arr.some(num => num % 2 === 0); // true
登入後複製

18. Concat

O método concat() é usado para mesclar dois ou mais arrays.

Sintaxe:

arr.concat(array2, array3, ..., arrayN)
登入後複製

Exemplo:

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2); // [1, 2, 3, 4]
登入後複製

Esses métodos são fundamentais para trabalhar com arrays em JavaScript. Dominar esses métodos permitirá que você manipule dados de forma mais eficiente e escreva códigos mais limpos e legíveis. Feliz codificação!

Referências:

  • 10 Important JavaScript Array Methods You Must Know
  • Lists of Top 10 JavaScript array methods a beginner Js developer should know

以上是你應該知道的 JavaScript 陣列方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!