JavaScriptで配列をループする

2010年06月10日に質問されました。  ·  閲覧回数 3.9M回  ·  ソース

Mark Szymanski picture
2010年06月10日

Javaでは、次のようにforループを使用して配列内のオブジェクトをトラバースできます。

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

JavaScriptでも同じことができますか?

回答

Christian C. Salvadó picture
2010年06月10日
4183

いくつかのオプションがあります。

1.シーケンシャルforループ:

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    console.log(myStringArray[i]);
    //Do something
}

長所

  • すべての環境で動作します
  • breakおよびcontinueフロー制御ステートメントを使用できます

短所

2. Array.prototype.forEach

ES5仕様では、多くの有益な配列メソッドが導入されました。 それらの1つであるArray.prototype.forEachは、配列を反復処理するための簡潔な方法を提供しました。

const array = ["one", "two", "three"]
array.forEach(function (item, index) {
  console.log(item, index);
});

ES5仕様がリリースされてから約10年(2009年12月)で、デスクトップ、サーバー、およびモバイル環境のほぼすべての最新エンジンに実装されているため、安全に使用できます。

また、ES6矢印関数の構文を使用すると、さらに簡潔になります。

array.forEach(item => console.log(item));

古代のプラットフォーム( Internet Explorer 11など)をサポートする予定がない限り、矢印関数も広く実装されています。 あなたも安全に行くことができます。

長所

  • 非常に短く簡潔です。
  • 宣言型

短所

  • break / continueは使用できません

通常、配列要素を反復する前にフィルタリングすることで、命令ループからbreakの必要性を置き換えることができます。次に例を示します。

array.filter(item => item.condition < 10)
     .forEach(item => console.log(item))

配列反復処理してを構築する場合は、 mapを使用する必要があることに注意してください。 私はこのアンチパターンを何度も見ました。

アンチパターン:

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

numbers.forEach((n, i) => { doubled[i] = n * 2 });

マップの適切な使用例:

const numbers = [1,2,3,4,5];
const doubled = numbers.map(n => n * 2);

console.log(doubled);

また、配列を値に縮小しようとしている場合、たとえば、数値の配列を合計したい場合は、 reduceメソッドを使用する必要があります。

アンチパターン:

const numbers = [1,2,3,4,5];
const sum = 0;
numbers.forEach(num => { sum += num });

reduceの適切な使用:

const numbers = [1,2,3,4,5];
const sum = numbers.reduce((total, n) => total + n, 0);

console.log(sum);

3. ES6 for-ofステートメント

ES6標準では、反復可能なオブジェクトの概念が導入され、データをトラバースするための新しい構成であるfor...ofステートメントが定義されています。

このステートメントは、あらゆる種類の反復可能なオブジェクトとジェネレーター( \[Symbol.iterator\]プロパティを持つすべてのオブジェクト)に対して機能します。

配列オブジェクトは、定義上、ES6に組み込まれている反復可能オブジェクトであるため、次のステートメントを使用できます。

let colors = ['red', 'green', 'blue'];
for (const color of colors){
    console.log(color);
}

長所

  • 多種多様なオブジェクトを反復処理できます。
  • 通常のフロー制御ステートメントを使用できます( break / continue )。
  • シリアル非同期値を反復するのに便利です。

短所

for...inは使用しないでください

@zipcodemanは、 for...inステートメントの使用を提案していますが、配列を反復する場合はfor-inを避ける必要があり、そのステートメントはオブジェクトのプロパティを列挙することを目的としています。

次の理由から、配列のようなオブジェクトには使用しないでください。

  • 反復の順序は保証されていません。 配列インデックスに番号順にアクセスすることはできません。
  • 継承されたプロパティも列挙されます。

2番目のポイントは、多くの問題が発生する可能性があることです。たとえば、 Array.prototypeオブジェクトを拡張してそこにメソッドを含めると、そのプロパティも列挙されます。

例えば:

Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
    console.log(array[i]);
}

上記のコードは、ログ「a」、「b」、「c」、および「foo!」をコンソールします。

これは、ネイティブプロトタイプの拡張に大きく依存するライブラリ( MooToolsなど)を使用する場合に特に問題になる可能性があります。

前に述べたように、 for-inステートメントは、オブジェクトのプロパティを列挙するためにあります。次に例を示します。

var obj = {
    "a": 1,
    "b": 2,
    "c": 3
};

for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
        console.log("prop: " + prop + " value: " + obj[prop])
    }
}

上記の例では、 hasOwnPropertyメソッドを使用すると、独自のプロパティのみを列挙できます。 それだけです。オブジェクトが物理的に持っているプロパティのみで、継承されたプロパティはありません。

次の記事を読むことをお勧めします。

Mark Reed picture
2012年04月16日
1126

はい、実装にfor ... of機能がECMAScript 2015 ( "Harmony"リリース)で導入されたと仮定します...これは最近ではかなり安全な仮定です。

それはこのように動作します:

// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
  // ... do something with s ...
}

さらに良いことに、ECMAScript 2015はブロックスコープの変数も提供するため、次のようになります。

// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
  // ... do something with s ...
}
// s is no longer defined here

(変数sは反復ごとに異なりますが、ループ本体で変更されない限り、ループ本体内でconstとして宣言できます。)

スパース配列に関する注意:JavaScriptの配列は、実際にはlength報告されるほど多くのアイテムを格納しない場合があります。 その報告された数は、値が格納されている最高のインデックスよりも1つ大きいだけです。 配列がその長さで示されるよりも少ない要素を保持している場合、その配列はまばらであると言われます。 たとえば、インデックス3、12、および247にのみアイテムを含む配列を持つことは完全に正当です。 このような配列のlengthは248として報告されますが、実際には3つの値しか格納されていません。 他のインデックスのアイテムにアクセスしようとすると、配列にはundefined値があるように見えます。 したがって、配列を「ループスルー」する場合は、答える質問があります。長さで示される範囲全体をループして、欠落している要素に対してundefinedを処理するのか、それとものみ処理するのか。実際に存在する要素を処理したいですか? 両方のアプローチには多くのアプリケーションがあります。 アレイを何に使用しているかによって異なります。

for .. of配列を反復処理すると、ループの本体はlength回実行され、ループ制御変数はundefined設定されます。配列に実際に存在しないアイテムの場合は

もちろん、一部の開発者はとにかく別のアプローチを使用するしかありません。理由は何であれ、まだfor ... ofサポートしていないバージョンのJavaScriptをターゲットにしているからです。

JavaScriptの実装が以前のエディションのECMAScript仕様(たとえば、9より前のバージョンのInternet Explorerを除外)に準拠している限り、ループの代わりにArray#forEachイテレーターメソッドを使用できます。 その場合、配列内の各アイテムで呼び出される関数を渡します。

var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) { 
     // ... do something with s ...
} );

for ... ofとは異なり、 .forEachは、配列に実際に存在する要素の関数のみを呼び出します。 3つの要素と248の長さを持つ仮想配列を渡した場合、関数は248回ではなく、3回だけ呼び出されます。 また、欠落している要素と実際にundefinedに設定されている要素を区別します。 後者の場合でも、引数としてundefinedを渡して、関数を呼び出します。 これがスパース配列を処理する方法である場合、インタプリタがfor ... ofサポートしている場合でも、 .forEachが最適な方法である可能性があります。

JavaScriptのすべてのバージョンで機能する最後のオプションは、明示的なカウントループです。 0から長さより1小さいものまで数え、カウンターをインデックスとして使用するだけです。 基本的なループは次のようになります。

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  s = myStringArray[i];
  // ... do something with s ...
}

このアプローチの利点の1つは、スパース配列の処理方法を選択できることです。 上記のコードは、ループの本体をlength回完全に実行し、 forと同様に、欠落している要素に対してsundefinedに設定します。 of 。 代わりに、 .forEachように、スパース配列の実際に存在する要素のみを処理する場合は、インデックスに単純なinテストを追加できます。

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  if (i in myStringArray) {
    s = myStringArray[i];
    // ... do something with s ...
  }
}

(ループ条件に完全なmyStringArray.length式を含めるのではなく)ローカル変数に長さの値を割り当てると、毎回プロパティルックアップがスキップされるため、パフォーマンスに大きな違いが生じる可能性があります。 私のマシンでRhinoを使用すると、スピードアップは43%になります。

次のように、ループ初期化句で長さのキャッシュが実行されていることがわかります。

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

明示的なカウントループは、必要に応じて、各値のインデックスにアクセスできることも意味します。 インデックスは、 forEachに渡す関数に追加のパラメーターとして渡されるため、次の方法でもアクセスできます。

myStringArray.forEach( function(s, i) {
   // ... do something with s and i ...
});

for ... ofは、各オブジェクトに関連付けられたインデックスを提供しませんが、反復しているオブジェクトが実際にArrayfor限り、 ofは、このメソッドを持たない可能性のある他の反復可能な型で機能します)、 Array#entriesメソッドを使用して、[index、item]ペアの配列に変更してから反復できます。その上:

for (const [i, s] of myStringArray.entries()) {
  // ... do something with s and i ...
}

他の人が言及しているfor ... in構文は、オブジェクトのプロパティをループするためのものです。 JavaScriptの配列は、数値のプロパティ名(および自動的に更新されるlengthプロパティ)を持つ単なるオブジェクトであるため、理論的にはそれを使用して配列をループできます。 ただし、問題は、それ自体が数値プロパティ値に制限されないことです(メソッドでさえ、実際には値がクロージャであるプロパティであることに注意してください)。また、数値順に反復することも保証されていません。 したがって、 for ... in構文は、配列のループには使用しないでください。

hasen picture
2010年06月10日
447

mapを使用できます。これは、 PythonHaskellなどの他の言語でも利用できる関数型プログラミング手法です。

[1,2,3,4].map( function(item) {
     alert(item);
})

一般的な構文は次のとおりです。

array.map(func)

一般に、 funcは、配列の項目である1つのパラメーターを取ります。 ただし、JavaScriptの場合、アイテムのインデックスである2番目のパラメーターと、配列自体である3番目のパラメーターを受け取ることができます。

array.mapの戻り値は別の配列なので、次のように使用できます。

var x = [1,2,3,4].map( function(item) {return item * 10;});

そして今、xは[10,20,30,40]です。

関数をインラインで記述する必要はありません。 それは別の機能である可能性があります。

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

これは、次のようなものに相当します。

 for (item in my_list) {item_processor(item);}

new_list取得しない場合を除きます。

Marlon Bernardes picture
2013年08月11日
131

for(myStringArrayのconst s){

(あなたの質問に直接答える:今あなたはできる!)

他のほとんどの答えは正しいですが、 ECMAScript 6 2015が反復を行うための新しいメカニズムであるfor..ofループをもたらしていることについては(この記事の執筆時点では)言及されていません。

この新しい構文は、JavaScriptで配列を反復する最も洗練された方法です(反復インデックスが必要ない場合)。

現在、Firefox 13以降、Chrome 37以降で動作し、他のブラウザではネイティブに動作しません(以下のブラウザの互換性を参照)。 幸いなことに、今日、次世代の機能を使用できるJavaScriptコンパイラ( Babelなど)があります。

Node.jsでも動作します(バージョン0.12.0でテストしました)。

配列の反復

// You could also use "let" or "const" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) {
   console.log(letter);
}

オブジェクトの配列を反復する

const band = [
  {firstName : 'John', lastName: 'Lennon'},
  {firstName : 'Paul', lastName: 'McCartney'}
];

for(const member of band){
  console.log(member.firstName + ' ' + member.lastName);
}

ジェネレーターの反復:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...ofから抽出された例)

function* fibonacci() { // A generator function
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (const n of fibonacci()) {
  console.log(n);
  // Truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

互換性テーブル: http //kangax.github.io/es5-compat-table/es6/#For..ofループ

仕様: http //wiki.ecmascript.org/doku.php?id = harmony: iterators

}

sebarmeli picture
2010年12月07日
123

JavaScriptでは、for-inループを使用して配列をループすることはお勧めできませんが、次のようなforループを使用することをお勧めします。

for(var i=0, len=myArray.length; i < len; i++){}

同様に最適化されます(配列の長さを「キャッシュ」します)。 詳細については、この件に関する私の投稿をご覧

kennebec picture
2010年06月10日
92

Opera、Safari、Firefox、Chromeはすべて、多くの一般的なループを最適化するための一連の拡張された配列メソッドを共有しています。

すべてが必要なわけではありませんが、非常に便利な場合もあれば、すべてのブラウザがサポートしている場合もあります。

Mozilla Labsは、自分で追加できるように、彼らとWebKitの両方が使用するアルゴリズムを公開しました。

filterは、いくつかの条件を満たす項目の配列を返します。

すべての配列メンバーがテストに合格した場合、

テストに合格した場合、trueを返すものもあります。

forEachは、各配列メンバーで関数を実行し、何も返しません。

mapはforEachに似ていますが、各要素の操作の結果の配列を返します。

これらのメソッドはすべて、最初の引数に対して関数を取り、オプションの2番目の引数を持ちます。これは、関数をループするときに配列メンバーにスコープを課すオブジェクトです。

必要になるまで無視してください。

indexOfおよびlastIndexOfは、引数に完全に一致する最初または最後の要素の適切な位置を見つけます。

(function(){
    var p, ap= Array.prototype, p2={
        filter: function(fun, scope){
            var L= this.length, A= [], i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        val= this[i];
                        if(fun.call(scope, val, i, this)){
                            A[A.length]= val;
                        }
                    }
                    ++i;
                }
            }
            return A;
        },
        every: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && !fun.call(scope, this[i], i, this))
                        return false;
                    ++i;
                }
                return true;
            }
            return null;
        },
        forEach: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
            }
            return this;
        },
        indexOf: function(what, i){
            i= i || 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what)
                    return i;
                ++i;
            }
            return -1;
        },
        lastIndexOf: function(what, i){
            var L= this.length;
            i= i || L-1;
            if(isNaN(i) || i>= L)
                i= L-1;
            else
                if(i< 0) i += L;
            while(i> -1){
                if(this[i]=== what)
                    return i;
                --i;
            }
            return -1;
        },
        map: function(fun, scope){
            var L= this.length, A= Array(this.length), i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        A[i]= fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
                return A;
            }
        },
        some: function(fun, scope){
            var i= 0, L= this.length;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && fun.call(scope, this[i], i, this))
                        return true;
                    ++i;
                }
                return false;
            }
        }
    }
    for(p in p2){
        if(!ap[p])
            ap[p]= p2[p];
    }
    return true;
})();
John Slegers picture
2016年03月01日
78

前書き

大学時代から、Java、JavaScript、Pascal、 ABAP 、PHP、 Progress 4GL 、C / C ++、そしておそらく今は考えられない他のいくつかの言語でプログラミングしてきました。

それらはすべて独自の言語的特異性を持っていますが、これらの言語のそれぞれは同じ基本概念の多くを共有しています。 このような概念には、プロシージャ/関数、 IFステートメント、 FORループ、およびWHILEループが含まれます。


従来のforループ

従来のforループには、次の3つのコンポーネントがあります。

  1. 初期化:ルックブロックが最初に実行される前に実行されます
  2. 条件:ループブロックが実行される前に毎回条件をチェックし、falseの場合はループを終了します
  3. 後付け:ループブロックが実行された後、毎回実行されます

これらの3つのコンポーネントは、 ;記号で区切られています。 これら3つのコンポーネントのそれぞれのコンテンツはオプションです。つまり、以下は可能な限り最小のforループです。

for (;;) {
    // Do stuff
}

もちろん、実行を停止するには、そのforループ内のどこかにif(condition === true) { break; }またはif(condition === true) { return; }を含める必要があります。

ただし、通常、初期化はインデックスを宣言するために使用され、条件はそのインデックスを最小値または最大値と比較するために使用され、後付けはインデックスをインクリメントするために使用されます。

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

従来のforループを使用して配列をループする

配列をループする従来の方法は次のとおりです。

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

または、逆方向にループする場合は、次のようにします。

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

ただし、たとえば次のように、さまざまなバリエーションが可能です。

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

...またはこれ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

...またはこれ:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

どちらが最も効果的かは、主に個人的な好みと実装する特定のユースケースの両方の問題です。

これらのバリエーションはそれぞれ、非常に古いブラウザを含むすべてのブラウザでサポートされていることに注意してください。


whileループ

forループの代替案の1つは、 whileループです。 配列をループするには、次のようにします。

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

従来のforループと同様に、 whileループは、最も古いブラウザでもサポートされています。

また、すべてのwhileループはforループとして書き直すことができることに注意してください。 たとえば、上記のwhileループは、次のforループとまったく同じように動作します。

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

For...inおよびfor...of

JavaScriptでは、次のこともできます。

for (i in myArray) {
    console.log(myArray[i]);
}

ただし、これはすべての場合に従来のforループと同じように動作するわけではなく、考慮する必要のある潜在的な副作用があるため、注意して使用する必要があります。 配列の反復に「for ... in」を使用するのはなぜ悪い考えですか?を参照してください

for...in代わりに、 for...ofます。 次の例は、 for...ofループとfor...inループの違いを示しています。

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

さらに、Internet Explorerのどのバージョンもfor...ofサポートしておらず( Edge 12+はサポートしています)、 for...inは少なくともInternet Explorer10が必要であることを考慮する必要があります。


Array.prototype.forEach()

for -loopsの代わりに、次の構文を使用するArray.prototype.forEach()があります。

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});

Array.prototype.forEach()は、すべての最新のブラウザー、およびInternet Explorer9以降でサポートされています。


ライブラリ

最後に、多くのユーティリティライブラリにも独自のforeachバリエーションがあります。 AFAIK、最も人気のある3つは次のとおりです。

jQuery.each()jQueryで

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each()Underscore.js内

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach()Lodashで

_.forEach(myArray, function(value, key) {
    console.log(value);
});
Timo Huovinen picture
2012年01月05日
69

whileループを使用し

var i = 0, item, items = ['one', 'two', 'three'];
while(item = items[i++]){
    console.log(item);
}

ログに記録されます:「1」、「2」、および「3」

逆の順序の場合、さらに効率的なループ:

var items = ['one', 'two', 'three'], i = items.length;
while(i--){
    console.log(items[i]);
}

ログに記録されます:「3」、「2」、および「1」

または、従来のforループ:

var items = ['one', 'two', 'three']
for(var i=0, l = items.length; i < l; i++){
    console.log(items[i]);
}

ログに記録されます:「1」、「2」、「3」

参照: Googleクロージャー:JavaScriptを書かない方法

Phrogz picture
2012年06月05日
40

あなたは高速ループを記述するためにあなたが逆に繰り返すことができ簡潔な方法をしたい場合:

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

これは、長さをキャッシュする利点ている(と同様for (var i=0, len=myArray.length; i<len; ++i)とは異なりfor (var i=0; i<myArray.length; ++i) )であるより少ない文字を入力しています。

反復中にDOMからアイテムを削除する予定のライブNodeListを反復処理する場合など、逆に反復する必要がある場合もあります。

Yuci picture
2018年02月23日
38

JavaScriptの関数型プログラミングの方法で配列をループするいくつかのユースケース:

1.配列をループするだけ

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

注:Array.prototype.forEach()は、厳密に言えば機能的な方法ではありません。入力パラメーターとして受け取る関数は値を返すことを想定していないため、純粋関数とは見なされません。

2.配列内の要素のいずれかがテストに合格するかどうかを確認します

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3.新しい配列に変換します

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

注:map()メソッドは、呼び出し元の配列内のすべての要素で指定された関数を呼び出した結果を使用して、新しい配列を作成します。

4.特定のプロパティを合計し、その平均を計算します

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5.元の配列に基づいて、変更せずに新しい配列を作成します

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6.各カテゴリの数を数えます

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7.特定の基準に基づいてアレイのサブセットを取得します

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

注:filter()メソッドは、提供された関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。

8.配列を並べ替えます

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

enter image description here

9.配列内の要素を検索します

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

enter image description here

Array.prototype.find()メソッドは、提供されたテスト関数を満たす配列の最初の要素の値を返します。

参考文献