Tämä viesti selittää menettelyn taulukon muodostamiseksi JavaScript-objektien joukolla.
Kuinka luoda taulukko JavaScriptin objektijoukosta?
Luodaksemme taulukon objektijoukosta käytämme seuraavia menetelmiä:
Tutkitaan jokaista menetelmää yksitellen!
Tapa 1: Luo taulukko objektijoukosta käyttämällä JavaScriptin HTML-taulukkomerkkijonoa
JavaScriptissä ' merkkijono ' on tallentaa tekstiä, numeroita tai erikoismerkkejä. Merkkijonot määritellään sulkemalla merkki tai merkkiryhmä kaksois- tai kertalainausmerkeillä. Tarkemmin sanottuna niitä käytetään myös taulukoiden luomiseen.
Otetaan esimerkki saadaksesi selkeän käsityksen taulukon luomisesta objektijoukosta Taulukko-merkkijonon avulla.
Esimerkki
Esimerkissämme käytämme ' Julkistetaan ' joukko ' ja anna sille joitain arvoja: Alusta muuttuja ' Pöytä ' tallentaaksesi HTML-taulukon merkkijonon: Määritä kaksi solua riviä kohden asettamalla arvo ' kaksi '/' soluja ”muuttuja: Käytä seuraavaksi ' array.for Every() ' -menetelmä siirtää jokainen taulukkoelementti funktiosta. Aseta sitten ' {arvo} 'tunnisteella' $ ' sisällä ' Määritä taulukon sulkemistunnisteet muuttujalle ' Pöytä ' käyttämällä ' += ”operaattori. Linkitä sitten taulukon sisältö luotuun säilöön sen säilön avulla. Käytä tätä varten ' vähättely () ” -menetelmä ja välitä tunnus sille ja aseta sisäinen HTML-koodi asettaaksesi arvot muuttujan Taulukko sisällä: CSS-tiedostossamme , käytämme joitain ominaisuuksia taulukkoon ja sen tietosoluihin. Tätä varten asetamme ' rajaa 'omaisuus arvolla' 1px kiinteä ' asettaaksesi reunuksen pöydän ja sen solujen ympärille ja ' pehmuste 'omaisuus arvolla' 3px ” luodaksesi määritellyn tilan elementin sisällön ympärille määritellyn reunan mukaan: Tallenna annettu koodi, avaa HTML-tiedostosi ja tarkastele taulukon taulukon objekteista: Tutkitaan vielä yhtä menetelmää taulukon luomiseksi JavaScriptin objektijoukosta. ' kartta() ” -menetelmä soveltaa tietyn funktion jokaiseen taulukon elementtiin, ja vastineeksi se tarjoaa uuden taulukon. Tämä menetelmä ei kuitenkaan korvaa alkuperäistä taulukkoa. Voit myös käyttää map()-menetelmää muodostaaksesi taulukon, jossa on joukko objekteja. Luodaan taulukko käyttämällä ' päästää ”avainsana. Määritä joitain arvoja objektin ominaisuuksille tai avaimille: Käytä jo luotua säilöä käyttämällä belittlement()-menetelmää ja käytä ' insertAdjacentHTML() ' tapa lisätä taulukkotunnisteet: Käytä ' Object.keys() ' -menetelmää käyttääksesi määritetyn objektin avaimia ja käytä sitten ' liittyä seuraan() ' tapa sijoittaa ne otsikoiksi ' Kun olet lisännyt taulukon otsikon sulkemistunnisteen ja taulukon rivin sekä tietojen avaustunnisteen, käytämme ' kartta() ' tapa kutsua ' Object.values() ' -menetelmätoimintoa kohdeavainten kullekin arvolle, käytä sitten ' liittyä seuraan() ” -menetelmää sijoittaaksesi ne riviin ja siirtyäksesi seuraavaan: Kuten näet, olemme luoneet onnistuneesti taulukon määritetystä objektijoukosta: Olemme käsitelleet tehokkaita tapoja luoda taulukko JavaScriptin objektijoukosta. JavaScriptissä taulukon muodostamiseksi objektijoukosta HTML ' pöytä ' merkkijono tai ' kartta() ”menetelmää voidaan käyttää. Voit tehdä tämän määrittämällä div-tunnisteen tunnuksella. Määritä sitten objektien joukko molemmissa menetelmissä, tallenna taulukkotunnisteet muuttujiin tai palauta ne suoraan yhdistettyyn HTML-elementtiin tietojen kanssa. Tässä viestissä on käsitelty menetelmää taulukon luomiseksi objektijoukosta JavaScriptin avulla.
oli joukko = [ 'Mark' , 'Varpunen' , 'Kalastaa' , 'Oranssi' ] ;
' ;
' -tunniste. Ilmoita seuraavaksi muuttuja ' a ' lisätäksesi indeksiä' i ' ja määritä ' jos ”ehto siten, että jos loput solujen arvot ja luotu muuttuja on yhtä suuri kuin nolla ja arvo ” a ' ei ole yhtä pitkä kuin taulukon pituus, jakaa sitten taulukon seuraavalle riville tai riville: joukko. varten Jokainen ( ( arvo, ts ) => {
Pöytä += ` < TD > $ { arvo } TD > ` ;
Tuolla on = i + 1 ;
jos ( a % soluja == 0 && a != joukko. pituus ) {
Pöytä += '' ; '
} } ) ;
asiakirja. vähättelyä ( 'kontti' ) . sisäinen HTML = Pöytä ;
rajaa : 1px kiinteä ;
pehmuste : 3px ;
}
Tapa 2: Luo taulukko objektijoukosta käyttämällä JavaScriptin map()-menetelmää
Esimerkki
{ 'Nimi' : 'Mark' , 'Ikä' : 'Kaksikymmentä (20)' } ,
{ 'Nimi' : 'Mitä minä' , 'Ikä' : 'Kolmekymmentä (30)' } ]
` < pöytä >< tr >< th >
'tunniste: $ { Esine . avaimet ( joukko [ 0 ] ) . liittyä seuraan ( ' ' ) }
. liittyä seuraan ( '' ) ) . liittyä seuraan ( ' ' ) } pöytä > ` )
Johtopäätös