ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript 関数を使用した配列の並べ替えとフィルター処理

JavaScript 関数を使用した配列の並べ替えとフィルター処理

王林
リリース: 2023-11-03 15:41:07
オリジナル
1135 人が閲覧しました

JavaScript 関数を使用した配列の並べ替えとフィルター処理

JavaScript 関数は配列の並べ替えとフィルター処理を実装します

JavaScript では、配列の並べ替えとフィルター処理が必要になることがよくあります。この記事では、JavaScript 関数を使用して配列を並べ替えたりフィルターしたりする方法と、具体的なコード例を紹介します。

1. 配列の並べ替え

JavaScript には、配列を並べ替えるための sort() 関数が用意されています。 sort() 関数には 2 つの用途があります。1 つはパラメータを渡さず、デフォルトの並べ替えルール (Unicode エンコードに従った並べ替え) に従って並べ替えることです。もう 1 つは、カスタム比較関数を渡し、関数の戻り値に従って並べ替えることです。 . .

たとえば、整数を含む配列を並べ替えるには、次のコードを使用できます。

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]
ログイン後にコピー

上記のコードでは、比較関数 (a, b) =&gt を渡します。 ; a - bsort() 関数を実行すると、配列の要素が比較関数の戻り値に従って小さいものから大きいものへと並べ替えられます。

2. 配列のフィルタリング

JavaScript は、配列をフィルタリングするための filter() 関数を提供します。 filter() 関数は、コールバック関数をパラメータとして渡し、コールバック関数の戻り値に基づいて配列の要素を保持するかどうかを決定する必要があります。

たとえば、整数を含む配列をフィルターし、5 より大きい要素のみを保持するには、次のコードを使用できます。

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

const filteredArr = arr.filter(item => item > 5);
console.log(filteredArr); // [8, 10]
ログイン後にコピー

上記のコードでは、コールバック関数 item = &gt ; item > 5 要素が 5 より大きいかどうかを判断します。要素を保持する場合は true を返し、要素をフィルターで除外する場合は false を返します。

包括的なアプリケーションの例

以下は、オブジェクトを含む配列を特定のフィールドで並べ替え、フィルター処理する方法を示す包括的なアプリケーションの例です。たとえば、まず比較関数

(a, b) => a.age - b.age

を渡して、ユーザー オブジェクトを含む配列を年齢順に並べ替えてから、コールバック関数 user =&gt を使用します。 ; user.age > 20年齢が 20 以下のユーザーを除外します。 概要

この記事では、JavaScript 関数を使用して配列を並べ替えたりフィルター処理したりする方法を紹介します。 sort() 関数を使用して配列を並べ替えることができ、比較関数を渡すことで並べ替えルールをカスタマイズできます。filter() 関数を使用して、コールバック関数の戻り値に基づいて配列をフィルタリングすることができます。これらの配列操作関数は、JavaScript 開発で一般的に使用されるツールであり、データのニーズを処理するための便利な方法を提供します。

この記事の内容がお役に立てば幸いです。

以上がJavaScript 関数を使用した配列の並べ替えとフィルター処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート