透過範例探索 JavaScript 數組方法-js教程-PHP中文網

透過範例探索 JavaScript 數組方法

王林

發布： 2024-07-18 05:58:00

原創

1025 人瀏覽過

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中文網其他相關文章！