JavaScriptのオブジェクト配列チュートリアル– JS配列メソッドを使用してオブジェクトを作成、更新、ループする方法

私は平均して週に18回JSONデータを処理しています。そして、私はまだほとんど毎回それらを操作するための特定の方法をグーグルで検索する必要があります。常にあなたに答えを与えることができる究極のガイドがあったとしたらどうでしょうか?

この記事では、JavaScriptでオブジェクト配列を操作するための基本を紹介します。

JSON構造を使用したことがある場合は、JavaScriptオブジェクトを使用したことがあります。まさしく文字通り。JSONはJavaScriptObjectNotationの略です。

オブジェクトの作成は次のように簡単です。

{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } 

このオブジェクトは車を表します。車にはさまざまな種類と色があり、各オブジェクトは特定の車を表します。

現在、ほとんどの場合、このようなデータは外部サービスから取得します。ただし、オブジェクトとその配列を手動で作成する必要がある場合もあります。このeショップを作成したときと同じように:

各カテゴリリストアイテムがHTMLで次のようになっていることを考慮してください。

このコードを12回繰り返したくなかったので、保守できなくなりました。

オブジェクトの配列を作成する

しかし、車に戻りましょう。この車のセットを見てみましょう:

このように配列として表すことができます。

let cars = [ { "color": "purple", "type": "minivan", "registration": new Date('2017-01-03'), "capacity": 7 }, { "color": "red", "type": "station wagon", "registration": new Date('2018-03-03'), "capacity": 5 }, { ... }, ... ] 

オブジェクトの配列は常に同じであるとは限りません。ほとんどの場合、それらを操作する必要があります。それでは、既存の配列にオブジェクトを追加する方法を見てみましょう。

最初に新しいオブジェクトを追加します-Array.unshift

最初の位置にオブジェクトを追加するには、を使用しますArray.unshift

let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 

最後に新しいオブジェクトを追加します-Array.push

最後の位置にオブジェクトを追加するには、を使用しますArray.push

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.push(car); 

中央に新しいオブジェクトを追加します-Array.splice

途中でオブジェクトを追加するには、を使用しますArray.splice。この機能はアイテムを削除することもできるので非常に便利です。そのパラメータに注意してください:

Array.splice( {index where to start}, {how many items to remove}, {items to add} ); 

したがって、5番目の位置に赤いフォルクスワーゲンカブリオを追加する場合は、次を使用します。

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.splice(4, 0, car); 

オブジェクトの配列をループする

ここで質問させてください。なぜオブジェクトの配列をループしたいのですか?私が尋ねている理由は、ループが私たちが達成したいことの主な原因になることはほとんどないからです。

JavaScriptは、一般的なサイクルで実際にロジックを実装しなくても問題を解決できる多くの関数を提供します。見てみましょう。

配列内のオブジェクトをその値で検索します-Array.find

赤い車を見つけたいとしましょう。関数を使用できますArray.find

let car = cars.find(car => car.color === "red"); 

この関数は、最初に一致する要素を返します。

console.log(car); // output: // { //   color: 'red', //   type: 'station wagon', //   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //   capacity: 5 // } 

複数の値を検索することもできます。

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

その場合、リストの最後の車を取得します。

条件に一致する配列から複数のアイテムを取得します-Array.filter

このArray.find関数は1つのオブジェクトのみを返します。すべての赤い車を入手したい場合は、を使用する必要がありますArray.filter

let redCars = cars.filter(car => car.color === "red"); console.log(redCars); // output: // [ // { //    color: 'red', //    type: 'station wagon', //    registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 5 //  }, // { //    color: 'red', //    type: 'cabrio', //    registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 2 //  } // ] 

配列のオブジェクトを変換します-Array.map

これは私たちが頻繁に必要とするものです。オブジェクトの配列を異なるオブジェクトの配列に変換します。それはの仕事ですArray.map。車のサイズに基づいて3つのグループに分類したいとします。

let sizes = cars.map(car => { if (car.capacity <= 3){ return "small"; } if (car.capacity <= 5){ return "medium"; } return "large"; }); console.log(sizes); // output: // ['large','medium','medium', ..., 'small'] 

さらに値が必要な場合は、新しいオブジェクトを作成することもできます。

let carsProperties = cars.map(car => { let properties = { "capacity": car.capacity, "size": "large" };  if (car.capacity <= 5){    properties['size'] = "medium";  }  if (car.capacity <= 3){    properties['size'] = "small";  } return properties; }); console.log(carsProperties); // output: // [ //   { capacity: 7, size: 'large' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 2, size: 'small' }, // ... // ] 

配列のすべてのオブジェクトにプロパティを追加します-Array.forEach

But what if we want the car object too? In that case we can enhance the object for a new property size. This is a good use-case for the Array.forEach function.

cars.forEach(car => { car['size'] = "large";  if (car.capacity <= 5){    car['size'] = "medium";  }  if (car.capacity <= 3){    car['size'] = "small";  } }); 

Sort an array by a property - Array.sort

When we're done with transforming the objects, we usually need to sort them one way or another.

Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.

Let's say we want to sort the cars based on their capacity in descending order.

let sortedCars = cars.sort((c1, c2) => (c1.capacity  c2.capacity) ? -1 : 0); console.log(sortedCars); // output: // [ // { // color: 'purple', // type: 'minivan', // registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)', // capacity: 7 // }, // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // }, // ... // ] 

The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false 

You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.

Summary

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference.

Or get in touch with me and I will prepare another article :-)