JavaScript で 2 次元オブジェクト配列内の繰り返しフィールドをフィルターし、一意の値のみを保持します (array.filter および Array.from)

1.Array.filterフィルタリング

JavaScript では、Array.filter()とSetデータ構造を使用して、オブジェクトの 2 次元配列内の重複フィールドをフィルタリングし、一意の値のみを保持できます。考えられる書き方の 1 つを次に示します。

// 示例数据
const array = [
  {
    
     id: 1, name: 'John' },
  {
    
     id: 2, name: 'Jane' },
  {
    
     id: 3, name: 'John' },
  {
    
     id: 4, name: 'Alice' },
  {
    
     id: 5, name: 'Jane' }
];

// 使用 Set 过滤数组
const uniqueArray = array.filter((obj, index, self) =>
  index === self.findIndex((o) => (
    o.name === obj.name
  ))
);

console.log(uniqueArray);

上記の例では、Array.filter()メソッドを使用して配列を反復処理し、Array.findIndex()メソッドを使用して、現在のオブジェクトと同じ名前を持つ最初のオブジェクトのインデックス位置を見つけます。この方法では、オブジェクトの最初の出現のみが保持され、後続の重複オブジェクトはフィルターで除外され、uniqueArray一意の値のみを含む配列が得られます。

出力は次のとおりです。

[
  {
    
     id: 1, name: 'John' },
  {
    
     id: 2, name: 'Jane' },
  {
    
     id: 4, name: 'Alice' }
]

注: 上記のメソッドは、同じフィールド (ここではname) を持つオブジェクトのみをフィルターします。この場合、同じidフィールドはフィルターされません。複数のフィールドに基づいてフィルタリングする場合は、Array.findIndex()コールバック関数に適切な条件判定を追加できます。

array.filter()方法

array.filter()指定された基準を満たすすべての要素を含む新しい配列を作成するために使用される配列メソッドです。コールバック関数を引数として受け取り、各配列要素でその関数を呼び出します。コールバック関数は、要素を保持するかどうかを決定するためにブール値を返す必要があります。

array.filter()構文は次のとおりです。

array.filter(callback(element[, index, [array]])[, thisArg])

の：

• callback: 必須。各要素をテストする機能を示します。
  • element: 現在処理中の要素。
  • index(オプション): 配列内の現在の要素のインデックス。
  • array(オプション):filter呼び出すメソッドの配列。
• thisArg(オプション): コールバック関数の実行に使用される値this。

array.filter()このメソッドの使用方法を示す簡単な例を次に示します。

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

上の例では、各数値が偶数かどうかをテストするコールバック関数を定義しました(num) => num % 2 === 0。array.filter()メソッドは配列内の各要素を反復処理し、コールバック関数を各要素に適用します。コールバック関数が戻った場合にのみtrue、対応する要素が新しい配列に保存されますevenNumbers。

array.filter()条件を満たす要素の新しい配列が返され、元の配列は影響を受けないことに注意してください。

2.配列.フィルターから

const arr = [
  {
    
     id: 1, name: 'John' },
  {
    
     id: 2, name: 'Jane' },
  {
    
     id: 3, name: 'John' },
  {
    
     id: 4, name: 'Kate' },
  {
    
     id: 5, name: 'Jane' }
];

// 使用Set和map进行去重
const uniqueArr = Array.from(new Set(arr.map(obj => obj.name))).map(name => {
    
    
  return arr.find(obj => obj.name === name);
});

console.log(uniqueArr);

Array.from方法

このメソッドを使用して、Array.from配列のようなオブジェクトまたは反復可能なオブジェクトを配列に変換します。その構文は次のとおりです。

Array.from(arrayLike[, mapFn[, thisArg]])

の：

• arrayLike: 配列のようなオブジェクト、または配列に変換する反復可能オブジェクト。
• mapFn(オプション): 各要素を操作または変換するマッピング関数。
• thisArg(オプション): オプションでthisマッピング関数に値を設定します。

Array.from以下に、さまざまな状況で使用される表記法を示す例をいくつか示します。

1. 配列のようなオブジェクトを配列に変換します。

const arrayLike = {
    
     0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(arrayLike);

console.log(array); // ['a', 'b', 'c']

2. 反復可能なオブジェクトを操作します。

const iterable = 'hello';
const array = Array.from(iterable, char => char.toUpperCase());

console.log(array); // ['H', 'E', 'L', 'L', 'O']

3. アロー関数を使用してthis値を設定します。

const arrayLike = {
    
     0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(
  arrayLike,
  function (element) {
    
    
    // this 指向 object
    return element.toUpperCase() + this.postfix;
  },
  {
    
     postfix: '!' }
);

console.log(array); // ['A!', 'B!', 'C!']

以上がArray.from基本的な使い方です。特定のニーズに応じてmapFnとパラメータを調整してthisArg、変換された配列に対してさらに操作や処理を実行できます。

---

@時々漏れます