Löydä tie .Map ()

Ratkaisun sanallisuutta ja tyylikkyyttä ohjaavat työkalut, joiden avulla voimme ratkaista tietyn ongelman. Vaikka tavoite ongelmanratkaisu on ratkaista ongelma , se on menetelmien olisi siirryttävä elegantein mahdollisella tavalla. Matka kohti tällaista ratkaisua näyttää kuitenkin olevan asymptoottisella käyrällä. Täydellisyys tulee lähemmäksi ja lähemmäksi, mutta pysyy ikuisesti ulottumattomissa.

Ongelma

Kuvittele, että sinulla on matriisi ja sinun on muutettava taulukon kutakin elementtiä. Ehkä esimerkiksi ottamalla joukko korkeuksia tuumina ja tarvetta muuntaa ne senttimetreiksi. Tai mahdollisesti muuntaa joukko lämpötiloja celsiusasteina Fahrenheitiksi. Jos olet uusi ohjelmoinnissa, mielesi saattaa välittömästi siirtyä johonkin muotoon. Ja arvaa mitä? Olen varma, että saisit sen toimimaan.

Kuitenkin olen täällä antaa sinulle yhden työkalun - jotain saada sinut hieman lähemmäksi tyylikäs: Array.prototype.map().

mapMenetelmä antaa meille mahdollisuuden muuntaa kunkin elementin array, vaikuttamatta alkuperäisen jono. Sitä pidetään korkeamman asteen funktiona ja funktionaalisena ohjelmointitekniikkana, koska se käyttää funktiota argumenttina ja suoritamme laskennan mutatoimatta sovelluksemme tilaa.

Mapon ominaisuus, joka peritään taulukon prototyypistä. Prototyypit tarjoavat sisäänrakennettuja menetelmiä, joihin esineillä tulee (matriisit ovat erityyppisiä esineitä JavaScriptin silmissä). Vaikka maptämä prototyyppi saattaa olla hieman ulkomaisempi, se ei ole erilainen kuin esimerkiksi Array.lengthprototyyppi. Nämä ovat yksinkertaisesti menetelmiä, jotka leivotaan JavaScriptiksi. Taulukon prototyypit voidaan lisätä ja mutatoida seuraavasti: Array.prototype.= ...

Tämän oppitunnin loppuun mennessä löydämme miten se maptoimii ja kirjoitamme oman matriisiprototyyppimme.

Joten mitä .map () tekee?

Oletetaan, että sinulla on joukko lämpötiloja celsiusasteina, jotka haluat muuntaa Fahrenheitiksi.

On olemassa useita tapoja ratkaista tämä ongelma. Yksi tapa voi olla kirjoittaa forsilmukka luomaan taulukko Fahrenheit-lämpötiloja annetuista Celsius-lämpötiloista.

Kun forsilmukka voisimme kirjoittaa:

const celciusTemps = [22, 36, 71, 54]; const getFahrenheitTemps = (function(temp) { const fahrenheitTemps = []; for (let i = 0; i < celciusTemps.length; i += 1) { temp = celciusTemps[i] * (9/5) + 32 fahrenheitTemps.push(temp); } console.log(fahrenheitTemps); [71.6, 96.8, 159.8, 129.2 })();

Pari huomattavaa:

  1. Se toimii.
  2. Käytämme välitöntä kutsuttua funktiolauseketta (IIFE) välttääksemme myös tarvetta kutsua toimintoa.
  3. Se on vähän sanallinen ja ei kovin tyylikäs.

Map antaa meille mahdollisuuden viedä yllä oleva koodi ja korjata se seuraavaan:

const fahrenheitTemps = celciusTemps.map(e => e * (9/5) + 32); console.log(fahrenheitTemps); // [71.6, 96.8, 159.8, 129.2]

Joten miten kartta toimii?

Mapottaa funktion ja soveltaa sitä funktioon jokaisessa matriisin elementissä. Voisimme kirjoittaa maphieman tarkemman ES5: n kanssa nähdäksemme tämän hieman selkeämmin.

const fahrenheitTemps = celciusTemps .map(function(elementOfArray) { return elementOfArray * (9/5) + 32; }); console.log(fahrenheitTemps); // [71.6, 96.8, 159.8, 129.2]

Jos karttatoiminto voisi sanoa, mitä se tekee, se sanoisi:

"Kerroin matriisin jokaiselle elementille se (9/5), lisätään sitten 32. Kun tämä on tehty, palautan tuloksen elementtinä uudessa taulukossa nimeltä fahrenheitTemps."

Katsotaanpa yleisempää käyttötapausta. Oletetaan, että meillä on joukko peopleesineitä. Jokaisella objektilla on nameja ageavain-arvo-pari. Haluamme luoda muuttujan, joka on vain taulukon kaikkien nimien nimi. Meidän forloop menetelmällä voimme kirjoittaa:

const people = [ {name: Steve, age: 32}, {name: Mary, age: 28}, {name: Bill, age: 41}, ]; const getNames = (function(person) { const names = []; for (let i = 0; i < people.length; i += 1) { name = people[i].name; names.push(name); } console.log(names); // [Steve, Mary, Bill]; })();

Kanssa map:

const names = people.map(e => e.name); console.log(names) // [Steve, Mary, Bill];

Huomaa, ettemme muuta mitään, vaan palautamme vain avain-arvo-parin name.

Jälleen forsilmukat toimivat. Mutta se on monipuolinen, ja meidän on luotava uusi mukautettu toiminto aina, kun haluamme tehdä toisen muunnoksen. Pääosa ohjelmoinnista on DRY-koodin kirjoittaminen (Älä toista itseäsi). Nämä korkeamman asteen toiminnot, kuten kartta, antavat meille mahdollisuuden tehdä monimutkaisempi ohjelmointi vähemmän koodiriveillä kuin voisimme ilman niitä.

Pyörän keksiminen uudelleen:

Jotta voisimme ymmärtää paremmin, mitä hupun alla tapahtuu, teemme oman karttatoimintomme, jonka liitämme matriisin prototyyppiin.

Ensinnäkin, liittämään prototyyppimenetelmä ryhmään, kirjoitamme:

Array.prototype.

joten meille:

Array.prototype.myMap =

Mutta mikä koodi on?

Meillä on jo tarvittava logiikka foryllä olevista silmukoista. Ainoa mitä meidän on tehtävä, on refraktoida se hieman. Refraktoidaan viimeinen kirjoittamamme toiminto getNames().

Muista, että tämä toiminto otti henkilön (toisin sanoen elementin joukostamme), teki mukautetun muunnoksen kyseiseksi elementiksi ( forsilmukan ja jonkin logiikan kanssa) ja palautti nimiryhmän (tai uuden taulukon).

const getNames = (function(person) { const names = []; for (let i = 0; i < people.length; i += 1) { name = people[i].name; names.push(name); } console.log(names); // [Steve, Mary, Bill]; })();

Vaihdetaan ensin toiminnomme nimi. Loppujen lopuksi tämä uusi menetelmä ei oleta tietävän millaista taulukkoa se toimii:

const myMap = (function(person) { //Changed name const names = []; for (let i = 0; i < people.length; i += 1) { name = people[i].name; names.push(name); } console.log(names); // [Steve, Mary, Bill]; })();

Toiseksi olemme luomassa oman version .map(). Tiedämme, että tähän tarvitaan käyttäjän tarjoama toiminto. Vaihdetaan parametrimme, jonka toimintomme käyttää:

// It is a bit verbose, but a very clear parameter name const myMap = (function(userProvidedFunction) { const names = []; for (let i = 0; i < people.length; i += 1) { name = people[i].name; names.push(name); } console.log(names); // [Steve, Mary, Bill]; })();

Lopuksi meillä ei ole aavistustakaan, minkä ryhmän kanssa tämä menetelmä toimii. Joten, emme voi viitata people.length, mutta emme voi viitata this.length. this, palauttaa taulukon, johon menetelmä vaikuttaa. Puhdistetaan myös joitain muita muuttujien nimiä:

const myMap = (function(userProvidedFunction) { // change variable name const newArr = []; // use "this.length" for (let i = 0; i < this.length; i += 1) { // use "this[i]", and change variable name const newElement = this[i]; // update the array we push into newArr.push(newElement); } // Return the newly created array return newArr; })();

Olemme melkein perillä, mutta unohdamme yhden asian. Emme ole muuttaneet taulukkoa! Kaikki mitä olemme tehneet yllä on palauttaa vanha taulukko. Meidän on sovellettava käyttäjän tarjoamaa toimintoa matriisin jokaiseen elementtiin:

const myMap = (function(userProvidedFunction) { const newArr = []; for (let i = 0; i < this.length; i += 1) { /* Transform the element by passing it into the * user-provided function */ const newElement = userProvidedFunction(this[i]); newArr.push(newElement); } return newArr; })();

Lopuksi voimme liittää uuden toiminnon Array.prototype.

Array.prototype.myMap = myMap;

Viimeinen terveystarkastus:

const myArray = [1, 2, 3]; // Multiply each element x 2 const myMappedArray = myArray.myMap(e => e * 2) console.log(myMappedArray) // [2, 4, 6];

Yhteenveto

Mapon matriisien tarjoama prototyyppimenetelmä. Kulissien takana se toistaa taulukon läpi ja soveltaa käyttäjän tarjoamaa toimintoa kullekin elementille. Viime kädessä se palauttaa uuden taulukon muunnettujen arvojen kanssa. Se tekee tämän muuttamatta alkuperäistä taulukkoa. Koska tarvittava parametri on funktio, sitä pidetään korkeamman asteen funktiona. Lisäksi sen käyttö kuuluu toiminnalliseen ohjelmointiparadigmaan.

Kiitos lukemisesta!

woz