Maison > interface Web > js tutoriel > Utiliser des fonctions JavaScript pour trier et filtrer des tableaux

Utiliser des fonctions JavaScript pour trier et filtrer des tableaux

王林
Libérer: 2023-11-03 15:41:07
original
1141 Les gens l'ont consulté

Utiliser des fonctions JavaScript pour trier et filtrer des tableaux

Les fonctions JavaScript implémentent le tri et le filtrage des tableaux

En JavaScript, nous avons souvent besoin de trier et de filtrer les tableaux. Cet article explique comment utiliser les fonctions JavaScript pour trier et filtrer les tableaux, et donne des exemples de code spécifiques.

1. Tri des tableaux

JavaScript fournit la fonction sort() pour trier les tableaux. Il existe deux façons d'utiliser la fonction sort(). L'une consiste à trier sans passer de paramètres et à trier selon les règles de tri par défaut (tri selon le codage Unicode) ; l'autre consiste à transmettre une fonction de comparaison personnalisée et à trier en fonction du retour ; valeur de la fonction.

Par exemple, pour trier un tableau contenant des entiers, vous pouvez utiliser le code suivant :

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]
Copier après la connexion

Dans le code ci-dessus, en passant une fonction de comparaison (a, b) => a - b Donné Avec la fonction sort(), les éléments du tableau seront triés du petit au grand selon la valeur de retour de la fonction de comparaison. (a, b) => a - b给sort()函数,数组的元素会根据比较函数的返回值从小到大进行排序。

二、过滤数组

JavaScript提供了filter()函数用于对数组进行过滤。filter()函数需要传递一个回调函数作为参数,根据回调函数的返回值来判断是否保留数组的元素。

例如,对一个包含整数的数组进行过滤,只保留大于5的元素,可以使用以下代码:

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

const filteredArr = arr.filter(item => item > 5);
console.log(filteredArr); // [8, 10]
Copier après la connexion

在上面的代码中,回调函数item => item > 5判断元素是否大于5,返回true则保留该元素,返回false则过滤掉该元素。

综合应用示例

下面是一个综合应用示例,演示如何对一个包含对象的数组进行按某个字段排序和过滤的操作:

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);
Copier après la connexion

在上述示例中,首先通过传递一个比较函数(a, b) => a.age - b.age对包含用户对象的数组进行年龄排序,然后使用回调函数user => user.age > 20

2. Filtrer les tableaux

JavaScript fournit la fonction filter() pour filtrer les tableaux. La fonction filter() doit passer une fonction de rappel en tant que paramètre et déterminer si elle doit conserver les éléments du tableau en fonction de la valeur de retour de la fonction de rappel.

Par exemple, pour filtrer un tableau contenant des entiers et ne conserver que les éléments supérieurs à 5, vous pouvez utiliser le code suivant :

rrreee

Dans le code ci-dessus, la fonction de rappel item => code > Déterminez si l'élément est supérieur à 5, retournez true pour conserver l'élément, retournez false pour filtrer l'élément. 🎜🎜Exemple d'application complet🎜🎜Ce qui suit est un exemple d'application complet qui montre comment trier et filtrer un tableau contenant des objets par un certain champ : 🎜rrreee🎜Dans l'exemple ci-dessus, transmettez d'abord une fonction de comparaison <code> (a, b ) => a.age - b.age Triez le tableau contenant les objets utilisateur par âge, puis utilisez la fonction de rappel user => user.age > qui ont moins de 20 ans ou plus. 🎜🎜Résumé🎜🎜Cet article explique comment utiliser les fonctions JavaScript pour trier et filtrer les tableaux. La fonction sort() peut être utilisée pour trier le tableau, et les règles de tri peuvent être personnalisées en passant la fonction de comparaison ; la fonction filter() peut être utilisée pour filtrer le tableau en fonction de la valeur de retour de la fonction de rappel. Ces fonctions d'opération de tableau sont des outils couramment utilisés dans le développement JavaScript et fournissent des méthodes pratiques pour traiter les besoins en données. 🎜🎜J'espère que le contenu de cet article pourra vous être utile ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal