JavaScriptアレイメソッド：ソート、マップ、フィルター、および削減

JavaScriptアレイメソッドをマスター：ソート、マッピング、フィルタリング、およびレギュレーションのために、Web開発効率を向上させます！この記事では、JavaScriptアレイの

、sort、map、filterメソッドについて説明し、データ処理に習熟するための実用的な例を提供します。 reduce

1. array.prototype.sort

   並べ替え方法

メソッド指定された順序に従って配列要素を配置します。デフォルトでは、辞書のシーケンシャルシーケンスの文字列要素をソートしました。ただし、カスタム比較関数を使用すると、より複雑なソートロジックを実現できます。

文法 sort

：ソート順序の関数を定義します。 2つのパラメーター（a、b）を受信し、returns：

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

負の値：Bの前にランク付けする必要がある場合

• ゼロ：aとbが等しい場合。 compareFunction
  正の値：AがBの背後にランク付けされるべき場合
  • 例：シーケンシャルの順序で番号を並べ替え
例：属性によってソートオブジェクト

をソートします

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

• sort
array.prototype.map
• マップメソッド

2. メソッド元の配列の各要素に提供された関数を適用して、新しい配列を作成します。データ変換でよく使用されます。

   文法

：各要素によって実行される関数については、受信してください：

現在の要素。 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>

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>

フィルターメソッド

• map
与えられた条件を満たす要素のみを含む新しい配列を作成します。データサブセットを抽出するためによく使用されます。
文法

3. ：関数（trueを返す）を含むか、除外（false）要素を除外するかを決定します。

   例：偶数をフィルタリング

例：条件に応じてオブジェクトをフィルタリング

filter

メソッドは元の配列を変更しません。

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

関連データを抽出したり、配列をクリーンアップするための強力なツールです。

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

メソッドは、アキュムレータとアレイの各要素（左から右）に関数を適用し、単一の値に属性します。

<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
  現在の要素。
  • 現在の要素の
  インデックス。
  元の配列。
  ：アキュムレータの初期値（オプションですが、推奨されます）。
• 例：平和を求めてinitialValue

例：属性に従ってグループデータ

<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
• メソッドの組み合わせ
• 、
、および

メソッドを組み合わせることにより、特に大規模なデータセットを扱う場合は、データ処理効率を最適化できます。複数の反復を回避してパフォーマンスを改善します。

結論

javascriptのmap、filter、reduce、および

メソッドは、効率的でエレガントなデータ操作に重要です。メカニズムとアプリケーションを理解することは、開発者がより簡潔で簡単なコードを書くのに役立ちます。 もっと練習し、これらの方法に熟練してください！

以上がJavaScriptアレイメソッド：ソート、マップ、フィルター、および削減の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。