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>

登录后复制