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

Master the JavaScript array method: sorting, mapping, filtering, and regulation to improve your web development efficiency! This article discusses the

, sort, map and filter methods of the JavaScript array, and provides practical examples to help you proficient in data processing. reduce

1. Array.prototype.sort

   Sorting method

Methods arrange array elements according to the specified order. By default, it sorted the string element in the sequential sequence of the dictionary. But through custom comparison functions, you can achieve more complicated sorting logic.

grammar sort

: Define the functions of sort order. It receives two parameters (a, b) and returns:

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

Negative value: If A should be ranked before B.

• Zero: If A and B are equal. compareFunction
  Positive value: If A should be ranked behind B.
  • Example: Sort the number in the sequential order
Example: Sort by attribute sorting object

<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>

Methods modify the original array.

For numbers or complex sorting, it is necessary to provide a comparison function to avoid accidents.

<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 method

2. Methods create a new array by applying the function provided to each element of the original array. It is often used in data conversion.

   grammar

: For functions performed by each element, receive:

Current element. map

Elemental index.

Original array.

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

• callback
  Example: Convert the number array
  • Example: Formatal data
  The method will not modify the original array, and it returns a new array.

It is very suitable for conversion of the data structure.

<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>

Array.prototype.filter

<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>

Filter method

• map
Create a new array, which only contains elements that meet the given conditions. It is often used to extract data subsets.
grammar

3. : Determine whether it should contain a function (return True) or exclude (back false) elements.

   Example: Filter the even number

Example: Filter the object according to the condition

filter

Methods will not modify the original array.

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

It is a powerful tool for extracting related data or cleaning up arrays.

• callback

Array.prototype.Reduce

Statue method

<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>

The method applies a function to each element (from left to right) of the accumulator and array, and attributes it to a single value.

<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>

grammar

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

: For the function of each element, the parameters are:
• callback Cumulator.
  • Current element.
  • Index of the current element.
  • Original array.
  : The initial value of the accumulator (optional, but it is recommended).
• initialValue Example: Seeking peace

Example: Group data according to attributes

<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>

The method is very flexible and can generate array, objects or single values.

<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>

It is a powerful tool for custom conversion, data aggregation, etc.
• reduce Always provide the initial value to obtain better predictability.
Method combination
• By combining ,
, and

methods, the data processing efficiency can be optimized, especially when dealing with large data sets, avoid multiple iterations to improve performance.

Conclusion

JavaScript's map, filter, reduce, and

methods are critical for efficient and elegant data operations. Understanding their mechanisms and applications can help developers write more concise and easy -to -maintain code. Practice more and be proficient in these methods!

The above is the detailed content of JavaScript Array Methods: Sort, Map, Filter, and Reduce. For more information, please follow other related articles on the PHP Chinese website!