Js luo n elementin taulukon. Mukautettujen ominaisuuksien lisääminen taulukoihin. Array-elementtien lisääminen ja poistaminen

Kuvasin vain joitakin menetelmiä taulukoiden kanssa työskentelyyn.

Täällä puhumme taulukkoelementtien lisäämisestä ja poistamisesta. Tietoja taulukon kääntämisestä ja lajittelusta sekä taulukoiden leikkaamisesta, korvaamisesta ja yhdistämisestä.

Elementtien lisääminen taulukkoon.

Voit käyttää pituus-ominaisuutta lisätäksesi uusia elementtejä taulukkoon:

Var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; myArray = "Yahoo!"; console.log(myArray); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]

Tämä toimii, koska... taulukon elementit numeroidaan nollasta alkaen ja pituus on yksi enemmän. Pituus vastaa aina indeksiä + 1 , joten se on erittäin helppo lisätä uusi elementti taulukon loppuun. Kummallista kyllä, voit lisätä elementin kohtaan, joka on paljon suurempi kuin itse taulukon pituus:

Var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; myArray = "Lindsey Buckingham"; console.log(myArray); // ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards", undefined × 95, "Lindsey Buckingham"] console.log(myArray.length); // 100

Kuten kommenteista näkyy, tämä lisää 95 tyhjää paikkaa ja elementin "Lindsey Buckingham" taulukon loppuun. Tämän jälkeen saamme pituuden 100. Toinen tapa lisätä uusi elementti taulukkoon on käyttää push()-menetelmää:

Var myArray = ["Paul McCartney", "John Lennon", "George Harrison"]; myArray.push("Ringo Starr", "George Martin"); console.log(myArray); // ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr", "George Martin"]

Push()-menetelmä palauttaa aina uuden taulukon pituuden (tapauksessamme 5). Voit lisätä elementin käyttämällä splice():

Var myArray = ["tammenterho", "pyökki", "mongongo", "makadamia"]; myArray.splice(2, 0, "cashhew"); // lisää "cashew" indeksiin 2 console.log(myArray); // ["tammenterho", "pyökki", "cashew", "mongongo", "makadamia"]

Kun toinen argumentti on 0, se tarkoittaa, että mitään elementtiä ei poisteta, ja siksi kaikki myöhemmät argumentit lisätään taulukkoon ensimmäisessä argumentissa määritettyyn kohtaan.

Elementtien poistaminen taulukosta

Elementin poistaminen on hieman vaikeampaa kuin sen lisääminen. Voit poistaa elementin taulukon lopusta käyttämällä pop():

Var myArray = ["7-up", "Sprite", "Ginger Ale", "Lemonade"]; myArray.pop(); console.log(myArray); // ["7-up", "Sprite", "Ginger Ale"]

Pop()-menetelmä poistaa aina taulukon viimeisen elementin ja palauttaa sen.

Voit myös käyttää splice()-menetelmää:

Var myArray = ["kassava", "muskottipähkinä", "lupiini", "raparperi"]; myArray.splice(2, 1); // poista elementti indeksillä 2 console.log(myArray); // ["kassava", "muskottipähkinä", "raparperi"]

Toisin kuin liitosmenetelmä(), jota käytetään elementtien lisäämiseen, tässä toinen argumentti on 1, joka sanoo, että haluamme poistaa elementin indeksillä 2 (tai 3. peräkkäin). SISÄÄN tässä tapauksessa"Lupiini"-elementti poistettiin.

Voit poistaa taulukkoelementin käyttämällä delete-operaattoria:

Var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Michelangelo"]; console.log(myArray.length); // 4 poista myArray; // poista Eliza console.log(myArray.length); // 4 console.log(myArray); // ["Byte Bandit", määrittelemätön × 1, "Jeefo", "Michelangelo"]

Ensimmäinen tärkeä muistiinpano: delete() ei muuta taulukon pituutta elementin poistamisen jälkeen (vaikka se olisi taulukon viimeinen elementti). Toinen: delete() muuttaa poistettavan elementin arvon määrittelemättömäksi, joten kun sitä kutsutaan myArray = undefined .

Hyvä tapa poistaa elementti taulukosta on käyttää John Resigin Array.removea. Alla on hänen sivultaan otettu käyttöesimerkki:

// Array Remove - Kirjoittaja John Resig (MIT Licensed) Array.prototype.remove = function(from, to) ( var rest = this.slice((to || from) + 1 || this.length); this.length = alkaen< 0 ? this.length + from: from; return this.push.apply(this, rest); }; // Удаление 2 элемента из массива array.remove(1); // Удаление 2-ого элемента с конца массива array.remove(-2); // Удаление второго и третьего элемента array.remove(1,2); // Удаление последнего и предviimeinen elementti array.remove(-2,-1);

Haluat ehkä tarkastella Viral Patelin ratkaisua, joka on yksi Underscore.js:n funktioista, tai jQueryn grep().

Lisäksi JavaScriptissä on shift()-menetelmä, joka poistaa taulukon ensimmäisen elementin ja palauttaa sen arvon. Katsotaanpa koodia:

Var myArray = ["Matt Kramer", "Jason Bieler", "Tom Defile", "Phil Varone"]; console.log(myArray.length); // 4 var firstItem = myArray.shift(); console.log(firstItem); // Matt Kramer konsoli.log(myArray.length); // 3 console.log(myArray); // ["Jason Bieler", "Tom Defile", "Phil Varone"]

Shift()-menetelmällä poistimme elementin, mutta tallensimme sen arvon firstItem-muuttujaamme. Taulukon pituus muuttui 4:stä 3:een.

Tämä menetelmä voi olla hyödyllinen push()-menetelmän yhteydessä. Käyttämällä niitä yhdessä voimme tehokkaasti jonottaa elementtejä taulukkoon. Säilytämme taulukon pituuden poistamalla elementin alusta ja lisäämällä uuden loppuun.

Päinvastoin, voimme käyttää unshift menetelmä() lisätäksesi elementin taulukon alkuun:

Var myArray = ["apito", "castanets", "maraca"]; console.log(myArray.length); // 3 myArray.unshift("chime bar", "tan-tan"); console.log(myArray.length); // 5 console.log(myArray); // ["chime bar", "tan-tan", "apito", "castanets", "maraca"]

Käyttämällä unshift()-menetelmää pop()-menetelmän kanssa voit luoda jonoja kääntöpuoli, lisäämällä elementtejä taulukon alkuun ja poistamalla sen lopusta.

Matriisin elementtien kääntäminen ja lajittelu.

Kääntääksesi taulukon elementit, voimme käyttää reverse():

Var myArray = ["lähtölaskenta", "lopullinen", "the"]; console.log(myArray); // ["laskenta", "lopullinen", "the"] myArray = myArray.reverse(); console.log(myArray); // ["loppulaskenta"]

Lajittele taulukon elementit mukaan Aakkosjärjestys mahdollista sort()-menetelmällä:

Var myArray = ["ksylofonit", "seeprat", "juggernauts", "avokadot"]; console.log(myArray); // ["ksylofonit", "seeprat", "juggernauts", "avokadot"] myArray = myArray.sort(); console.log(myArray); // ["avokadot", "juggernauts", "ksylofonit", "seeprat"]

Mutta tämä ei toimi numeroiden kanssa.

Var myArray = ; console.log(myArray); // myArray = myArray.sort(); console.log(myArray); //

Jos haluat lajitella numeroita, voit käyttää seuraavaa koodia:

Funktio vertaaNumbers(a, b) ( palauttaa a - b; ) var myArray = ; console.log(myArray); // omaArray = myArray.sort(vertaileNumeroita); console.log(myArray); //

Kuten yllä näkyy, kun sort(:iin) lisätään yksinkertainen funktio, numerot sisältävä taulukko lajitellaan oikein.

Matriisien yhdistäminen.

Voimme yhdistää 2 tai useampia taulukoita ja saada 1 taulukon, joka sisältää yhdistettyjen taulukoiden elementit. Tätä varten käytämme concat()-menetelmää:

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myArray2 = ["Chris Murphy", "Patrick Pentland"]; var myNewArray = myArray.concat(omaArray2); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myNewArray = myArray.concat("Chris Murphy", "Patrick Pentland"); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Array-jako.

Voimme luoda uusi joukko sisältää yhden tai useamman elementin olemassa olevasta taulukosta slice()-funktiolla:

Var myArray = ["Laulu", "Basso", "Kitara", "Rummut", "Omenat", "appelsiinit"]; var myNewArray = myArray.slice(4); console.log(myNewArray); // ["Omenat", "appelsiinit"]

Slice()-menetelmässä on 1 tai 2 argumenttia. Jos 1 argumentti (indeksi) välitetään, uusi taulukko luodaan kaikista vanhan elementeistä alkaen tästä indeksistä. Jos 2 argumenttia välitetään, uusi taulukko luodaan elementeistä alkaen ensimmäisestä argumentista aina elementtiin, jonka indeksi välitetään toisessa parametrissa, ei sisällä viimeistä. Jotta se olisi selkeämpi, katsotaanpa alla olevaa koodia:

Var myArray = ["Laulu", "Basso", "Kitara", "Rummut", "Omenat", "appelsiinit"]; var myNewArray = myArray.slice(0, 4); console.log(myNewArray); // ["Laulu", "Basso", "Kitara", "Rummut"]

Elementtien korvaaminen taulukossa.

Käytämme splice()-funktiota elementtien poistamiseen taulukosta, mutta voimme myös korvata taulukon elementin uusilla elementeillä:

Var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"]; myArray.splice(3, 1, "Scott Shriner"); // korvaa 1 elementti indeksillä 3 console.log(myArray); // ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]

Splice()-menetelmä palauttaa aina taulukon, joka sisältää poistetut elementit. Rivi 2 palauttaa 1 elementin "Brian Bell".

Johtopäätös

Näissä artikkeleissa kuvattiin menetelmiä JavaScript-taulukoiden kanssa työskentelyyn. Jonkin verran lisäelementtejä Voit katsoa MDN:ää, jota en sisällyttänyt tähän viestiin. Ne toimivat vain IE9+:ssa, joten ne eivät välttämättä ole hyödyllisiä.

Onko lisättävää? Tai tiedätkö mielenkiintoisen kirjaston, joka auttaa hallitsemaan taulukoita? Ole hyvä ja kommentoi!

Tällä oppitunnilla tutustumme taulukoihin, opimme luomaan niitä, suorittamaan operaatioita niiden elementeille ja katsomme myös perusmenetelmiä ja -ominaisuuksia, jotka ovat käytettävissä niiden kanssa työskennellessään.

Array käsite

Taulukko on järjestetty datakokoelma, jolla on nimi ja joka on ilmentymä Array-objekti. Se koostuu elementeistä, joita käytetään niiden avulla sarjanumero(indeksi). Elementtien numerointi taulukossa ei ala 1:stä, vaan 0:sta.

Seuraava kuva näyttää numeerinen matriisi, joka koostuu 7 elementistä. Elementit tästä joukosta sisältävät seuraavat tiedot: 1 elementti (0 indeksi) - numero 123, 2 elementtiä (1 indeksi) - numero 214, 3 elementtiä (2 indeksi) - numero 315 jne.

//elementti, johon tulostetaan taulukko //numeerisen taulukon luominen var numberArray = new Array(123,214,315,312,124,206,218); //tulostaa taulukon elementtiin, jolla on id="myP" document.getElementById("myP").innerHTML = "1 Array elementti: " + numberArray + "
" + "2 Array elementti: " + numberArray + "
" + "3 Array elementti: " + numberArray + "
" + "4 Array elementti: " + numberArray + "
" + "5 Array elementti: " + numberArray + "
" + "6 Array elementti: " + numberArray + "
" + "7 Array elementti: " + numberArray;

Taulukon luominen (ilmoittaminen).

Matriisin luominen päällä JavaScript tehdään käyttämällä uutta operaattoria ja Array constructor -funktiota. Voit määrittää yhden seuraavista arvoista Array Constructor -funktion suluissa:

• Määrä. Tässä tapauksessa tämä toiminto luo taulukon, joka koostuu määritetystä määrästä elementtejä. Kaikkien näiden elementtien arvo on määrittelemätön.
• Useita arvoja pilkuilla erotettuina. Tässä tapauksessa Array Constructor -funktio luo taulukon, joka koostuu määritetystä määrästä elementtejä ja antaa niille asianmukaiset arvot.
• Ei mitään. Tässä tapauksessa tämä funktio luo tyhjän taulukon.

Toisin kuin monet muut ohjelmointikielet, JavaScriptin taulukot muuttavat automaattisesti kokoaan, ts. ne ovat luonnostaan ​​dynaamisia. Tällaisille taulukoille ei tarvitse antaa mitään mittoja. Yksi vielä erottuva piirre JavaScript-taulukot onko se sisällä erilaisia ​​elementtejä sama taulukko voi sisältää Erilaisia ​​tyyppejä tiedot.

Työskentely Array Elements -elementtien kanssa

Yhteyden ottamiseksi tietty elementti taulukko, sinun on määritettävä tämän taulukon nimi ja in hakasulkeet sen indeksi. Tämä operaatio kutsutaan myös indeksointioperaatioksi.

Luodaan esimerkiksi tyhjä taulukko ja lisätään siihen 4 tekstielementti:

//Luominen tyhjä joukkoälypuhelinVärit var älypuhelinVärit = new Array(); //määritä 1 taulukon elementille (indeksi 0) arvo "Black" smartphoneColors = "Black"; //määritä 2. taulukkoelementti (indeksi 1) arvolle "White" smartphoneColors = "White"; //määritä 3. taulukkoelementti (indeksi 2) arvolle "Grey" smartphoneColors = "Grey"; //määritä taulukon 4. elementti (indeksi 3) arvoon "Blue" smartphoneColors = "Blue";

Näytetään esimerkiksi selainkonsolissa (F12) älypuhelimen Colors-taulukon 2 ja 4 elementin arvot:

Console.log("2 element = " + älypuhelinvärit); console.log("4 elementti = " + älypuhelinvärit);

Taulukon pituus (taulukon elementtien lukumäärä)

Elementtien lukumäärä taulukossa määritetään pituusominaisuuden avulla.

//luo taulukko listaamalla Array-funktion elementtien arvot var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //määritä pituusArray-muuttuja taulukon pituudelle volumeHDDs var pituusArray = volumeHDDs.length;

Kuinka saada taulukon ensimmäinen elementti

Taulukon ensimmäisen elementin arvo saadaan määrittämällä tämän taulukon hakasulkeissa luku 0:

//3 elementistä koostuvan taulukon luominen var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //taulukon ensimmäisen elementin arvon saaminen var firstValue = volumeHDDs;

Kuinka saada taulukon viimeinen elementti

Taulukon viimeisen elementin arvo saadaan määrittämällä lauseke taulukon_nimi.pituus-1 tämän taulukon hakasulkeissa:

//3 elementistä koostuvan taulukon luominen var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //taulukon viimeisen elementin arvon saaminen var lastValue = volumeHDDs;

Iteroidaan taulukon yli

Iterointi taulukon elementtien läpi tehdään käyttämällä silmukalle.

Esimerkiksi iteroidaan kaikkia taulukon elementtejä ja näytetään niiden arvot selainkonsolissa (F12):

//taulukon luominen nimiOpiskelijat, koostuu 4 elementistä var nameStudents = new Array("Petya","Vasya","Kolya","Maxim"); //iteroi taulukon elementtejä 0:sta taulukon pituus-1:een (var i=0; i