Home Web Front-end JS Tutorial Using JavaScript functions to sort and filter arrays

Using JavaScript functions to sort and filter arrays

Nov 03, 2023 pm 03:41 PM
Array filtering Array sort javascript function

Using JavaScript functions to sort and filter arrays

JavaScript function implements sorting and filtering of arrays

In JavaScript, we often need to sort and filter arrays. This article will introduce how to use JavaScript functions to sort and filter arrays, and give specific code examples.

1. Sorting arrays

JavaScript provides the sort() function for sorting arrays. The sort() function has two uses. One is to pass no parameters and sort according to the default sorting rules (sorting according to Unicode encoding); the other is to pass a custom comparison function and sort according to the return value of the function. .

For example, to sort an array containing integers, you can use the following code:

const arr = [5, 3, 8, 1, 10];

// 默认排序
const sortedArr1 = arr.sort();
console.log(sortedArr1); // [1, 10, 3, 5, 8]

// 自定义比较函数进行排序
const sortedArr2 = arr.sort((a, b) => a - b);
console.log(sortedArr2); // [1, 3, 5, 8, 10]
Copy after login

In the above code, by passing a comparison function (a, b) =&gt ; a - bGive the sort() function, and the elements of the array will be sorted from small to large according to the return value of the comparison function.

2. Filter arrays

JavaScript provides the filter() function for filtering arrays. The filter() function needs to pass a callback function as a parameter, and determine whether to retain the elements of the array based on the return value of the callback function.

For example, to filter an array containing integers and only retain elements greater than 5, you can use the following code:

const arr = [5, 3, 8, 1, 10];

const filteredArr = arr.filter(item => item > 5);
console.log(filteredArr); // [8, 10]
Copy after login

In the above code, the callback function item =&gt ; item > 5 Determine whether the element is greater than 5. Return true to retain the element, return false to filter out the element.

Comprehensive application example

The following is a comprehensive application example that demonstrates how to sort and filter an array containing objects by a certain field:

const users = [
  { name: '张三', age: 20 },
  { name: '李四', age: 25 },
  { name: '王五', age: 18 },
  { name: '赵六', age: 30 },
];

// 按年龄从小到大排序
const sortedUsers = users.sort((a, b) => a.age - b.age);
console.log(sortedUsers);

// 年龄大于20的用户
const filteredUsers = users.filter(user => user.age > 20);
console.log(filteredUsers);
Copy after login

In the above In the example, first sort the array containing user objects by age by passing a comparison function (a, b) => a.age - b.age, and then use the callback function user =&gt ; user.age > 20Filter out users whose age is less than or equal to 20.

Summary

This article introduces how to use JavaScript functions to sort and filter arrays. The sort() function can be used to sort the array, and the sorting rules can be customized by passing the comparison function; the filter() function can be used to filter the array based on the return value of the callback function. These array operation functions are commonly used tools in JavaScript development and provide convenient methods for processing data needs.

Hope the content of this article can be helpful to you!

The above is the detailed content of Using JavaScript functions to sort and filter arrays. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1652
14
PHP Tutorial
1251
29
C# Tutorial
1224
24
Fast array sorting method that preserves key names in PHP Fast array sorting method that preserves key names in PHP May 02, 2024 pm 03:06 PM

Fast array sorting method in PHP that preserves key names: Use the ksort() function to sort the keys. Use the uasort() function to sort using a user-defined comparison function. Practical case: To sort an array of user IDs and scores by score while retaining the user ID, you can use the uasort() function and a custom comparison function.

Asynchronous Programming of JavaScript Functions: Essential Tips for Handling Complex Tasks Asynchronous Programming of JavaScript Functions: Essential Tips for Handling Complex Tasks Nov 18, 2023 am 10:06 AM

JavaScript Function Asynchronous Programming: Essential Skills for Handling Complex Tasks Introduction: In modern front-end development, handling complex tasks has become an indispensable part. JavaScript function asynchronous programming skills are the key to solving these complex tasks. This article will introduce the basic concepts and common practical methods of JavaScript function asynchronous programming, and provide specific code examples to help readers better understand and use these techniques. 1. Basic concepts of asynchronous programming In traditional synchronous programming, the code is

JS array sorting: in-depth analysis of the working principle and mechanism of the sort() method JS array sorting: in-depth analysis of the working principle and mechanism of the sort() method Dec 28, 2023 am 11:47 AM

To deeply understand JS array sorting: the principles and mechanisms of the sort() method, specific code examples are required. Introduction: Array sorting is one of the very common operations in our daily front-end development work. The array sorting method sort() in JavaScript is one of the most commonly used array sorting methods. However, do you really understand the principles and mechanisms of the sort() method? This article will give you an in-depth understanding of the principles and mechanisms of JS array sorting, and provide specific code examples. 1. Basic usage of sort() method

Use JavaScript functions to implement web page navigation and routing Use JavaScript functions to implement web page navigation and routing Nov 04, 2023 am 09:46 AM

In modern web applications, implementing web page navigation and routing is a very important part. Using JavaScript functions to implement this function can make our web applications more flexible, scalable and user-friendly. This article will introduce how to use JavaScript functions to implement web page navigation and routing, and provide specific code examples. Implementing web page navigation For a web application, web page navigation is the most frequently operated part by users. When a user clicks on the page

Real-time updates to data visualizations using JavaScript functions Real-time updates to data visualizations using JavaScript functions Nov 04, 2023 pm 03:30 PM

Real-time updates of data visualization using JavaScript functions With the development of data science and artificial intelligence, data visualization has become an important data analysis and display tool. By visualizing data, we can understand the relationships and trends between data more intuitively. In web development, JavaScript is a commonly used scripting language with powerful data processing and dynamic interaction functions. This article will introduce how to use JavaScript functions to achieve real-time updates of data visualization, and show the specific

Guide to writing a custom sorting algorithm for PHP arrays Guide to writing a custom sorting algorithm for PHP arrays Apr 27, 2024 pm 06:12 PM

How to write a custom PHP array sorting algorithm? Bubble sort: Sorts an array by comparing and exchanging adjacent elements. Selection sort: Select the smallest or largest element each time and swap it with the current position. Insertion sort: Insert elements one by one into the sorted part.

How to keep key names after sorting PHP array by value? How to keep key names after sorting PHP array by value? May 02, 2024 pm 04:09 PM

The way to sort an array by value in PHP while preserving the key names is to use the usort() function to sort the array by value. Pass an anonymous function to the usort() function as a comparison function, which returns the difference in element values. usort() will sort the array according to the anonymous function while keeping the key names unchanged.

Use JavaScript functions to implement image carousels and slideshow effects Use JavaScript functions to implement image carousels and slideshow effects Nov 04, 2023 am 08:59 AM

JavaScript is a scripting language that can be used to add interactive effects to web pages. Among them, image carousel and slideshow effects are common web page animation effects. This article will introduce how to use JavaScript functions to achieve these two effects and provide specific code examples. Picture carousel Picture carousel is an effect that plays multiple pictures in turn in a certain way. When implementing image carousels, JavaScript timers and CSS style controls need to be used. (1) Preparation work First, in the HTML file

See all articles