Java masyvas. 6 dalis JavaScript kurso nuo pradedančiųjų iki pažengusiųjų per 10 tinklaraščio įrašų

Šis yra 6 dalis JavaScript tinklaraščio įrašų serijoje, kuri nuves jus nuo pradedančiojo iki pažengusiojo. Šios serijos pabaigoje jūs žinosite visus pagrindus, kuriuos reikia žinoti, kad pradėtumėte programuoti JavaScript. Be jokių papildomų kalbų, pradėkime šeštąjį mokymą.

Java masyvas – turinys:

1. Masyvai – pagrindinė informacija
2. Elementų pridėjimas prie java masyvo
3. Elementų šalinimas iš masyvo
4. Ilgio nustatymas masyvuose
5. Masyvų rūšiavimas
6. Elementų apvertimas masyvuose
7. Kiekvienam
8. Įtraukimai į masyvus

Šis mokymas numato, kad turite nustatytą programavimo aplinką. Jei sekėte ankstesnius mokymus, turėtumėte ją jau atidarytą. Jei dėl kokių nors priežasčių uždarėte savo nustatymus, visą nustatymo instrukciją galite rasti 4 dalyje šioje serijoje. Toje pamokoje mes apžvelgiame, kaip nustatyti savo Google Chrome Snippets aplinką programavimui.

Jei jaučiatės šiek tiek patogiai naudodami Google Chrome, čia yra greitas būdas pasiruošti šiam mokymui, kitaip galite peržiūrėti 4 dalį su visomis žingsnis po žingsnio instrukcijomis, kaip nustatyti savo programavimo aplinką.

Jei esate „Mac“ kompiuteryje, klaviatūros kombinacija, norint atidaryti konsolę, yra „Option + Command + J“, kai atidarote Chrome. Jei naudojate „Windows“ įrenginį, galite naudoti klaviatūros kombinaciją „Control + Shift + J“, kad atidarytumėte JavaScript konsolę, kai atidarote Chrome. Taip pat galite eiti į meniu viršuje ir pasirinkti Peržiūra -> Kūrėjas -> JavaScript konsolė. Kai atidarysite konsolę, galite spustelėti „Sources“ skirtuką, kuris yra šalia „Console“. Dabar turėtumėte matyti Snippets. Galite arba tęsti kodavimą snippete, kurį jau pradėjote naudoti anksčiau, arba sukurti naują Snippet, spustelėdami mygtuką „+ New snippet“. Kol turite programavimo aplinką šiam mokymui, kur galite praktikuotis, esate pasiruošę.

Java masyvas – pagrindinė informacija

Masyvai yra plačiai naudojami daugelyje programavimo kalbų, o JavaScript nėra išimtis. Ir tam yra geros priežastys. Bet galbūt klausiate, kas yra masyvas? Masyvai iš esmės yra susijusių duomenų rinkinys, kurį galima pasiekti ir manipuliuoti naudojant tam tikras apibrėžtas metodikas. Pažvelkime į keletą pavyzdžių, kad geriau suprastume masyvą.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["dogs", "cats", "birds", "fishes"];

Galime naudoti java masyvą, kad saugotume kelias skirtingas duomenų rūšis. Pavyzdžiui, aukščiau pateiktame kode mes saugojome keletą skaičių, boolean’ų, taip pat string tipo duomenis.

Galime sukurti java masyvą taip pat, kaip kuriame kitas kintamąsias, naudojant const arba let raktinius žodžius kairėje pusėje ir masyvo turinį dešinėje pusėje. Vienas dalykas, į kurį turėtumėte atkreipti dėmesį, yra tai, kad kuriant masyvus naudojame kvadratinius skliaustus, kad apibrėžtume elementus, kaip tai padarėme aukščiau pateiktame kode. Taip pat atskiriame kiekvieną elementą kableliu, nepriklausomai nuo jų duomenų tipo.

Šiame mokyme mes rašysime kodą taip, kad galėtumėte kopijuoti ir įklijuoti viską šiame mokyme, nuosekliai, arba viską įrašyti į JavaScript snippet Chrome, ir jis veiks kaip tikėtasi, jei laikysitės tvarkos. Pavyzdžiui, tai, ką tai reiškia jums, yra tai, kad jei mes apibrėžiame kintamąjį su const raktiniu žodžiu vieną kartą mokyme, paprastai negalite dar kartą apibrėžti kito kintamojo su tuo pačiu pavadinimu. Todėl, jei ketinate dalinai kopijuoti ir įklijuoti kai kuriuos kodus, gerai būtų įsitikinti, kad tuos kintamuosius taip pat apibrėžiate savo kode. Tai neturėtų būti problema, jei sekate mokymą tvarka, kaip jis pateikiamas.

Vienas iš pirmųjų dalykų, kuriuos turėtumėte žinoti apie java masyvą, yra tai, kad, kai sukuriate masyvą, turite pasiekti jo elementus. Masyvai turi tai, kas vadinama „numeruotais indeksais“, o tai, ką tai reiškia jums praktikoje, yra tai, kad kiekvienam elementui, kurį sukuriate JavaScript, yra skaičius, kuris yra susijęs su juo iš kairės į dešinę, nuo nulio iki java masyvo ilgio minus vienas.

Pavyzdžiui, aukščiau pateiktame kode dėl gyvūnų, galime pasiekti pirmąjį elementą „dogs“, parašydami kintamojo pavadinimą, atidarydami kvadratinius skliaustus, įrašydami norimo pasiekti elemento indeksą ir uždarydami kvadratinius skliaustus:

alert(pets[0]);

Panašiai, įvedus didesnius skaičius, bus parodyti kiti elementai įspėjimo lange, kurį mes rodome.

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

Kadangi turėjome 4 elementus gyvūnų masyve, ir pradėjome indeksus nuo 0, paskutinis elementas masyve pasiekiamas su pets[3], kuris yra 1 mažiau nei bendras masyvo ilgis. Šiuo metu galbūt klausiate, dabar, kai galime sukurti masyvą ir pasiekti elementą iš to masyvo, kaip dėl masyvo modifikavimo? Kaip dėl naujų elementų pridėjimo, esamų elementų keitimo ar elementų šalinimo? Na, pradėkime žingsnis po žingsnio ir pradėkime nuo naujų elementų pridėjimo prie masyvo.

Elementų pridėjimas prie java masyvo

Yra keletas būdų, kaip galime pridėti skirtingus elementus prie masyvo. Jei žinome, kad norime pridėti naują elementą prie masyvo galo, galime naudoti „push“ metodą. Tai taip pat vadinama naujo elemento įdėjimu į masyvą. Atkreipkite dėmesį, kad pridėtas elementas pateks į masyvo galą. Pavyzdžiui:

pets.push("snakes");
// patikrinkime, ar turime gyvačių kaip paskutinį elementą
// parodydami masyvo turinį
alert(pets);

Jei žinome, kad konkrečiai norime pridėti elementą prie java masyvo kaip pirmą elementą, galime naudoti raktinį žodį „unshift“. Pažvelkime į tai su pavyzdžiu:

// šio kodo vykdymas perkelia visas reikšmes
// į vieną pusę ir pridės pirmą augintinį drakoną
pets.unshift(“dragons”); 
// patikrinkime tai parodydami masyvo turinį
alert(pets);

Puiku, kad galime pridėti elementus prie masyvo galo arba prie masyvo pradžios, bet kas, jei dėl kokių nors priežasčių noriu įdėti elementus į masyvą į konkrečias pozicijas. Tarkime, noriu pridėti vėžlius trečioje pozicijoje. Ar tai net įmanoma? Taip, tai įmanoma. Norint įdėti elementą į masyvą, galime jį apibrėžti taip, kaip kuriame tą masyvo dalį ir priskiriame reikšmę konkrečiai masyvo daliai. Taip pat nepamirškite naudoti indeksų reikšmių, kai įterpiate reikšmes. Iš praktinės pusės tai atrodo taip:

pets[2] = "turtles";
// patikrinkime, ar turime vėžlius kaip trečią elementą
// parodydami masyvo turinį
alert(pets);

Elementų šalinimas iš masyvo

Šiuo metu galbūt klausiate, kaip dėl elementų šalinimo iš masyvo? Na, tam taip pat yra keletas būdų. Tikriausiai garsiausias būdas yra naudoti „pop“ metodą. Tai, tam tikra prasme, pašalins paskutinį elementą iš masyvo. // tai pašalins paskutinį elementą masyve pets.pop(); // patikrinkime rezultatus parodydami masyvo turinį alert(pets);

Kaip matote, naudojant pop metodą, mes pašalinome paskutinį augintinį gyvatę iš mūsų augintinių masyvo.

Dar vienas būdas, kaip galite pašalinti elementus iš java masyvo, yra naudoti „shift“ raktinį žodį. Kai naudojame shift, pirmasis elementas bus ištrintas, o likusios indeksų reikšmės prisitaikys prie jų. Pavyzdžiui:

// tai ištrins pirmą elementą
// ir perkelia kitus elementus į jų naujas indeksų reikšmes
// kurios bus viena mažiau nei ankstesnės indeksų reikšmės
pets.shift();
// taip pat patikrinkime tai parodydami masyvą
alert(pets);

Pavadinimas „shift“ iš tikrųjų kilęs iš to, kaip veikia atminties paskirstymas kompiuterio atmintyje. Taigi, jei tai iš pradžių atrodo gana neintuityvu, tai visiškai normalu. Kol kas turėtumėte žinoti, kad naudodami shift metodą galime pašalinti pirmą elementą iš masyvo.

Ilgio nustatymas masyvuose

Dirbdami su masyvais realiame gyvenime gali būti daug atvejų, kai norime suskaičiuoti masyvo elementų skaičių. Tai gali būti reikalinga įvairiose vietose, įskaitant užduočių sąrašus, dalyvių sąrašus mokykloje ar darbe ir pan. Tam pasiekti turime įmontuotą masyvo savybę, vadinamą „length“, ir ji pasakys mums bendrą masyvo ilgį. Pavyzdžiui:

alert(pets.length);

Masyvų rūšiavimas

Masyvų rūšiavimas yra gana įprasta operacija JavaScript. Yra skirtingi konkretūs įgyvendinimai, kaip rūšiuoti elementus JavaScript. Šie konkretūs įgyvendinimai paprastai vadinami rūšiavimo algoritmais. Skirtingi rūšiavimo algoritmai gali turėti skirtingų privalumų ir trūkumų. Pavyzdžiui, rūšiavimo algoritmas gali būti pasirinktas vietoj kito, nes jį paprasčiausiai lengviau įgyvendinti kode, palyginti su kitu, nors jie gali rodyti šiek tiek geresnį našumą. Galbūt girdėjote apie skirtingus rūšiavimo algoritmus, optimizuotus našumui. Šiame mokyme mes naudosime JavaScript teikiamą įmontuotą rūšiavimo metodą. Rūšiavimas yra gana įprasta problema, ypač žiniatinklio kūrime. Pavyzdžiui, jei kuriate elektroninės prekybos svetainę, turite įgyvendinti skirtingas rūšiavimo situacijas, iš kurių vartotojas galėtų pasirinkti. Nors nėra griežtų taisyklių, kokias parinktis ir galimybes turėtumėte suteikti savo auditorijai, yra gana įprastų standartų, kurie tikimasi iš jūsų kaip svetainės kūrėjo. Pavyzdžiui, kaip vartotojas, yra didelė tikimybė, kad norėsite išvardyti kai kuriuos parduotuvės elementus tiek didėjančia, tiek mažėjančia kaina. Įgyvendindami rūšiavimą šiems uždaviniams turėtumėte atsižvelgti, kaip tai įgyvendinti, atsižvelgiant į tai, kad vartotojas taip pat gali apriboti paieškos rezultatus tam tikroms kitoms kategorijoms, tokioms kaip marškiniai, skrybėlės, krepšiai ir pan. Galime rūšiuoti masyvą, pridėdami „.sort()“ jo pabaigoje.

pets.sort();
alert(pets);

Elementų apvertimas masyvuose

Elementų apvertimas masyve greičiausiai yra labiau paplitęs derinant su rūšiavimu. Šiuo atveju, kadangi mes taip pat vykdome šiuos kodus iš viršaus į apačią, mes taip pat taikome apvertimą po masyvo rūšiavimo. Galime apversti masyvą, pridėdami „.reverse()“ jo pabaigoje. pets.reverse(); alert(pets);

Kadangi mes surūšiavome masyvą ankstesniame žingsnyje, galite matyti, kad dabar turime masyvą, kuris yra tiek surūšiuotas, tiek apverstas.

Kiekvienam

Dirbdami su masyvais, JavaScript suteikia mums patogų būdą peržvelgti masyvo elementus naudojant „.forEach()“. Jei tikrai norime, vis tiek galime naudoti įprastą for ciklą, kad peržvelgtume masyvą. Iš tikrųjų pirmiausia pažvelkime, kaip sukurti for ciklą, kad peržvelgtume masyvą, tada pamatysime, kaip naudoti forEach().

// tai įspės mus 4 kartus pamaitinti mūsų augintinį
for (let a = 0; a < pets.length; a++) {
    alert("Laikas pamaitinti mano augintinį");
}

Taip pat galime pasiekti tą patį rezultatą naudodami forEach.

pets.forEach(alert("Laikas pamaitinti mano augintinį"));

Palyginę naudojant for ciklus arba forEach, priklausomai nuo jūsų pageidavimų ir konkrečios situacijos, galite pasirinkti vieną iš jų. Iš esmės jie abu pasiekia tuos pačius rezultatus su skirtingais kodų stiliais. ForEach gali būti palyginti lengviau ir sutaupyti jums vieną kodo eilutę, tačiau galutinis pasirinkimas priklauso jums. Jums nereikia šiuo metu priimti tokio pasirinkimo ir laikytis jo. Rašydami kodą galite eksperimentuoti su to paties uždavinio sprendimu, naudodami skirtingus požiūrius, kai judate savo programavimo kelionėje.

Įtraukimai į masyvus

Taip pat galime patikrinti, ar elementas egzistuoja java masyve. Vienas pavyzdys, kaip šį metodą naudoti realiame gyvenime, būtų tai, ar privatūs renginiai apima asmens vardą kvietimų sąraše. Tikrasis įgyvendinimas taip pat yra gana paprastas. Pirmiausia parašome masyvo pavadinimą, šiuo atveju dirbame su gyvūnų masyvu. Tada įdedame tašką, kad pasiektume skirtingas masyvo savybes ir metodus, tada parašome „includes“, tada atidarome ir uždarome skliaustus, ir įrašome elemento pavadinimą, kurį norime patikrinti. Štai pavyzdys, kuris patikrina elementą, kurį žinome, kad egzistuoja masyve:

alert(pets.includes("dogs"));

Jei taip pat bandysime tą patį su elementu, kurio žinome, kad nėra java masyve, tikimės gauti false kaip atsakymą. Pažvelkime į tą atvejį su pavyzdžiu:

alert(pets.includes("puppy")); [/code>

Kadangi neturėjome šuniuko gyvūnų masyve, gauname false, kaip tikėjomės. Kitame mokyme pamatysime dar vieną svarbų konceptą tiek programavimo pasaulyje, tiek JavaScript.