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

透過範例探索 JavaScript 數組方法

王林
發布: 2024-07-18 05:58:00
原創
982 人瀏覽過

Exploring JavaScript Array Methods with Examples

JavaScript 陣列用途廣泛,提供多種內建方法來有效率地操作、迭代和管理資料。理解這些方法對於有效編程至關重要。讓我們透過實際例子來深入研究一些常用的陣列方法。

數組方法

  • push(): 將一個或多個元素加到陣列末尾並傳回陣列的新長度。
let fruits = ['apple', 'banana'];
fruits.push('orange');  // returns 3 (new length of array)
console.log(fruits);    // Output: ['apple', 'banana', 'orange']
登入後複製
  • pop(): 從陣列中刪除最後一個元素並傳回該元素。
let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();  // returns 'orange'
console.log(fruits);           // Output: ['apple', 'banana']
console.log(lastFruit);        // Output: 'orange'
登入後複製
  • shift(): 從陣列中刪除第一個元素並傳回該刪除的元素。
let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();  // returns 'apple'
console.log(fruits);              // Output: ['banana', 'orange']
console.log(firstFruit);          // Output: 'apple'
登入後複製
  • unshift(): 將一個或多個元素加到陣列的開頭並傳回陣列的新長度。
let fruits = ['banana', 'orange'];
fruits.unshift('apple');  // returns 3 (new length of array)
console.log(fruits);      // Output: ['apple', 'banana', 'orange']
登入後複製
  • forEach(): 對每個陣列元素執行一次提供的函數。
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num * 2);  // Output: 2, 4, 6
});
登入後複製
  • map(): 建立一個新數組,其中填充了對呼叫數組中每個元素呼叫所提供函數的結果。
let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // Output: [2, 4, 6]
登入後複製
  • filter(): 建立一個新數組,其中包含透過所提供函數實現的測試的所有元素。
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens);  // Output: [2, 4]
登入後複製
  • find(): 傳回數組中滿足所提供的測試函數的第一個元素。
let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(function(num) {
  return num > 25;
});
console.log(found);  // Output: 30
登入後複製
  • reduce(): 對累加器和陣列中的每個元素(從左到右)套用函數,將其減少為單一值。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, current) {
  return acc + current;
}, 0);
console.log(sum);  // Output: 15 (1 + 2 + 3 + 4 + 5)
登入後複製
  • indexOf(): 傳回在陣列中可以找到給定元素的第一個索引,如果不存在則傳回 -1。
let fruits = ['apple', 'banana', 'orange', 'apple'];
let index = fruits.indexOf('apple');  // returns 0
console.log(index);                   // Output: 0
登入後複製
  • lastIndexOf(): 傳回在陣列中可以找到給定元素的最後一個索引,如果不存在則傳回 -1。
let fruits = ['apple', 'banana', 'orange', 'apple'];
let lastIndex = fruits.lastIndexOf('apple');  // returns 3
console.log(lastIndex);                      // Output: 3
登入後複製

這些陣列方法是在 JavaScript 中高效能操作資料結構的基本工具。透過掌握這些方法,您將獲得在各種程式設計場景中處理陣列的強大工具包。

以上是透過範例探索 JavaScript 數組方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板