JavaScript數組方法：排序，映射，過濾和減少-js教程-PHP中文網

JavaScript Array Methods: Sort, Map, Filter, and Reduce

掌握JavaScript數組方法：排序、映射、過濾和規約，提升你的Web開發效率！本文深入探討JavaScript數組的sort、map、filter和reduce方法，並提供實用示例，助你精通數據處理。

Array.prototype.sort 排序方法

sort方法根據指定順序排列數組元素。默認情況下，它按字典順序排序字符串元素。但通過自定義比較函數，你可以實現更複雜的排序邏輯。

語法

<code class="language-javascript">array.sort([compareFunction])</code>

登入後複製

compareFunction：定義排序順序的函數。它接收兩個參數 (a, b)，並返回：
- 負值：如果a應該排在b之前。
- 零：如果a和b相等。
- 正值：如果a應該排在b之後。

示例：按升序排序數字

<code class="language-javascript">const numbers = [42, 7, 19, 73, 23];

numbers.sort((a, b) => a - b);

console.log(numbers); // 输出：[7, 19, 23, 42, 73]</code>

登入後複製

示例：按屬性排序對象

<code class="language-javascript">const books = [
  { title: 'Book A', year: 2001 },
  { title: 'Book B', year: 1998 },
  { title: 'Book C', year: 2015 }
];

books.sort((a, b) => a.year - b.year);

console.log(books); // 输出：按年份升序排列的书籍数组</code>

登入後複製

sort方法會修改原始數組。
對於數字或複雜排序，務必提供比較函數，避免意外結果。

Array.prototype.map 映射方法

map方法通過將提供的函數應用於原始數組的每個元素來創建一個新數組。它常用於數據轉換。

語法

<code class="language-javascript">array.map(callback(element, index, array))</code>

登入後複製

callback：對每個元素執行的函數，接收：
- 當前元素。
- 元素索引。
- 原始數組。

示例：轉換數字數組

<code class="language-javascript">const numbers = [1, 2, 3, 4, 5];

const squares = numbers.map(num => num ** 2);

console.log(squares); // 输出：[1, 4, 9, 16, 25]</code>

登入後複製

示例：格式化數據

<code class="language-javascript">const users = [
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Jane', lastName: 'Smith' }
];

const fullNames = users.map(user => `${user.firstName} ${user.lastName}`);

console.log(fullNames); // 输出：['John Doe', 'Jane Smith']</code>

登入後複製

map方法不會修改原始數組，它返回一個新數組。
它非常適合轉換數據結構。

Array.prototype.filter 過濾方法

filter方法創建一個新數組，其中只包含滿足給定條件的元素。它常用於提取數據的子集。

語法

<code class="language-javascript">array.filter(callback(element, index, array))</code>

登入後複製

callback：確定是否應包含 (返回true) 或排除 (返回false) 元素的函數。

示例：過濾偶數

<code class="language-javascript">const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter(num => num % 2 === 0);

console.log(evens); // 输出：[2, 4, 6]</code>

登入後複製

示例：根據條件過濾對象

<code class="language-javascript">const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 500 }
];

const expensiveProducts = products.filter(product => product.price > 700);

console.log(expensiveProducts); // 输出：价格高于700的产品数组</code>

登入後複製

filter方法不會修改原始數組。
它是提取相關數據或清理數組的強大工具。

Array.prototype.reduce 規約方法

reduce方法將一個函數應用於累加器和數組的每個元素（從左到右），將其歸約為單個值。

語法

<code class="language-javascript">array.sort([compareFunction])</code>

登入後複製

callback：對每個元素執行的函數，參數為：
- 累加器。
- 當前元素。
- 當前元素的索引。
- 原始數組。
initialValue：累加器的初始值（可選，但建議提供）。

示例：求和

<code class="language-javascript">const numbers = [42, 7, 19, 73, 23];

numbers.sort((a, b) => a - b);

console.log(numbers); // 输出：[7, 19, 23, 42, 73]</code>

登入後複製

示例：按屬性分組數據

<code class="language-javascript">const books = [
  { title: 'Book A', year: 2001 },
  { title: 'Book B', year: 1998 },
  { title: 'Book C', year: 2015 }
];

books.sort((a, b) => a.year - b.year);

console.log(books); // 输出：按年份升序排列的书籍数组</code>

登入後複製