Kods gudrs! Esiet ātrāks, produktīvāks un laimīgāks JavaScript izstrādātājs, apgūstot šīs valodas svarīgākās un periodiskākās funkcijas.
Neatkarīgi no tā, vai tas ir aizmugursistēma vai priekšgals (vai pat kosmosa kuģi), JavaScript ir visur. Tā ir arī diezgan elastīga valoda (tas nozīmē, ka tai ir stingri funkcionāli programmēšanas modeļi, kā arī labas klases), un tās līdzība ar citām “C veida” valodām ļauj izstrādātājiem viegli pāriet no citām valodām.
Ja Tu gribi paaugstiniet savu JS spēli, iesaku jums uzzināt, praktizēt un galu galā apgūt tālāk norādītās pamatfunkcijas, kas ir pieejamas šajā valodā. Ne visi no tiem ir noteikti “nepieciešami” problēmu risināšanai, taču dažos gadījumos tie var padarīt jūsu vietā lielu slodzi, savukārt citos gadījumos tie var samazināt koda daudzumu, kas jums jāraksta.
karte ()
Būtu ķecerība rakstīt rakstu par svarīgām JavaScript funkcijām un nepieminēt karti ()! 😆😆 Kopā ar filtru () un samazināšanu (), karte () veido svēto trīsvienību. Šīs ir funkcijas, kuras savā karjerā izmantosit atkal un atkal, tāpēc tās ir vairāk nekā apskates vērtas. Risināsim tos pa vienam, sākot ar map().
map() ir viena no tām funkcijām, kas visvairāk sagādā problēmas cilvēkiem, kuri mācās JavaScript. Kāpēc? Ne tāpēc, ka tajā ir kaut kas pēc būtības sarežģīts, bet gan tāpēc, ka šīs funkcijas darbības veids ir ideja, kas iegūta no tā sauktās funkcionālās programmēšanas. Un tā kā mēs neesam pakļauti funkcionālajai programmēšanai — mūsu skolas un nozare ir pilna ar objektorientētām valodām — mūsu neobjektīvajām smadzenēm darbība šķiet dīvaina vai pat nepareiza.
JavaScript ir daudz funkcionālāks nekā objektorientēts, lai gan tā modernās versijas dara visu iespējamo, lai šo faktu slēptu. Bet tā ir vesela tārpu kārba, kuru es varu atvērt varbūt kādu citu dienu. 🤣 Labi, karte() . . .
map() ir ļoti vienkārša funkcija; tas pievienojas masīvam un palīdz mums pārvērst katru vienumu par kaut ko citu, kā rezultātā tiek izveidots jauns masīvs. Kā precīzi konvertēt vienumu, tiek nodrošināta vēl viena funkcija, kas pēc vienošanās ir anonīma.
Tas ir viss! Pie sintakses var būt jāpierod, bet būtībā tas ir tas, ko mēs darām funkcijā map(). Kāpēc mēs varētu vēlēties izmantot map()? Atkarīgs no tā, ko mēs cenšamies sasniegt. Piemēram, pieņemsim, ka mēs ierakstījām temperatūru katrai pagājušās nedēļas dienai un saglabājām to kā vienkāršu masīvu. Tomēr tagad mums saka, ka instrumenti nebija ļoti precīzi un ir ziņojuši par 1,5 grādiem zemāku temperatūru nekā vajadzēja.
Mēs varam veikt šo labojumu, izmantojot funkciju map() šādi:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23]; const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5); console.log(correctedWeeklyReadings); // gives [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]
Vēl viens, ļoti praktisks, piemērs nāk no React pasaules, kur DOM elementu sarakstu veidošana no masīviem ir izplatīts modelis; Tātad, kaut kas līdzīgs šim ir izplatīts:
export default ({ products }) => {
return products.map(product => {
return (
<div className="product" key={product.id}>
<div className="p-name">{product.name}</div>
<div className="p-desc">{product.description}</div>
</div>
);
});
};
Šeit mums ir funkcionāls React komponents, kas kā rekvizītus saņem produktu sarakstu. No šī saraksta (masīva) tas izveido HTML “divs” sarakstu, būtībā pārvēršot katru produkta objektu HTML. Oriģinālo produktu objekts paliek neskarts.
Jūs varat iebilst, ka map() nav nekas cits kā cilpa, un jums būs pilnīga taisnība. Taču ievērojiet, ka, tiklīdz jūs izsakāt šo argumentu, runā jūsu objektorientētais, apmācītais prāts, savukārt šīs funkcijas un to pamatojums nāk no funkcionālās programmēšanas, kur vienveidība, kompaktums un elegance ir ļoti cienīta. 🙂
filtrs ()
filtrs() ir ļoti noderīga funkcija, kuru varēsit lietot atkal un atkal daudzās situācijās. Kā norāda nosaukums, šī funkcija filtrē masīvu, pamatojoties uz jūsu sniegtajiem noteikumiem/loģiku, un atgriež jaunu masīvu, kurā ir vienumi, kas atbilst šiem noteikumiem.
Atkārtoti izmantosim mūsu laika apstākļu piemēru. Pieņemsim, ka mums ir masīvs, kas satur maksimālās temperatūras katrai pagājušās nedēļas dienai; tagad mēs vēlamies noskaidrot, cik dienas bija aukstākas. Jā, “vēsāks” ir subjektīvs jēdziens, tāpēc pieņemsim, ka mēs meklējam dienas, kurās temperatūra bija zemāka par 20. To var izdarīt, izmantojot filtru() šādi:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
console.log("Total colder days in week were: " + colderDays.length); // 1
Ņemiet vērā, ka anonīmajai funkcijai, ko nododam filtram (), ir jāatgriež Būla vērtība: true vai false. Tādā veidā filtrs() zinās, vai iekļaut šo vienumu filtrētajā masīvā. Šajā anonīmajā funkcijā varat rakstīt jebkādu sarežģītu loģiku; varat veikt API zvanus un lasīt lietotāja ievades un tā tālāk, ja vien pārliecināsities, ka beigās atgriežat Būla vērtību.
Uzmanieties: šī ir sānu piezīme, ko es jūtos spiesta sniegt, pamatojoties uz savu JavaScript izstrādātāja pieredzi. Neatkarīgi no tā, vai tas ir paviršības vai nepareizu pamatu dēļ, daudzi programmētāji savās programmās rada smalkas kļūdas, izmantojot filtru (). Pārrakstīsim iepriekšējo kodu, lai tajā būtu kļūda:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
if(colderDays) {
console.log("Yes, there were colder days last week");
} else {
console.log("No, there were no colder days");
}
Pamanāt kaut ko? Lielisks darbs, ja paveicāt! Ja nosacījums beigās pārbauda colderDays, kas patiesībā ir masīvs! Jūs būsiet pārsteigts, cik reižu cilvēki pieļauj šo kļūdu, cenšoties ievērot termiņus vai kodēt sliktā noskaņojumā (jebkura iemesla dēļ). Problēma ar šo nosacījumu ir tāda, ka JavaScript daudzējādā ziņā ir dīvaina un nekonsekventa valoda, un lietu “patiesība” ir viena no tām. Kamēr [] == True atgriež false, liekot domāt, ka iepriekš minētais kods nav bojāts, patiesībā ir tāds, ka nosacījuma if iekšpusē [] novērtē uz patiesību! Citiem vārdiem sakot, mūsu uzrakstītais kods nekad neteiks, ka pagājušajā nedēļā nebija aukstāku dienu.
Labojums ir ļoti vienkāršs, kā norādīts kodā pirms iepriekš minētā koda. Mēs pārbaudām colderDays.length, kas garantē mums veselu skaitli (nulle vai lielāku) un tādējādi konsekventi darbosies loģiskos salīdzinājumos. Ņemiet vērā, ka filtrs () vienmēr, vienmēr, vienmēr atgriezīs masīvu, tukšu vai netukšu, tāpēc mēs varam uz to paļauties un droši rakstīt savus loģiskos salīdzinājumus.
Tas ir bijis garāks apvedceļš, nekā biju plānojis, taču tādas kļūdas kā šī ir vērts izcelt desmit tūkstošos vārdu, izmantojot lielos burtus, ja nepieciešams. Es ceru, ka jūs tas neapgrūtinās un ietaupīsiet simtiem stundu atkļūdošanas pūļu! 🙂
samazināt ()
No visām šajā rakstā, kā arī standarta JavaScript bibliotēkā esošajām funkcijām, reduction() ir viena no pirmajām vietām, lai iegūtu „mulsinošu un dīvainu”. Lai gan šī funkcija ir ļoti svarīga un daudzās situācijās rada elegantu kodu, lielākā daļa JavaScript izstrādātāju to izvairās, un viņi dod priekšroku rakstīt detalizētāku kodu.
Iemesls ir tāds — un es būšu godīgs! — samazināt() ir grūti saprast gan koncepcijas, gan izpildes nozīmē. Lasot tās aprakstu, tu esi to pārlasījis vairākas reizes un tomēr šaubies, vai izlasīji nepareizi; un, redzot to darbībā un mēģinot iztēloties, kā tas darbojas, jūsu smadzenes sagriežas tūkstoš mezglos! 🤭
Tagad nebaidieties. Funkcija samazināt() ne tuvu nav sarežģīta un iebiedējusi, piemēram, B+ Koki un to algoritmi. Vienkārši šāda veida loģika ir reti sastopama vidusmēra programmētāja ikdienas darbā.
Tāpēc, aizbaidījis no jums dienasgaismas un uzreiz teicis, lai neuztraucieties, es beidzot vēlos jums parādīt, kas ir šī funkcija un kāpēc tieši tā mums varētu būt vajadzīga.
Kā norāda nosaukums, samazināt() tiek izmantots, lai kaut ko samazinātu. Lieta, ko tas samazina, ir masīvs, un lieta, uz kuru tas samazina doto masīvu, ir viena vērtība (skaitlis, virkne, funkcija, objekts, jebkas). Šeit ir vienkāršāks veids, kā to izteikt — reduction() pārveido masīvu vienā vērtībā. Ņemiet vērā, ka atgriešanas vērtība no redukcijas() nav masīvs, kā tas ir gadījumā ar map() un filter(). To saprast jau ir puse no panākumiem. 🙂
Tagad ir diezgan skaidrs, ka, ja mēs gatavojamies pārveidot (samazināt) masīvu, mums ir jānodrošina nepieciešamā loģika; un, pamatojoties uz jūsu JS izstrādātāja pieredzi, jūs, visticamāk, jau uzminējāt, ka mēs to darām, izmantojot funkciju. Šī funkcija ir tā, ko mēs saucam par reduktora funkciju, kas veido pirmo argumentu, lai samazinātu (). Otrais arguments ir sākuma vērtība, piemēram, skaitlis, virkne utt. (pēc kāda laika es paskaidrošu, kas, pie velna, ir šī “sākuma vērtība”).
Pamatojoties uz mūsu līdzšinējo izpratni, mēs varam teikt, ka izsaukums reducēt() izskatās šādi: array.reduce(reducerFunction, startValue). Tagad pievērsīsimies visas lietas būtībai: reduktora funkcijai. Kā jau noteikts, reduktora funkcija norāda, kā reduktors () pārveidot masīvu vienā vērtībā. Ir nepieciešami divi argumenti: mainīgais, kas darbojas kā akumulators (neuztraucieties, es paskaidrošu arī šo mazliet), un mainīgais, lai saglabātu pašreizējo vērtību.
Es zinu, es zinu . . . tas bija daudz terminoloģijas vienai funkcijai, kas JavaScript pat nav obligāta. 😝😝 Un tāpēc cilvēki bēg no samazināšanas(). Bet, ja jūs to apgūsit soli pa solim, jūs to ne tikai sapratīsit, bet arī novērtēsit, kļūstot par labāku izstrādātāju.
Labi, atgriežoties pie apskatāmās tēmas. “Sākuma vērtība”, kas tiek nodota samazināšanai () ir . . . labi, sākuma vērtība aprēķinam, kuru vēlaties izmantot. Piemēram, ja jūs gatavojaties veikt reizināšanu reduktora funkcijā, sākuma vērtībai 1 ir jēga; Papildus varat sākt ar 0 un tā tālāk.
Tagad apskatīsim reduktora funkcijas parakstu. Reduktora funkcijai, kas tiek nodota, lai samazinātu(), ir šāda forma: reduktora funkcija (akumulators, pašreizējā vērtība). “Akumulators” ir tikai izdomāts nosaukums mainīgajam, kas apkopo un glabā aprēķina rezultātu; tas ir tieši tāpat kā izmantot mainīgo, ko sauc par total, lai summētu visus masīva vienumus, izmantojot kaut ko līdzīgu kopā += arr[i]. Tieši šādi tiek lietota reduktora funkcija reducē(): akumulators sākotnēji tiek iestatīts uz jūsu norādīto sākuma vērtību, un pēc tam pa vienam tiek apmeklēti masīva elementi, tiek veikts aprēķins un rezultāts tiek saglabāts akumulators un tā tālāk. . .
Tātad, kāda ir šī “pašreizējā vērtība” reduktora funkcijā? Tā ir tā pati ideja, ko jūs domājat iedomāties, ja es lūgtu jums šķērsot masīvu: jūs ņemtu mainīgo, kas sākas ar indeksu nulli, un virzīt to uz priekšu soli pa solim. Kamēr jūs to darāt, ja es lūgtu jūs pēkšņi apstāties, jūs atrastos vienā no masīva elementiem, vai ne? Tas ir tas, ko mēs domājam ar pašreizējo vērtību: tā ir mainīgā vērtība, ko izmanto, lai attēlotu masīva vienumu, kas pašlaik tiek izskatīts (ja tas palīdz, padomājiet par cilpu pār masīvu).
Ņemot vērā visu iepriekš minēto, ir pienācis laiks redzēt vienkāršu piemēru un redzēt, kā viss šis žargons tiek apvienots faktiskā redukcijas() izsaukumā. Pieņemsim, ka mums ir masīvs, kurā ir pirmie n naturālie skaitļi (1, 2, 3 . . . n), un mēs esam ieinteresēti atrast n faktoriālu. Mēs zinām, ka, lai atrastu n! mums vienkārši jāreizina viss, kas mūs noved pie šīs ieviešanas:
const numbers = [1, 2, 3, 4, 5]; const factorial = numbers.reduce((acc, item) => acc * item, 1); console.log(factorial); // 120
Daudz kas notiek šajās trīs koda rindās, tāpēc izpakosim to pa vienam līdz šim notikušās (ļoti garās) diskusijas kontekstā. Kā redzams, skaitļi ir masīvs, kurā ir visi skaitļi, kurus vēlamies reizināt. Pēc tam apskatiet izsaukumu numbers.reduce(), kas saka, ka acc sākuma vērtībai ir jābūt 1 (jo tas neietekmē vai neiznīcina reizināšanu). Pēc tam pārbaudiet reduktora funkcijas pamattekstu `(acc, item) => acc * vienums, kas vienkārši saka, ka katras masīva iterācijas atgriešanas vērtībai ir jābūt vienumam, kas reizināts ar akumulatorā jau esošo. Iterācija un faktiskā reizināšanas skaidra glabāšana akumulatorā ir tas, kas notiek aizkulisēs, un tas ir viens no lielākajiem iemesliem, kāpēc reduction() ir šāds klupšanas akmens JavaScript izstrādātājiem.
Kāpēc izmantot samazināšanu ()?
Tas ir patiešām lielisks jautājums, un, godīgi sakot, man nav skaidras atbildes. Neatkarīgi no redukcijas() darbības var veikt, izmantojot cilpas, forEach() utt. Tomēr šīs metodes rada daudz vairāk koda, padarot to grūti lasāmu, it īpaši, ja jūs steidzaties. Tad ir bažas par nemainīgumu: izmantojot redukcijas() un līdzīgas funkcijas, varat būt drošs, ka jūsu sākotnējie dati nav bijuši mutēti; tas pats par sevi novērš visas kļūdu klases, īpaši izplatītajās lietojumprogrammās.
Visbeidzot, reduction() ir daudz elastīgāks tādā nozīmē, ka akumulators var būt objekts, masīvs vai pat funkcija, ja nepieciešams; tas pats attiecas uz sākuma vērtību un citām funkcijas izsaukšanas daļām — gandrīz jebkas var ienākt, un gandrīz jebkas var iznākt, tāpēc atkārtoti lietojama koda izstrāde ir ārkārtīgi elastīga.
Ja jūs joprojām neesat pārliecināts, arī tas ir pilnīgi pareizi; JavaScript kopiena pati par sevi ir krasi sadalīta par reducēšanas (kompaktumu), „elegance” un „jaudīgumu”, tāpēc tas ir labi, ja jūs to neizmantojat. 🙂 Bet noteikti apskatiet dažus glīti piemēri pirms izlemjat bin samazināt ().
daži ()
Pieņemsim, ka jums ir objektu masīvs, un katrs objekts attēlo personu. Jūs vēlaties zināt, vai masīvā ir cilvēki, kas ir vecāki par 35 gadiem. Ņemiet vērā, ka nav nepieciešams skaitīt šādu cilvēku skaitu, nemaz nerunājot par to saraksta izgūšanu. Tas, ko mēs šeit sakām, ir ekvivalents vārdam „viens vai vairāki” vai „vismaz viens”.
Kā tu to dari?
Jā, jūs varētu izveidot karoga mainīgo un cilpu pāri masīvam, lai atrisinātu šo problēmu šādi:
const persons = [
{
name: 'Person 1',
age: 32
},
{
name: 'Person 2',
age: 40
},
];
let foundOver35 = false;
for (let i = 0; i < persons.length; i ++) {
if(persons[i].age > 35) {
foundOver35 = true;
break;
}
}
if(foundOver35) {
console.log("Yup, there are a few people here!")
}
Problēma? Kods, manuprāt, ir pārāk C vai Java līdzīgs. “Daudzpusīgs” ir vēl viens vārds, kas nāk prātā. Pieredzējis JS varētu domāt par „neglīts”, „briesmīgs” utt. 😝 Un pareizi, es iebilstu. Viens no veidiem, kā uzlabot šo koda daļu, ir izmantot kaut ko līdzīgu mapei (), taču pat tad risinājums ir nedaudz neveikls.
Izrādās, ka mums ir diezgan glīta funkcija, ko sauc par some(), kas jau ir pieejama pamatvalodā. Šī funkcija darbojas ar masīviem un pieņem pielāgotu “filtrēšanas” funkciju, atgriežot Būla vērtību patiesa vai nepatiesa. Būtībā tas dara to, ko mēs esam mēģinājuši darīt pēdējās minūtēs, tikai ļoti lakoniski un eleganti. Lūk, kā mēs to varam izmantot:
const persons = [
{
name: 'Person 1',
age: 32
},
{
name: 'Person 2',
age: 40
},
];
if(persons.some(person => {
return person.age > 35
})) {
console.log("Found some people!")
}
Tāda pati ievade, tāds pats rezultāts kā iepriekš; bet ievērojiet masveida koda samazinājumu! Ņemiet vērā arī to, cik krasi tiek samazināts kognitīvais slogs, jo mums vairs nav jāparsē kods pēc rindiņas tā, it kā mēs paši būtu tulki! Kods tagad gandrīz skan kā dabiska valoda.
katrs()
Tāpat kā daži (), mums ir vēl viena noderīga funkcija, ko sauc par every(). Kā jau varat uzminēt, arī tas atgriež Būla vērtību atkarībā no tā, vai visi masīva vienumi iztur doto pārbaudi. Protams, pārbaude, kas jānokārto, lielāko daļu laika tiek nodrošināta kā anonīma funkcija. Es aiztaupīšu jūs no sāpēm par to, kā varētu izskatīties naiva koda versija, tāpēc katrs () tiek izmantots šādi:
const entries = [
{
id: 1
},
{
id: 2
},
{
id: 3
},
];
if(entries.every(entry => {
return Number.isInteger(entry.id) && entry.id > 0;
})) {
console.log("All the entries have a valid id")
}
Kā ir skaidrs, kods pārbauda visus masīva objektus, vai tiem nav derīga id rekvizīta. Vārda “derīgs” definīcija ir atkarīga no problēmas konteksta, taču, kā redzat, šim kodam es uzskatīju nenegatīvus veselus skaitļus. Atkal mēs redzam, cik vienkārši un eleganti ir lasāms kods, kas ir šīs (un līdzīgas) funkcijas(-u) vienīgais mērķis.
ietilpst()
Kā pārbaudīt apakšvirkņu un masīva elementu esamību? Ja esat tāds pats kā es, ātri sasniedzat indexOf() un pēc tam meklējat dokumentus, lai uzzinātu tā iespējamās atgriešanas vērtības. Tas rada ievērojamas neērtības, un atgriešanas vērtības ir grūti atcerēties (ātri — ko nozīmē process, kas operētājsistēmai atgriež 2?).
Bet ir jauka alternatīva, ko mēs varam izmantot: include(). Lietošana ir tikpat vienkārša kā nosaukums, un iegūtais kods ir ārkārtīgi sirdi sildošs. Ņemiet vērā, ka saskaņošanu veic ar include() ir reģistrjutīgs, taču es domāju, ka tas ir tas, ko mēs visi intuitīvi sagaidām. Un tagad laiks kādam kodam!
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, because first letter is in small caps
console.log(name.includes('Ank')); // true, as expected
Tomēr negaidiet pārāk daudz no šīs pazemīgās metodes:
const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" method
Tas nevar skatīties objektu iekšienē, jo tas vienkārši nav definēts objektiem. Bet hei, mēs zinām, ka tas darbojas uz masīviem, tāpēc varbūt mēs varam šeit piemānīties. . . 🤔.
const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});
Tātad, kas notiek, kad palaižat šo kodu? Tas nesprāgst, taču arī rezultāts ir neapmierinošs: viltus. 😫😫 Patiesībā tas ir saistīts ar objektiem, rādītājiem un to, kā JavaScript redz un pārvalda atmiņu, kas ir sava pasaule. Ja vēlaties ienirt dziļāk, nekautrējieties ienirt (varbūt sākt šeit), bet es apstāšos šeit.
Mēs varam likt iepriekš minētajam kodam darboties, ja mēs to pārrakstīsim šādi, taču šobrīd tas, manuprāt, vairāk vai mazāk kļūst par joku:
const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // true
Tomēr tas parāda, ka mēs varam veikt include() darbus objektos, tāpēc es domāju, ka tā nav pilnīga katastrofa. 😄
šķēle ()
Pieņemsim, ka mums ir virkne, un es lūdzu jums atgriezt tās daļu, kas sākas ar “r” un beidzas ar “z” (faktiskās rakstzīmes nav svarīgas). Kā jūs tam pieietu? Varbūt jūs izveidot jaunu virkni un izmantot to, lai saglabātu visas nepieciešamās rakstzīmes un atgrieztu tās. Vai arī, ja jūs esat kā vairums programmētāju, jūs man pretī dotu divus masīva indeksus: viens norāda apakšvirknes sākumu, otrs – beigas.
Abas šīs pieejas ir piemērotas, taču pastāv jēdziens, ko sauc par sagriešanu, kas piedāvā glītu risinājumu šādās situācijās. Par laimi, nav nevienas abstraktas teorijas, kam sekot; griešana nozīmē tieši to, kā tas izklausās — izveidojot mazāku virkni/masīvu no dotā, līdzīgi kā mēs veidojam augļu šķēles. Apskatīsim, ko es domāju, izmantojot vienkāršu piemēru:
const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // guest we've all been
Kad mēs slice (), mēs nodrošinām divus JavaScript indeksus — vienu, kurā vēlamies sākt sadalīšanu, un otru, kur vēlamies, lai tas tiktu pārtraukts. Šķēle() ir tāda, ka beigu indekss nav iekļauts gala rezultātā, tāpēc mēs redzam, ka iepriekšējā kodā jaunajā virsrakstā trūkst vārda “waiting”.
Tādi jēdzieni kā sagriešana ir pamanāmāki citās valodās, īpaši Python. Ja jautājat šiem izstrādātājiem, viņi teiks, ka nevar iedomāties dzīvi bez šīs funkcionalitātes, un tas ir pareizi, ja valoda nodrošina ļoti glītu sintaksi šķēlēšanai.
Šķēlēšana ir glīta un ļoti ērta, un nav iemesla to neizmantot. Tas nav arī sintakses cukurs, kas ir apgrūtināts ar veiktspējas sodu, jo tas rada seklas oriģinālā masīva/virknes kopijas. JavaScript izstrādātājiem es ļoti iesaku iepazīties ar slice() un pievienot to savam arsenālam!
savienojums ()
Metode splice() izklausās kā slice() brālēns, un dažos veidos mēs varam apgalvot, ka tā ir. Abi veido jaunus masīvus/virknes no sākotnējiem, ar vienu nelielu, bet svarīgu atšķirību — splice () noņem, maina vai pievieno elementus, bet maina sākotnējo masīvu. Šī sākotnējā masīva “iznīcināšana” var radīt milzīgas problēmas, ja neesat uzmanīgs vai nesaprotat dziļās kopijas un atsauces. Interesanti, kas liedza izstrādātājiem izmantot to pašu pieeju kā slice() un atstāt oriģinālo masīvu neskartu, taču es domāju, ka mēs varam būt piedodošāki pret valodu izveidots tikai desmit dienu laikā.
Neskatoties uz manām sūdzībām, apskatīsim, kā splice() darbojas. Es parādīšu piemēru, kurā mēs no masīva noņemam dažus elementus, jo tas ir visizplatītākais šīs metodes lietojums. Es arī atturēšos sniegt pievienošanas un ievietošanas piemērus, jo tos var viegli atrast un tie ir arī vienkārši.
const items = ['eggs', 'milk', 'cheese', 'bread', 'butter']; items.splice(2, 1); console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]
Iepriekš minētais izsaukums splice() saka: sāciet ar masīva 2. indeksu (t.i., trešo vietu) un noņemiet vienu vienumu. Dotajā masīvā „siers” ir trešais vienums, tāpēc tas tiek noņemts no masīva un vienumu masīvs tiek saīsināts, kā paredzēts. Starp citu, noņemtie vienumi tiek atgriezti, izmantojot splice() formā vai masīvā, tāpēc, ja mēs būtu gribējuši, mēs būtu varējuši tvert “sieru” mainīgajā.
Pēc manas pieredzes, indexOf() un splice() ir lieliska sinerģija — mēs atrodam vienuma indeksu un pēc tam noņemam to no dotā masīva. Tomēr ņemiet vērā, ka tā ne vienmēr ir visefektīvākā metode, un bieži vien objektu (jaucējkartes ekvivalentu) taustiņu izmantošana ir daudz ātrāka.
maiņa ()
shift() ir sava veida ērtības metode, un to izmanto, lai noņemtu pirmo masīva elementu. Ņemiet vērā, ka to pašu var izdarīt ar splice(), taču shift() ir nedaudz vieglāk iegaumējams un intuitīvs, kad viss, kas jums jādara, ir nogriezt pirmo elementu.
const items = ['eggs', 'milk', 'cheese', 'bread', 'butter']; items.shift() console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]
unshift()
Tāpat kā Shift() noņem pirmo elementu no masīva, unshift() pievieno jaunu elementu masīva sākumam. Tā lietošana ir tikpat vienkārša un kompakta:
const items = ['eggs', 'milk'];
items.unshift('bread')
console.log(items); // [ 'bread', 'eggs', 'milk' ]
Tomēr es nevaru atturēties un brīdināt spēles jaunpienācējus: atšķirībā no populārajām push() un pop() metodēm shift() un unshift() ir ārkārtīgi neefektīvas (pamatalgoritmu darbības veida dēļ). Tātad, ja strādājat ar lieliem masīviem (piemēram, 2000+ vienumiem), pārāk daudz šo funkciju izsaukumu var apturēt jūsu lietojumprogrammu.
aizpildīt ()
Dažreiz jums ir jāmaina vairāki vienumi uz vienu vērtību vai pat, tā sakot, “atiestatīt” visu masīvu. Šādās situācijās fill() pasargā jūs no cilpām un vienreizējām kļūdām. To var izmantot, lai aizstātu daļu vai visu masīvu ar norādīto vērtību. Apskatīsim pāris piemērus:
const heights = [1, 2, 4, 5, 6, 7, 1, 1]; heights.fill(0); console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0] const heights2 = [1, 2, 4, 5, 6, 7, 1, 1]; heights2.fill(0, 4); console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]
Citas funkcijas, kuras ir vērts pieminēt
Lai gan iepriekš minētais saraksts ir tas, ar ko lielākā daļa JavaScript izstrādātāju saskaras un to izmanto savā karjerā, tas nekādā gadījumā nav pilnīgs. JavaScript ir tik daudz mazāk svarīgu, bet noderīgu funkciju (metožu), ka tās visas nebūs iespējams aptvert vienā rakstā. Tomēr daži, kas nāk prātā, ir šādi:
- reverse()
- kārtot ()
- ieraksti ()
- aizpildīt ()
- atrast ()
- plakans()
Es aicinu jūs tos vismaz apskatīt, lai jums būtu priekšstats, ka šādas ērtības pastāv.
Secinājums
JavaScript ir liela valoda, neskatoties uz nelielo apgūstamo pamatjēdzienu skaitu. Daudzās mums pieejamās funkcijas (metodes) veido lielāko daļu šī lielā izmēra. Tomēr, tā kā JavaScript ir sekundāra valoda lielākajai daļai izstrādātāju, mēs neiedziļināmies pietiekami dziļi, palaižot garām daudzas skaistas un noderīgas funkcijas, ko tas piedāvā. Patiesībā tas pats attiecas uz funkcionālās programmēšanas koncepcijām, bet tas ir citas dienas tēma! 😅
Kad vien iespējams, veltiet kādu laiku pamatvalodas (un, ja iespējams, slavenu utilītu bibliotēkas, piemēram, Lodash). Pat dažas minūtes, kas pavadītas, veicot šīs pūles, radīs milzīgu produktivitātes pieaugumu un daudz tīrāku un kompaktāku kodu.