JavaScript tömb módszerek

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

A módszerek az oktatóanyag oldalon megjelenő sorrendben vannak felsorolva

Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()

JavaScript tömb hossza

A length tulajdonság egy tömb hosszát (méretét) adja vissza:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

JavaScript tömb toString()

A toString() JavaScript metódus egy tömböt alakít (vesszővel elválasztott) tömbértékek karakterlánca.

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Eredmény:

Banana,Orange,Apple,Mango

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

A join() metódus szintén az összes tömbelemet egy karakterláncba egyesíti.

Úgy viselkedik, mint a toString(), de emellett megadhatja az elválasztót is:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Eredmény:

Banana * Orange * Apple * Mango

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>

<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

Pukkanás és tolás

Ha tömbökkel dolgozik, könnyen eltávolítható és hozzáadható az elemek új elemek.

Ez a pukkanás és lökdösődés:

Elemek kiugrása ki egy tömbből, vagy eltolás elemeket egy tömbbe.

JavaScript tömb pop()

A pop() metódus eltávolítja az utolsó elemet a tömbből:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

A pop() metódus a „kiugró” értéket adja vissza:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method returns the value that was "popped out":</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

JavaScript tömb push()

A push() metódus egy új elemet ad egy tömbhöz (a végén):

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push() method appends a new element to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

A push() metódus az új tömbhosszt adja vissza:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The push() Method</h2>

<p>The push() method returns the new array length:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Változó elemek

Az eltolás egyenértékű a felbukkanással, de helyette az első elemen dolgozik az utolsó.

JavaScript tömb shift()

A shift() metódus eltávolítja az első tömbelemet és "eltol" minden más elemeket alacsonyabb indexre.

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>

<p>The shift() method removes the first element of an array (and "shifts" the other elements to the left):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

A shift() metódus a „kiszorított” értéket adja vissza:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method returns the element that was shifted out.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

JavaScript tömb unshift()

Az unshift() metódus egy új elemet ad a tömbhöz (az elején), és "unshift" régebbi elemek:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method adds new elements to the beginning of an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Az unshift() metódus az új tömbhosszt adja vissza:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method returns the length of the new array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Változó elemek

A tömbelemek az indexszámuk használatával érhetők el:

A tömb indexei 0-val kezdődnek:

[0] az első tömbelem
[1] a második
[2] a harmadik ...

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>Array elements are accessed using their index number:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

JavaScript tömb hossza

A length tulajdonság egyszerű módot biztosít egy új elem hozzáfűzéséhez egy tömbhöz:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

JavaScript tömb delete()

Figyelem !

A tömbelemek a delete JavaScript operátor használatával törölhetők.

A delete használata definiálatlan lyukakat hagy a sor.

Használja helyette a pop() vagy shift() függvényt.

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The delete Method</h2>

<p>Deleting elements leaves undefined holes in an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>

</body>
</html>

Tömbök egyesítése (összefűzése).

A concat() metódus egyesítéssel (összefűzéssel) új tömböt hoz létre meglévő tömbök:

Példa (két tömb egyesítése)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

A concat() metódus nem módosítja a meglévő tömböket. Mindig új tömböt ad vissza.

A concat() metódus tetszőleges számú tömb argumentumot vehet fel:

Példa (három tömb egyesítése)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];

const myChildren = array1.concat(array2, array3); 

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

A concat() metódus karakterláncokat is használhat argumentumként:

Példa (Tömb egyesítése értékekkel)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method can merge string values to arrays:</p>

<p id="demo"></p>

<script>
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter"); 
document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

Egy tömb lapítása

A tömb simítása egy tömb dimenziójának csökkentésének folyamata.

A flat() metódus egy új tömböt hoz létre, amelynek altömb elemei meghatározott mélységig vannak összefűzve.

Példa

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

<p id="demo"></p>

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Böngésző támogatás

A JavaScript-tömb flat() 2020 januárja óta minden modern böngészőben támogatott:

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

Illesztő és szeletelő tömbök

A splice() metódus új elemeket ad egy tömbhöz.

A slice() metódus kivág egy tömb egy részét.

JavaScript tömb splice()

A splice() metódus használható új elemek hozzáadásához egy tömbhöz:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Az első paraméter (2) határozza meg azt a pozíciót, ahol az új elemeknek kell lenniük hozzáadva (beillesztve).

A második paraméter (0) határozza meg, hogy hány elem legyen eltávolítva.

A többi paraméter ("Lemon" , "Kiwi") határozza meg az új elemeket hozzáadva.

A splice() metódus egy tömböt ad vissza a törölt elemekkel:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed; 
</script>

</body>
</html>

A splice() használata az elemek eltávolításához

Az ügyes paraméterbeállítással a splice() segítségével eltávolíthatja az elemeket anélkül, hogy elhagyná. "lyukak" a tömbben:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() methods can be used to remove array elements:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(0, 1);
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Az első paraméter (0) határozza meg azt a pozíciót, ahol az új elemeknek kell lenniük hozzáadva (beillesztve).

A második paraméter (1) határozza meg, hogy hány elem legyen eltávolítva.

A többi paraméter kimarad. Új elemek nem kerülnek hozzáadásra.

JavaScript tömb slice()

A slice() metódus egy tömb egy darabját újjá vágja sor.

Ez a példa egy tömb egy részét vágja ki az 1. tömbelemtől kezdve ("Narancs"):

Példa

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 1 ("Orange"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

jegyzet

A slice() metódus új tömböt hoz létre.

A slice() metódus nem távolít el egyetlen elemet sem a forrástömbből.

Ez a példa egy tömb egy részét vágja ki a 3. tömbelemtől kezdve ("Alma"):

Példa

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 3 ("Apple")</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

A slice() metódus két argumentumot vehet fel, mint például a slice(1, 3).

A metódus ezután kiválasztja az elemeket a start argumentumból, és legfeljebb (de nem beleértve) a végérvet.

Példa

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>When the slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) the end argument:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Ha az end argumentum ki van hagyva, mint az első példákban, akkor a slice() metódus kivágja a tömb többi részét.

Példa

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 2 ("Lemon"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Automatikus toString()

A JavaScript automatikusan konvertálja a tömböt vesszővel elválasztott karakterláncokká, amikor a primitív érték várható.

Ez mindig így van, amikor megpróbálunk kiadni egy tömböt.

Ez a két példa ugyanazt az eredményt adja:

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Példa

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>JavaScript automatically converts an array to a comma separated string when a simple value is expected:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>

</body>
</html>

jegyzet

Minden JavaScript objektum rendelkezik toString() metódussal.

Maximális és minimális értékek keresése egy tömbben

Nincsenek beépített funkciók a legmagasabb érték megtalálásához vagy a legalacsonyabb érték egy JavaScript tömbben.

A következő részből megtudhatja, hogyan oldja meg ezt a problémát fejezete ennek az oktatóanyagnak.

Tömbök rendezése

A tömbök rendezésével az oktatóanyag következő fejezete foglalkozik.

Teljes tömbreferencia

A teljes tömbreferenciáért látogasson el ide:

Teljes JavaScript tömbreferencia.

A hivatkozás az összes tömb leírását és példáit tartalmazza tulajdonságait és módszereit.