Home-theater-designers
Visų lygių žiniatinklio kūrėjai, pradedant naujokų programuotojais ir baigiant kodavimo ekspertais, supranta „JavaScript“ svarbą kuriant šiuolaikines svetaines. „JavaScript“ yra tokia dominuojanti, kad būtina žinoti, ar ketinate kurti žiniatinklio programas.
Vienas iš galingiausių „JavaScript“ kalbos elementų yra masyvai. Masyvai dažniausiai randami daugelyje programavimo kalbų ir yra naudingi duomenims saugoti.
„JavaScript“ taip pat apima naudingas funkcijas, žinomas kaip masyvo metodai. Štai penkiolika, kuriuos turėtumėte atidžiai pažvelgti, kad padidintumėte savo, kaip kūrėjo, įgūdžius.
Kas yra masyvo metodai?
Masyvo metodai yra „JavaScript“ integruotos funkcijos, kurias galite pritaikyti savo masyvams. Kiekvienas metodas turi unikalią funkciją, kuri atlieka jūsų masyvo pakeitimą ar skaičiavimą, taip išvengiant poreikio koduoti įprastas funkcijas nuo nulio.
„JavaScript“ masyvo metodai vykdomi naudojant taškų žymėjimą, pridėtą prie jūsų masyvo kintamojo. Kadangi tai tik „JavaScript“ funkcijos, jos visada baigiasi skliausteliuose, kuriuose gali būti pasirenkami argumentai. Štai metodas, prijungtas prie paprasto masyvo, vadinamo myArray .
let myArray = [1,2,3]; myArray.pop();Šis kodas taikytų metodą, vadinamą pop į masyvą.
Masyvo pavyzdys
Kiekviename pavyzdyje naudokite pavyzdinį masyvą, kurį mes vadinsime myArray , atlikti metodus. Nesivaržykite ištraukti konsolės ir koduoti kartu.
let myArray = [2,4,5,7,9,12,14];Šie pavyzdžiai darys prielaidą, kad žinote pagrindą kas yra „JavaScript“ ir kaip jis veikia . Jei ne, viskas gerai, mes visi esame čia, norėdami mokytis ir augti.
Pasinerkite į šiuos penkiolika galingų masyvo metodų!
1. „Array.push“ ()
Ką tai daro: stumti () paima jūsų masyvą ir prideda vieną ar kelis elementus prie masyvo pabaigos, tada grąžina naują masyvo ilgį. Šis metodas pakeis esamą masyvą.
Pridėkite skaičių 20 prie masyvo paleisdami stumti () , kaip argumentą naudodamas 20.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Patikrinkite, ar pavyko:
console.log(myArray); [2,4,5,7,9,12,14,20]Vykdant stumti () metodas „myArray“ pridėjo argumente nurodytą vertę į masyvą. Šiuo atveju, 20. Kai tikrinate myArray konsolėje, pamatysite, kad vertė dabar pridedama prie masyvo pabaigos.
2. „Array.concat“ ()
Ką tai daro: sujungti () gali sujungti du ar daugiau masyvų į naują masyvą. Jis nekeičia esamų masyvų, bet sukuria naują.
Paimkite myArray ir sujunkite masyvą, vadinamą newArray tuo susidomėjęs.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Šis metodas daro stebuklus dirbant su keliais masyvais ar reikšmėmis, kurias reikia sujungti, naudojant vieną gana paprastą veiksmą naudojant kintamuosius.
3. „Array.join“ ()
Ką tai daro: prisijungti () paima masyvą ir sujungia masyvo turinį, atskirtą kableliu. Rezultatas dedamas į eilutę. Jei norite naudoti kablelio alternatyvą, galite nurodyti skyriklį.
Pažiūrėkite, kaip tai veikia naudojant „myArray“. Pirmiausia naudokite numatytąjį metodą be atskyrimo argumento, kuris naudos kablelį.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'„JavaScript“ išves eilutę, o kiekviena masyvo reikšmė atskiriama kableliu. Norėdami pakeisti skyriklį, galite naudoti funkcijos argumentą. Stebėkite tai dviem argumentais: viena erdvė ir eilutė.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'Pirmasis pavyzdys yra tarpas, leidžiantis lengvai perskaityti eilutę.
Antrasis pavyzdys naudojamas („ir“) , ir čia reikia žinoti du dalykus.
Pirma, mes naudojame žodį „ir“, kad atskirtume reikšmes. Antra, abiejose žodžio „ir“ pusėse yra tarpas. Tai svarbu nepamiršti naudojant prisijungti () . „JavaScript“ argumentai skaitomi pažodžiui; taigi, jei ši erdvė bus palikta, viskas bus sugriauta (pvz., „2 ir 4 ir 5 ...“ ir tt) Nelabai skaitomas išėjimas!
4. „Array.forEach“ ()
Ką tai daro: kiekvienam() (didžiosios ir mažosios raidės!) atlieka funkciją kiekvienam jūsų masyvo elementui. Ši funkcija yra bet kuri jūsų sukurta funkcija, panaši į ciklą „už“, skirtą funkcijai taikyti masyve, tačiau daug mažiau darbo su kodu.
Yra dar šiek tiek kiekvienam() ; pažvelkite į sintaksę, tada atlikite paprastą demonstravimo funkciją.
myArray.forEach(function(item){
//code
});
Mes naudojame myArray , kiekvienam() taikomas su tašku. Funkciją, kurią norite naudoti, įdedate į argumentų skliaustus funkcija (elementas) pavyzdyje.
Pažiūrėk į funkcija (elementas) . Tai funkcija, vykdoma forEach () viduje, ir ji turi savo argumentą. Mes vadiname ginčą elementas . Apie šį argumentą reikia žinoti du dalykus:
- Kai forEach () kilpos virš jūsų masyvo, jis taiko kodą šiam argumentui. Pagalvokite apie tai kaip apie laikiną kintamąjį, kuriame yra dabartinis elementas.
- Jūs pasirenkate argumento pavadinimą, jį galima pavadinti viskuo, ką norite. Paprastai tai būtų pavadinta lengviau suprantamu pavadinimu, pvz., „Elementas“ arba „elementas“.
Turėdami omenyje šiuos du dalykus, peržiūrėkite šį paprastą pavyzdį. Prie kiekvienos vertės pridėkite 15, o konsolė parodys rezultatą.
myArray.forEach(function(item){
console.log(item + 15);
});
Mes naudojame elementas šiame pavyzdyje kaip kintamasis, todėl funkcija parašyta pridėti 15 prie kiekvienos vertės per elementas . Tada konsolė spausdina rezultatus. Štai kaip tai atrodo „Google Chrome“ konsolėje.
Rezultatas yra kiekvienas masyvo skaičius, bet pridėjus 15!
5. „Array.map“ ()
Ką tai daro: žemėlapis () atlieka funkciją kiekvienam jūsų masyvo elementui ir pateikia rezultatą naujame masyve.
Funkcijos vykdymas kiekviename elemente skamba kaip forEach (). Skirtumas čia yra žemėlapis () paleidžiant sukuriamas naujas masyvas. forEach () nesukuria naujo masyvo automatiškai, tam turėsite koduoti tam tikrą funkciją.
Naudokite žemėlapį (), kad padvigubintumėte kiekvieno „myArray“ elemento vertę ir įdėtumėte juos į naują masyvą. Pamatysite tą patį funkcija (elementas) šiek tiek daugiau praktikos sintaksė.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Patikrinkite rezultatus konsolėje.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray yra nepakitęs:
console.log(myArray); [2,4,5,7,9,12,14]6. „Array.unshift“ ()
Ką tai daro: Panašiai kaip veikia „push“ () metodas, nesikeičia () metodas paima jūsų masyvą ir prideda vieną ar daugiau elementų prie masyvo pradžios, o ne pabaigos, ir grąžina naują masyvo ilgį. Šis metodas pakeis esamą masyvą.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);Registruodami masyvą į konsolę, masyvo pradžioje turėtumėte pamatyti skaičių 0.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort ()
Ką tai daro: Rūšiavimas yra viena iš dažniausiai naudojamų masyvo operacijų ir yra labai naudinga. „JavaScript“ rūšiuoti () masyvo metodas gali būti naudojamas rūšiuoti skaičių ar net eilučių masyvą tik viena kodo eilute. Ši operacija yra vietoje ir grąžina surūšiuotą masyvą, pakeisdama pradinį masyvą. Paimkite kitą skaičių rinkinį myArray šį kartą.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Kadangi rūšiavimas atliekamas vietoje, jums nereikia deklaruoti atskiro rūšiuoto masyvo kintamojo.
console.log(myArray); [10, 12, 34, 55, 65]Pagal numatytuosius nustatymus masyvas rūšiuojamas didėjančia tvarka, tačiau pasirinktinai galite perduoti pasirinktinę funkciją rūšiuoti () metodas surūšiuoti masyvą norimu būdu. Šiuo atveju aš išlaikiau paprotį rodyklės funkcija masyvui rūšiuoti didėjančia tvarka.
8. Array.reverse ()
Ką tai daro: Kaip rodo pavadinimas, atvirkščiai () metodas naudojamas pakeisti masyvo elementų tvarką. Atminkite, kad tai ne pakeičia masyvo turinį, o tik pačią tvarką. Štai pavyzdys, kaip geriau suprasti šį metodą:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Prisijunkite prie išvesties į konsolę, kad patikrintumėte operaciją.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Kaip matote, elementų tvarka buvo pakeista. Anksčiau paskutinio indekso elementas (14 elementas 6 indekse) dabar yra nulio indekso elementas ir pan.
9. Array.slice ()
Ką tai daro: gabalas () yra naudojama sekliajai masyvo dalies kopijai gauti. Paprasčiau tariant, šis metodas leidžia pasirinkti konkrečius elementus iš masyvo pagal jų indeksą. Galite perduoti elemento, iš kurio norite gauti, pradinį indeksą ir elementus bei pasirinktinai pabaigos indeksą.
Jei nepateiksite pabaigos indekso, bus gauti visi elementai nuo pradžios indekso iki masyvo pabaigos. Šis metodas grąžina naują masyvą ir nekeičia esamo.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);Aukščiau pateiktame kode visi elementai nuo antrojo iki paskutinio indekso yra nuskaitomi, nes pabaigos indekso parametras nėra perduodamas. Prisijunkite abu masyvus prie konsolės.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Akivaizdu, kad pradinis masyvas nėra modifikuojamas naudojant „Slice ()“ metodą, o grąžina naują masyvą, saugomą slicedArray kintamasis. Štai pavyzdys, kai pabaigos indekso parametras taip pat perduodamas gabalas () metodas.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. „Array.splice“ ()
Ką tai daro: sujungimas () yra naudingas masyvo metodas, naudojamas masyvo elementams pašalinti arba pakeisti. Nurodydamas indeksą ir elementų, kuriuos reikia ištrinti, skaičių, jis keičia masyvą.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);Aukščiau pateiktame pavyzdyje myArray masyvas yra sujungtas iš 2 indekso ir iš jo pašalinami 3 elementai. Masyvą dabar sudaro:
[2, 4, 12, 14]Norėdami pakeisti elementus, o ne tik juos ištrinti, galite perduoti bet kokį pasirinktinų parametrų skaičių su elementais, kuriuos norite pakeisti, pavyzdžiui:
kaip pasakyti, ar ssd nepavyksta
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. „Array.filter“ ()
Ką tai daro: filtras() metodas yra naudingas masyvo metodas, kuris atlieka funkciją, kurioje yra testas, ir grąžina naują masyvą su visais elementais, kurie išlaikė tą testą. Tiesa, šis metodas naudojamas filtruoti reikiamus elementus iš kitų elementų. Filtravimas atliekamas naudojant funkciją, kuri grąžina loginę vertę.
Štai pavyzdys filtras() metodas, naudojamas iš masyvo gauti tik tuos elementus, kurie dalijasi iš 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);Pirmiau pateiktame pavyzdyje rodyklės funkcija perduodama kaip parametras, kuris paima kiekvieną skaičių iš pradinio masyvo ir patikrina, ar jis dalijasi iš 2, naudojant modulo ( % ) ir lygybė ( === ) operatorius. Štai kaip atrodo išvestis:
[2, 4, 12, 14]12. Array.reduce ()
Ką tai daro: sumažinti () yra masyvo metodas, kuris naudoja reduktoriaus funkciją ir vykdo ją kiekviename masyvo elemente, kad grąžintų vieną vertę. Reikalinga reduktoriaus funkcija su akumuliatoriaus kintamuoju ir srovės elemento kintamuoju kaip reikalingi parametrai. Akumuliatoriaus vertė prisimenama visose iteracijose ir galiausiai grąžinama po paskutinės iteracijos.
Populiarus šio metodo naudojimo atvejis yra apskaičiuoti visų masyvo elementų sumą. Šios funkcijos įgyvendinimas yra toks:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);Ankstesniame pavyzdyje 0 yra perduodamas kaip antrasis parametras, kuris naudojamas kaip pradinė akumuliatoriaus kintamojo vertė. The sumOfNums kintamajame bus grąžinimo reikšmė sumažinti () metodas, kuris turėtų būti visų masyvo elementų suma.
console.log(sumOfNums); 5313. Masyvas. Apima ()
Ką tai daro: masyvo elemento paieška, siekiant patikrinti, ar jis yra, yra gana dažnai naudojama operacija, todėl „JavaScript“ turi integruotą metodą, kaip apima() masyvo metodas. Štai kaip galite jį naudoti:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Šis metodas reikalauja reikiamo parametro, ieškomo elemento ir pasirenkamo parametro - masyvo indekso, nuo kurio reikia pradėti paiešką. Priklausomai nuo to, ar tas elementas yra, ar ne, jis grįš tiesa arba klaidinga atitinkamai. Todėl išvestis bus tokia:
true
false
true
false14. Array.indexOf ()
Ką tai daro: indexOf () metodas naudojamas norint sužinoti indeksą, pagal kurį masyve galima rasti pirmąjį nurodyto elemento įvykį. Nors šis metodas yra panašus į metodą include (), šis metodas grąžina skaitinį indeksą arba -1, jei elemento nėra masyve.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));indexOf () metodas naudoja griežtą lygybę, kad patikrintų, ar yra elementas, o tai reiškia, kad vertė ir duomenų tipas turi būti vienodi. Pasirenkamas antrasis parametras ima rodyklę, nuo kurios pradedama ieškoti. Remiantis šiais kriterijais, rezultatas atrodys taip:
1
-1
415. „Array.fill“ ()
Ką tai daro: dažnai gali tekti nustatyti visas masyvo vertes į statinę vertę, pvz., 0. Vietoj ciklo galite išbandyti užpildyti () metodas tam pačiam tikslui. Šį metodą galite iškviesti masyve, kuriame yra 1 būtinas parametras: vertė, kuria reikia užpildyti masyvą, ir 2 pasirenkami parametrai: pradžios ir pabaigos indeksas, kuriuos reikia užpildyti. Šis metodas pakeičia išeinantį masyvą.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);Įrašę išvestį į konsolę, pamatysite:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Kiti „JavaScript“ kelionės žingsniai
Masyvai yra galinga „JavaScript“ kalbos dalis, todėl yra tiek daug metodų, kurie palengvina jūsų, kaip kūrėjo, gyvenimą. Geriausias būdas įvaldyti šiuos penkiolika metodų yra praktika.
Toliau mokydamiesi „JavaScript“, MDN yra puikus šaltinis dėl išsamios dokumentacijos. Patogiai naudokitės pultu, tada tobulinkite savo įgūdžius naudodami geriausius programuotojams skirtus „JavaScript“ redaktorius. Pasiruošę kurti savo svetainę naudodami „JavaScript“? Kodėl gi ne pažvelgti į kai kurias sistemas, kurias galite apsvarstyti.
Dalintis Dalintis „Tweet“ Paštu Verta išmokti 6 „JavaScript“ rėmusYra daug „JavaScript“ sistemų, padedančių vystytis. Štai keletas dalykų, kuriuos turėtumėte žinoti.
Skaityti toliau Susijusios temos- Programavimas
- „JavaScript“
- Kodavimo patarimai
Nitinas yra aistringas programinės įrangos kūrėjas ir kompiuterių inžinerijos studentas, kuriantis žiniatinklio programas naudojant „JavaScript“ technologijas. Jis dirba kaip laisvai samdomas žiniatinklio kūrėjas ir laisvalaikiu mėgsta rašyti „Linux“ ir programavimui.
Daugiau iš Nitin RanganathPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia