„JavaScript“ objektų masyvo pamoka - kaip sukurti, atnaujinti ir apžvelgti objektus naudojant JS masyvo metodus

Vidutiniškai aš dirbu su JSON duomenimis 18 kartų per savaitę. Ir vis tiek man reikia kiekvieną kartą google ieškoti konkrečių būdų, kaip jais manipuliuoti. O jei būtų galutinis vadovas, kuris visada galėtų suteikti jums atsakymą?

Šiame straipsnyje aš jums parodysiu pagrindus, kaip dirbti su „JavaScript“ objektų masyvais.

Jei kada nors dirbote su JSON struktūra, dirbote su „JavaScript“ objektais. Gana tiesiogine prasme. JSON reiškia „JavaScript Object Notation“.

Objekto sukūrimas yra toks paprastas:

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

Šis objektas reiškia automobilį. Automobilių gali būti įvairių tipų ir spalvų, tada kiekvienas objektas reprezentuoja konkretų automobilį.

Dabar dažniausiai tokius duomenis gaunate iš išorinės tarnybos. Tačiau kartais objektus ir jų masyvus reikia kurti rankiniu būdu. Kaip ir kurdamas šią elektroninę parduotuvę:

Atsižvelgiant į kiekvieną kategorijų sąrašo elementą HTML atrodo taip:

Nenorėjau, kad šis kodas būtų pakartotas 12 kartų, dėl to jis būtų nepatvirtinamas.

Objektų masyvo kūrimas

Bet grįžkime prie automobilių. Pažvelkime į šį automobilių rinkinį:

Mes galime tai pateikti kaip masyvą tokiu būdu:

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 }, { ... }, ... ] 

Objektų masyvai visą laiką nesikeičia. Mes beveik visada turime jais manipuliuoti. Taigi pažvelkime, kaip mes galime pridėti objektus prie jau esamo masyvo.

Pradžioje pridėkite naują objektą - Array.unshift

Norėdami pridėti objektą pirmoje vietoje, naudokite Array.unshift.

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

Pabaigoje pridėkite naują objektą - Array.push

Norėdami pridėti objektą paskutinėje pozicijoje, naudokite Array.push.

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

Viduryje pridėkite naują objektą - Array.splice

Norėdami pridėti objektą viduryje, naudokite Array.splice. Ši funkcija yra labai patogu, nes ji taip pat gali pašalinti daiktus. Saugokitės jo parametrų:

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

Taigi, jei norėtume penktoje vietoje pridėti raudoną „Volkswagen Cabrio“, naudotume:

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

Lankytis per daugybę objektų

Leiskite man užduoti jums klausimą čia: Kodėl norite pereiti per daugybę objektų? Prašau to, kad kilpavimas beveik niekada nėra pagrindinė to, ko norime pasiekti, priežastis.

„JavaScript“ teikia daug funkcijų, kurios gali išspręsti jūsų problemą, faktiškai neįgyvendinant logikos bendrame cikle. Pažiūrėkime.

Raskite objektą masyve pagal jo reikšmes - Array.find

Let's say we want to find a car that is red. We can use the function Array.find.

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

This function returns the first matching element:

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

It's also possible to search for multiple values:

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

In that case we'll get the last car in the list.

Get multiple items from an array that match a condition - Array.filter

The Array.find function returns only one object. If we want to get all red cars, we need to use 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 //  } // ] 

Transform objects of an array - Array.map

This is something we need very often. Transform an array of objects into an array of different objects. That's a job for Array.map. Let's say we want to classify our cars into three groups based on their size.

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

It's also possible to create a new object if we need more values:

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' }, // ... // ] 

Add a property to every object of an array - 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.

Jei turite naudojimo atvejį, kuriam reikia pažangesnių funkcijų, peržiūrėkite šį išsamų masyvų vadovą arba apsilankykite W3 mokyklų informaciniame puslapyje.

Arba susisiekite su manimi ir aš paruošiu kitą straipsnį :-)