Array ni nini?
Array ni variable ambayo ina item zaidi ya moja. Array poa ni object. Mfano unataka kutengeneza variable ambayo itawakilisha aina za magari. Katika hali ya kawaida itakubidi kutengeneza kwa kila aina ya gari na variable yake. Hivyo utasema var a = "Toyota", var b ="benzi", var c = "basi" sasa kupunguza kazi hii ya kuweka kila item na variable yake, hapa tutatumia array. Hivyo tutasema
var gari ={"Toyota", "Benzi", "basi"}
Utaona hapo imekuwa rahisi kuwa baada ya kuwa na variable 3 sasa una variable moja tu.
Jinsi ya kutengeneza array
Array inaweza kutengenezwa kwa njia kuu mbili ambazo ni kwa kutumia njia ya mabano [] kisha kila item inatengenishwa na alama ya kima (,) ila item ya mwisho haiwekewi koma. Njia ya pili ni kwa kutumia constructor ambayo ni new Array(). Wataalamu wanapendekea kutumia njia ya kwanza nilitaka kwa kuwa ipo fasta zaidi.
<!DOCTYPE html>
<html>
<head>
<title> njia ya mabano</title>
</head>
<body>
<p id="demo"></p>
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
document.getElementById("demo").innerHTML = magari;
</script>
</body>
</html>
Hiyo hapo juu ni njia ya mabank kama unavyoona hapo. Sasa wacha tuone kwa kutumia constructor. Katika njia hii kumbuka keyword inaanza na A kubwa yaani Array na sio array.
<!DOCTYPE html>
<html>
<head>
<title> njia ya constructor</title>
</head>
<body>
<p id="demo"></p>
<script>
var magari =new Array ("yoyota", "Benzi", "NoAH");
document.getElementById("demo").innerHTML = magari;
</script>
</body>
</html>
Jinsi ya ku access array
Hapa tunazungumzia jinsi ya kupata output ya array. Ama jinsi ya kutumia hiyo array. Hapa pia tutaona jinsi ya kuifikia na kuitumia kila item kivyake vyake ama kwa ujumla. Kwa mfano katika mifano miwili hapo juu item zimetumika kwa ujumla ndio maana imepata matokeo ya item zote.
Ili kuitumia arry kwanza ujuwe index yake. Index ni Idd ya hiyo array. Kwa mfano kama una array tatu kila moja ina is yake. Na huhesabiwa kuanzia 0. Ya kwanza hupewa 0, ya pili hupewa 1 na ya tatu hupew 2.
Mfano una array hii var magari = ["yoyota", "Benzi", "NoAH"];
Katikabarray hiyo toyota ina index ya 0, Benzi index ya 1 na Noah index ya 2. Hivyo basi kama tunataka ku output benzi tutatumia index namba yake ambayo ni 1.
Mfano.
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
document.write(magari[1]);
</script>
Baadhi ya method zinazotumika kwenye array:
Kwa kuwa tunaelewa maana ya array, na jinsi ya kuitengeneza pia tunajuwa jinsi ya ku access array sasa hapa tutakwenda kuona baadhi ya Method (functions) zinazotumika kwenye array.
push()
Hii hutumika kuongeza item mwisho wa array. Unaweza kuongeza item zaidi ya moja, utazitenganisha kwa alama ya (;).
Mfano kwenye array yetu ya magari tunakwenda kuongeza magari mawili ambayo ni BMW na Bugati kufanya hivi tutatumia method ya push()
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
magari.push("BMW", "Bugati");
document.write(magari);
</script>
unshift()
Hii hutumika katika kuongeza item mwanzoni mwa array. Unaweza kuongeza item moja ama zaidi. Sasa wacha tuiongeze BMW na Bugati mwanzoni mwa array yetu.
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
magari.unshift("BMW", "Bugati");
document.write(magari);
</script>
pop()
Hii hutumika katika kuondoa item ya mwisho katika array. Kwa mfano array yetu ya magari item yavnwisho ni NoAH. Hivyo kwa kutumia Method hii unaweza kuondoa kabisa item hiyo.
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
magari.pop();
document.write(magari);
</script>
Pia unaweza kutumia hiyo pop() method kupata item ya mwisho. Kwa mfano
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
document.write(magari.pop());
</script>
shift()
Hii hutumika katika kuondoa item ya kwanza kwenye array. Kwa mfano katika array yetu ya magari tutakwenda kuondoa Toyota
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
magari.shift();
document.write(magari);
</script>
Pia kwa kutumia Method hiyo hiyo unaweza kupata item ya kwanza kwenye array.
Mfano
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
document.write(magari.shift());
</script>
length property
Hii hutumika kupata length of arry yaani kujuwa je hiyo array ina item ngapi. Inafanya kazi sawa na ile length of the string. Tutatumia array yetu ya magari kujuwa ina item ngapi?
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
document.write(magari.length);
</script>
Kwa kutumia length property pia unaweza kupata array ya mwisho yaani last array.
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
document.write(magari[magari.length -1]);
</script>
forEach()
Hii hutumika ku access item zote kwenye array. Method hii ina parameter 3 ambazo ni:
i kumaanisha array index
val kumaanisha array value
arr hii ni array yenyewe.
Kwa kutumia Method hii unaweza kupata index ya kila item au array. BPia value zake.
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
magari.forEach(function(val, i, arr) {
document.write(i + ": " + val + "<br>");
});
</script>
join()
Hii hutumika kubadili array kuwa string, kisha huubganisha item katika namna utakayitaka. Kwa mfano unaweza kutenganishabkwa kma (,) au kwa slash (/) ama kwa hyohen (-) ama anaomba yeyote utakayitaka. Utakachofanya ni kuweka hiyo alama kwenye join(). Mfano join("-") au join("/") au join(;)
Mfano:
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
document.write(magari.join("-"));
</script>
<script>
var magari = ["yoyota", "Benzi", "NoAH"];
document.write(magari.join(" "));
</script>
split()
Hii hutumika kubadili string kuwa array. Itakachofanya ni kuangalia katika hiyo string kila ambako kunewachwa nafasi itakuwa ni string. Kitu cha muhimu ni kuwacha nafasi kwenye method. Mfano Kama web imetumika sana utalipa kikubwa na kama umetumia kidogo utalipa kidogo. split(" ") hapo itagawa kila kwenye nafasi kuwa array item. Mfano hii sentensi mama na baba wanalima hapa utapata array item 4. Ila ka kwenye split hukuacha nafasibumeandika hivi split("") hapo kila herufi iitahesabika ni item ya string.
<script>
var str = "mama na baba wanalima";
document.write(str.split(" "));
</script>
Hiyi hapo ni array ambayo unaweza fanya kila kitu kinachohusu array. Kwa mfano tunataka ku access array yenye index 2
<script>
var str = "mama na baba wanalima";
var arr =str.split(" ");
document.write(arr[2]);
</script>
concat()
Hii hutumika katika kuunganisha array zaidi ya moja kuwa array moja. Mfano una list tatu za array ambazo ni
array1 ["viazi", "mihogo", "magimbi"]
array2 ["nyanya", "ndimu", "pilipili"]
array3 ['nazi", "karanga", "maharagwe"]
Sasa list hizi tatu utaweza kupata list moja kwa kuziunganisha. Tunapounganisha hapo tunaunganisha hiyo ya jwanza na hizo za pili mbili.
Mfano:
<script>
var array1 =["viazi", "mihogo", "magimbi"];
var array2 =["nyanya", "ndimu", "pilipili"];
var array3 =["nazi", "karanga", "maharagwe"];
var arr = array1.concat(array2,array3);
document.write(arr);
</script>
indexOf()
Hii hutumika kutafuta array kuwa je ipo na kama ipo ina index gani. Kama jina linavyo jieleza indexOf maana yake unatafuta index ya hiyo array ambayo utaitaja. Kama hapa kama array hiyo imejirudia zaidi hapa utapata index ya ile ya kwanza ilioanza kutajwa kwenye list.
Kwa mfano tuna lita hapa inahusu vinywaji. soda, juisi, maziwa, asali, na maji sasa mfano tunataka kutafuta je katika list maziwa yapo na kama yapo ni index ya ngapi.
<script>
var vinywaji =["soda", "juisi", "maziwa", "maji"];
document.write(vinywaji.indexOf("maziwa"));
</script>
Utaona hapo inetoa jibu 2 kumaanisha kuwa maziwa yapo na index yake ni 2.endapo hayatakuwepo ama kitu unachokitafuta hakipo italeta -1.
lastIndexOf()
Hii ni kinyume cha indexOf hii yenyewe endapo zimejirudia zaidi ya mara moja itakupa matokeo ya ile ya mwisho kutokea. Rejea method ya indexOf na lastIndexOf kwenye string zinafanana matumizi yake.
<script>
var vinywaji =["soda", "juisi", "maziwa", "fanta", "maji", "maziwa"];
document.write(vinywaji.lastIndexOf("maziwa"));
</script>
Utaona hapo imekupa jibu 5 kwa kuwa maziwa ya mwisho ina index ya 5.
includes()
Hii hutumika kujuwa kama item unayotafuta ipo ama haipo. Kama ipo utapata jibu true na kama haipo utapata jibu false. Mfano tunataka kujuwa je kwenye list ya vinywaji maji yapo?
<script>
var vinywaji =["soda", "juisi", "maziwa", "fanta", "maji", "maziwa"];
document.write(vinywaji.includes("maji"));
</script>
slice()
Hii hutumika kuchomoa item kutoka kwenye array na kutengeneza array mpya. Method hii inabeba parameter mbili ambazo zote ni int ya kwanza ni mwanzo wa array ambapo unataka kunyofoa item na ya pili itabeba idadi ya item ambazo zitanyofolewa kuanzia index 0 yaani item ya kwanza kwenye array.
Mfano tuna list hii matunda=["embe", "chungwa", "ndizi", "nanasi", "pera", "nyanya"] sasa katika array mataja kunyofoa ndizi, nanasi, na pera sasa kwanza unatakiwa kujuwa hiyo ndizi ina index ya ngapi. Katika list hiyo ndizi ina index ya 2. Hivyo parameter ya kwanza itaanza na 2. Kisha utaangalia pera ni item ya ngapi kutoka mwanzo. Kwa mujibu wa list hiyo pera ni item ya 5. Hivyo basi Method yetu itakuwa hivi sclice(2, 5)
<script>
var matunda=["embe", "chungwa", "ndizi", "nanasi", "pera", "nyanya"];
document.write(matunda.slice(2,5));
</script>
splice()
Hii hutumika katika kubadili list ya item kwenye array. Unaweza kuondosha item ama kuongeza item kwenye array. Method hii pia inabeba parameter 3 ambazo ni :-
-
Mwanzo ambapo unataka kuchomeka item ama kuondoa. Hapa utaweka index namba ya hiyo item
-
Idadi ya item unazotaka kuziondoa.
Tuna list hii matunda=["embe", "chungwa", "ndizi", "nanasi", "pera", "nyanya"] tunataka kuongeza matunda haya "tikiti","parachichi", "fenesi" kwenye hiyo list baada ya chungwa. Kisha kwenye list ya kwanza tunataka kuwepo nyanya tu. Ili list yetu isomeke hivi embe,chungwa,tikiti,parachichi,fenesi,nyanya
Kufanya hivi kwanza tujuwe kwenye list ya kwanza tumechukuwa embe na chungwa ina maana list yetu mpya imeanza kuhesabu index ya 2.kisha tutaondoa item 3 ili kubakiza nyanya pekee.
<script>
var matunda=["embe", "chungwa", "ndizi", "nanasi", "pera", "nyanya"];
matunda.splice(2,3, "tikiti","parachichi", "fenesi");
document.write(matunda)
</script>
Tofauti na tulivyofanyabhapo unaweza kuondoa items, na kuibadili. Mfano katika list hii matunda=["embe", "chungwa", "ndizi", "nanasi", "pera", "nyanya"] tunataka kuondoa nanasi tu hivyo list isomeke hivi
matunda=["embe", "chungwa", "ndizi", "pera", "nyanya"]
<script>
var matunda=["embe", "chungwa", "ndizi", "nanasi", "pera", "nyanya"];
matunda.splice(3,1);
document.write(matunda);
</script>
Pia kuna njia nyingine ya kihalifu item kwa kutumia index namba yake. Kwa nfano tuna list hii hali matunda embe, chungwa, tikiti, parachichi, fenesi, nyanya sasa tunataka kuondoa nyanya kwenye list ya matunda. Tunataka badala ya kuweka nyanya tuweke chenza. Kufanya hivi kwanza ujuwe hiyo nyanya ipo index ya ngapi. Katika list nyanya ni ya 5.
<script>
var matunda=["embe", "chungwa", "ndizi", "nanasi", "pera", "nyanya"];
C
matunda[5] = "chenza";
document.write(matunda);
</script>
Kwa kutumia njia hiyo unaweza kubadili item yeyote hapo. Pia unaweza kubadili item zaidi ya moja kwa wakati mmoja. Mfano tunataka kubadili pera kuwa komamanga na chungwa kuwa yikiti.
<script>
var matunda=["embe", "chungwa", "ndizi", "nanasi", "pera", "nyanya"];
matunda[5] = "chenza";
matunda[1] = "tikiti";
matunda[4] = "komamanga";
document.write(matunda);
</script>
sort()
Hii hutumika kupangilia array kwa mfano unaweza kupangilia kutoka kubwa kwenda ndogo ama ndogo kwenda kubwa ama a- z ama z-a. Hapa tutatumia function kwa ajili ya kulinganisha.
-
Kupanga namba kutoka ndogo kwenda kubwa
<!DOCTYPE html>
<html>
<head>
<title>Kutoka kubwa kwenda ndogo</title>
</head>
<body>
<script>
var namba = [5, 8, 4, 2, 10];
namba.sort(function(ndogo, kubwa) {
return ndogo - kubwa;
});
document.write(namba);
</script>
</body>
</html>
-
Kubwa kwenda ndogo
<!DOCTYPE html>
<html>
<head>
<title>Kutoka kubwa kwenda ndogo</title>
</head>
<body>
<script>
var namba = [5, 8, 4, 2, 10];
namba.sort(function(kubwa, ndogo) {
return ndogo - kubwa;
});
document.write(namba);
</script>
</body>
</html>
-
Kutoka A kwenda Z
<!DOCTYPE html>
<html>
<head>
<title>Kutoka A - Z</title>
</head>
<body>
<script>
var majina = ["zuhura", "ali", "mwanakombo", "charkes", "paul"];
majina.sort();
document.write(majina);
</script>
</body>
</html>
-
Kutoka Z kwenda A
Ili tuweze kupanga kutoka Z kwenda 1 tutatumia method nyingine inaitwa resverse() hapa kwanza tutazioanga hizo data zetu kisha kwa kutumia reveese utazigeuza.
<!DOCTYPE html>
<html>
<head>
<title>Kutoka A - Z</title>
</head>
<body>
<script>
var majina = ["zuhura", "ali", "mwanakombo", "charkes", "paul"];
majina.sort();
majina.reverse()
document.write(majina);
</script>
</body>
</html>
Kwa kuwa tunaelewa kuwa item yavkwanza kwenye array ina index ya 0 hivyo tunaweza kupata namba ndogo kuliko zote kwenye array.
<!DOCTYPE html>
<html>
<head>
<title> Namba ndogo</title>
</head>
<body>
<script>
var numbers = [5, 3, 4, 1, 2];
numbers.sort(function(a, b) {
return a - b;
});
var ndogo = numbers[0];
document.write(ndogo);
</script>
</body>
</html>
Kujuwa namba kubwa kuliko zote zipange kutoka kubwa kwendandogo kisha chukua item yanye index 0.
<!DOCTYPE html>
<html>
<head>
<title> Namba kubwa</title>
</head>
<body>
<script>
var numbers = [5, 3, 4, 1, 2];
numbers.sort(function(b, a) {
return a - b;
});
var kubwa = numbers[0];
document.write(kubwa);
</script>
</body>
</html>
ARRAY ITERATION
Hii humaanisha kuifanyia kazi kila item kwenye array eidha ki binafsi ama kwa uwingi. Mfano ni kama tulivyoona kwenye matumizi ya forEach(). Sasa hapa tutaona method nyingine ambazo hufanya kazi kama hii.
for()
Hii hutumika kupata ama kufanyia kazi item yeyote kwenye list. Kwa mfano:
<!DOCTYPE html>
<html>
<head>
<title> for iteration </title>
</head>
<body>
<script>
var fruits = ["Apples", "Bananas", "Oranges"];
for(var i = 2; i < fruits.length; i++) {
document.write(fruits[i] + "<br>");
}
</script>
</body>
</html>
map()
Kwa kutumia map unaweza kufanya action ambayo inahusu item moja ama zote. Kwa nfano hapo tutazidisha kila item kwa 2.
<!DOCTYPE html>
<html>
<head>
<title> zidisha kwa 2 kila item kwenye array </title>
</head>
<body>
<p id="demo"></p>
<script>
var numbers = [10, 20, 30, 40, 50];
var numbersTimesTwo = numbers.map(function(value) {
return value * 2;
});
document.getElementById("demo").innerHTML += numbersTimesTwo;
</script>
</body>
</html>
filter()
Tunaweza kuchuja item kwa namna tunavyotaka. Kwa mfano tunataka kupata item ambazo zina thamani iliyo chini ya 4. Katika list hii 1,2,3,4 5 ili kupata nyenyebnamba chini ya nne tutatumia < .
<!DOCTYPE html>
<html>
<head>
<title>chuja item zote zilizo chini ya 4 </title>
</head>
<body>
<p id="demo"></p>
<script>
var numbers = [1, 2, 3, 4, 5];
var newArr = numbers.filter(function(value) {
return value < 4;
});
document.getElementById("demo").innerHTML += newArr;
</script>
</body>
</html>
MWISHO
Tukutane somo la 14 tutakwenda kujifunza kuhusu javascript events. Hili ni somo muhimu sana ambalo litasaidia web yako kuwa interactive.
