JavaScript Dizileri

İçindekiler

Dizi, birden fazla değer tutabilen özel bir değişkendir:

const cars = ["Saab", "Volvo", "BMW"];

Kendiniz Deneyin →

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

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Neden Diziler Kullanılmalı?

Öğelerden oluşan bir listeniz varsa (örneğin araba adlarının listesi), tek değişkenli arabalar şöyle görünebilir:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

Ancak, arabaların arasında dolaşıp belirli bir tane bulmak isterseniz ne olur? Peki ya 3 değil de 300 arabanız olsaydı?

Çözüm bir dizidir!

Bir dizi tek bir ad altında birçok değeri tutabilir ve değerlere bir indeks numarasına başvurarak erişin.

Dizi Oluşturma

Dizi değişmezini kullanmak, JavaScript Dizisi oluşturmanın en kolay yoludur.

Sözdizimi:

const array_name = [item1, item2, ...];

Dizileri const anahtar sözcüğüyle bildirmek yaygın bir uygulamadır.

Dizilerle const hakkında daha fazla bilgiyi şu bölümde bulabilirsiniz: JS Array Const.

Örnek

const cars = ["Saab", "Volvo", "BMW"];

Kendiniz Deneyin →

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

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Boşluklar ve satır sonları önemli değildir. Bir bildirim birden fazla satıra yayılabilir:

Örnek

const cars = [
  "Saab",
    "Volvo",
    "BMW"
];

Kendiniz Deneyin →

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

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

<script>
const cars = [
  "Saab",
  "Volvo",
  "BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Ayrıca bir dizi oluşturabilir ve ardından öğeleri sağlayabilirsiniz:

Örnek

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Kendiniz Deneyin →

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

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

<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

JavaScript Anahtar Kelimesini Kullanmak yeni

Aşağıdaki örnek ayrıca bir Array oluşturur ve ona değerler atar:

Örnek

const cars = new Array("Saab", "Volvo", "BMW");

Kendiniz Deneyin →

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

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

<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Yukarıdaki iki örnek tam olarak aynısını yapıyor.

new Array() kullanmaya gerek yoktur.

Basitlik, okunabilirlik ve yürütme hızı için dizi değişmez yöntemini kullanın.

Dizi Öğelerine Erişim

Bir dizi öğesine dizin numarasına başvurarak erişirsiniz:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

Kendiniz Deneyin →

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

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Not: Dizi dizinleri 0 ile başlar.

[0] ilk öğedir. [1] ikinci elementtir.

Dizi Öğesini Değiştirme

Bu ifade, arabalar'daki ilk öğenin değerini değiştirir:

cars[0] = "Opel";

Örnek

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

Kendiniz Deneyin →

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

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Bir Diziyi String'e Dönüştürme

toString() JavaScript yöntemi, bir diziyi bir diziye dönüştürür (virgülle ayrılmış) dizi değerleri dizesi.

Örnek

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

Sonuç :

Banana,Orange,Apple,Mango

Kendiniz Deneyin →

<!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>

Dizinin Tamamına Erişin

JavaScript ile dizinin tamamına diziye başvurularak erişilebilir. isim:

Örnek

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Kendiniz Deneyin →

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

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Diziler Nesnelerdir

Diziler özel bir nesne türüdür. JavaScript'teki typeof operatörü şunun için "object" değerini döndürür: diziler.

Ancak JavaScript dizileri en iyi şekilde diziler olarak tanımlanır.

Diziler "öğelerine" erişmek için sayıları kullanır. Bunda örnek, kişi[0] John'a döner:

Sıralamak :

const person = ["John", "Doe", 46];

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Arrays use numbers to access its elements.</p>

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

<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>

Nesneler "üyelerine" erişmek için adları kullanır. Bu örnekte, person.firstName John'a döner:

Nesne :

const person = {firstName:"John", lastName:"Doe", age:46};

Kendiniz Deneyin →

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

<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>

<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>

</body>
</html>

Dizi Öğeleri Nesne Olabilir

JavaScript değişkenleri nesneler olabilir. Diziler özel türde nesnelerdir.

Bu nedenle, farklı türde değişkenlere sahip olabilirsiniz. aynı Dizi.

Bir Dizide nesneleriniz olabilir. Bir Dizide işlevlere sahip olabilirsiniz. Yapabilirsiniz bir Dizide diziler var:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Dizi Özellikleri ve Yöntemleri

JavaScript dizilerinin gerçek gücü yerleşik dizi özellikleridir ve yöntemler:

cars.length   // Returns the number of elements
cars.sort()   // Sorts the array

Dizi yöntemleri sonraki bölümlerde ele alınacaktır.

Uzunluk Özelliği

Bir dizinin length özelliği, dizinin uzunluğunu (dizi sayısı) döndürür elementler).

Örnek

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

Kendiniz Deneyin →

<!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>

length özelliği her zaman en yüksek dizi indeksinden bir fazladır.

İlk Dizi Öğesine Erişim

Örnek

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

Kendiniz Deneyin →

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

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

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

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

</body>
</html>

Son Dizi Öğesine Erişim

Örnek

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

Kendiniz Deneyin →

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

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

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

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

</body>
</html>

Döngü Dizisi Elemanları

Bir dizide döngü oluşturmanın bir yolu, for döngüsünü kullanmaktır:

Örnek

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

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text 
  += "</ul>";

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

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

</body>
</html>

Ayrıca Array.forEach() işlevini de kullanabilirsiniz:

Örnek

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

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
  
function 
  myFunction(value) {
  
 text += "<li>" + value + "</li>";
}

Kendiniz Deneyin →

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

<p>Call a function for each array element:</p>

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

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

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

Dizi Öğeleri Ekleme

Bir diziye yeni bir öğe eklemenin en kolay yolu Push() yöntemini kullanmaktır:

Örnek

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

Kendiniz Deneyin →

<!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>

<button onclick="myFunction()">Try it</button>

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

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

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

length özelliği kullanılarak bir diziye yeni öğe de eklenebilir:

Örnek

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits

Kendiniz Deneyin →

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

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

<button onclick="myFunction()">Try it</button>

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

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

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

UYARI !
<p>Yüksek indeksli öğelerin eklenmesi dizide tanımsız "delikler" oluşturabilir:

Örnek

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits

Kendiniz Deneyin →

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

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

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

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

let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}

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

</body>
</html>

İlişkisel Diziler

Birçok programlama dili, adlandırılmış dizinlere sahip dizileri destekler.

Adlandırılmış indekslere sahip dizilere ilişkisel denir diziler (veya karmalar).

JavaScript, adlandırılmış dizinlere sahip dizileri desteklemez.

JavaScript'te diziler her zaman numaralandırılmış dizinleri kullanır.

Örnek

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"

Kendiniz Deneyin →

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

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

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

UYARI!!
Adlandırılmış dizinler kullanırsanız, JavaScript diziyi bir nesneye göre yeniden tanımlayacaktır.

Bundan sonra, bazı dizi yöntemleri ve özellikleri yanlış sonuçlar üretecektir. sonuçlar.

Örnek:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Will return 0
person[0];         // Will return undefined

Kendiniz Deneyin →

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

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

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

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

Diziler ve Nesneler Arasındaki Fark

JavaScript'te diziler, numaralandırılmış dizinleri kullanır.

JavaScript'te nesneler adlandırılmış dizinleri kullanır.

Diziler, numaralandırılmış dizinlere sahip özel bir tür nesnedir.

Diziler Ne Zaman Kullanılır? Nesneler ne zaman kullanılır?

JavaScript ilişkisel dizileri desteklemez.
Öğe adlarının olmasını istediğinizde nesneleri kullanmalısınız. dizeler (metin).
Öğe adlarının olmasını istediğinizde dizileri kullanmalısınız. sayılar.

JavaScript yeni Dizi()

JavaScript'te yerleşik bir dizi oluşturucusu new Array() bulunur.

Ancak bunun yerine güvenle [] komutunu kullanabilirsiniz.

Bu iki farklı ifadenin her ikisi de, noktalar adında yeni bir boş dizi oluşturur:

const points = new Array();
const points = [];

Bu iki farklı ifadenin her ikisi de 6 sayı içeren yeni bir dizi oluşturur:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>

<p>Avoid using new Array(). Use [] instead.</p>

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

<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

new anahtar kelimesi bazı beklenmeyen sonuçlara yol açabilir:

// Create an array with three elements:
const points = new Array(40, 100, 1);

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with three elements.</p>

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

<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with two elements:
const points = new Array(40, 100);

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with two elements.</p>

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

<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with one element ???
const points = new Array(40);

Kendiniz Deneyin →

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

<p>Avoid using new Array().</p>

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

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

Yaygın Bir Hata

const points = [40];

şununla aynı değil:

const points = new Array(40);

// Create an array with one element:
const points = [40];

Kendiniz Deneyin →

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

<p>Create an Array with one element.</p>

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

<script>
var points = [40];
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with 40 undefined elements:
const points = new Array(40);

Kendiniz Deneyin →

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

<p>Avoid using new Array().</p>

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

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

Bir Dizi Nasıl Tanınır?

Sık sorulan bir soru şudur: Bir değişkenin dizi olup olmadığını nasıl anlarım?

Sorun şu ki, JavaScript operatörü typeof şunu döndürüyor "nesne":

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The typeof Operator</h2>

<p>The typeof operator, when used on an array, returns object:</p>

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

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

</body>
</html>

Typeof operatörü nesneyi döndürür çünkü bir JavaScript dizisi bir nesne.

Çözüm 1:

Bu sorunu çözmek için ECMAScript 5 (JavaScript 2009) yeni bir yöntem Array.isArray() tanımladı:

Array.isArray(fruits);

Kendiniz Deneyin →

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

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

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

</body>
</html>

Çözüm 2:

instanceof operatörü, bir nesne oluşturulursa true sonucunu döndürür belirli bir kurucu tarafından:

const fruits = ["Banana", "Orange", "Apple"];
    
fruits instanceof Array;

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>

<p>The instanceof operator returns true when used on an array:</p>

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

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

</body>
</html>

Tam Dizi Referansı

Array referansının tamamı için şu adrese gidin:

JavaScript Dizi Referansını Tamamlayın.

Referans tüm Dizilerin açıklamalarını ve örneklerini içerir özellikleri ve yöntemleri.