Home >Web Front-end >JS Tutorial >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
grammar
sort
<code class="language-javascript">array.sort([compareFunction])</code>Negative value: If A should be ranked before B.
compareFunction
<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.
<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
Current element. 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>Filter method
map
filter
<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
<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>
<code class="language-javascript">array.sort([compareFunction])</code>
callback
Cumulator. initialValue
Example: Seeking peace <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>
reduce
Always provide the initial value to obtain better predictability. JavaScript's map
, filter
, reduce
, and
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!