JS Eğitimi

ANA SAYFA JS Giriş JS Nereye JS Çıktı JS İfadeleri JS Sözdizimi JS Yorumları JS Değişkenleri JS Let JS Sabiti JS Operatörleri JS Aritmetiği JS Ataması JS Veri Türleri JS Fonksiyonları JS Nesneleri JS Etkinlikleri JS Dizeleri JS Dize Yöntemleri JS Dizisi Arama JS Dize Şablonları JS Numaraları JS Numarası Yöntemleri JS Dizileri JS Dizi Yöntemleri JS Dizi Sıralaması JS Dizi Yineleme JS Dizi Sabiti JS Tarihleri JS Tarih Formatları JS Tarih Alma Yöntemleri JS Tarih Ayar Yöntemleri JS Matematik JS Rastgele JS Booleanları JS Karşılaştırmaları JS Koşulları JS Anahtarı JS Döngüsü İçin JS Döngüsü İçin JS Döngüsü JS Döngüsü JS Arası JS Yinelenebilirler JS Setleri JS Haritaları JS Türü JS Tipi Dönüşüm JS Bitsel JS Normal İfade JS Hataları JS Kapsamı JS Kaldırma JS Sıkı Modu Bu Anahtar Kelimeyi JS JS Ok İşlevi JS Sınıfları JS JSON JS Hata Ayıklama JS Stil Kılavuzu JS En İyi Uygulamaları JS Hataları JS Performansı JS Ayrılmış Kelimeler

JS Sürümleri

JS Sürümleri JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Kenar JS Geçmişi

JS Nesneleri

Nesne Tanımları Nesne Özellikleri Nesne Yöntemleri Nesne Görüntüleme Nesne Erişimcileri Nesne Oluşturucuları Nesne Prototipleri Nesne Yinelenebilirler Nesne Kümeleri Nesne Haritaları Nesne Referansı

JS Fonksiyonları

Fonksiyon Tanımları Fonksiyon Parametreleri Fonksiyon Çağırma İşlev Çağrısı İşlev Uygula Fonksiyon Kapanışları

JS Sınıfları

Sınıf Tanıtımı Sınıf Kalıtımı Sınıf Statik

JS Zaman uyumsuz

JS Geri Aramaları JS Asenkron JS Sözleri JS Zaman uyumsuz/Bekliyor

JS HTML DOM'si

DOM Tanıtımı DOM Yöntemleri DOM Belgesi DOM Öğeleri DOM HTML'si DOM Formları DOM CSS'si DOM Animasyonları DOM Olayları DOM Olay Dinleyicisi DOM Gezinme DOM Düğümleri DOM Koleksiyonları DOM Düğüm Listeleri

JS Tarayıcı Malzeme Listesi

JS Penceresi JS Ekranı JS Konumu JS Geçmişi JS Navigatörü JS Açılır Pencere Uyarısı JS Zamanlaması JS Çerezleri

JS Web API'leri

Web API'sine Giriş Web Formları API'sı Web Geçmişi API'si Web Depolama API'sı Web Çalışanı API'si Web Getirme API'sı Web Coğrafi Konum API'sı

JS AJAX

AJAX'a Giriş AJAX XMLHttp AJAX İsteği AJAX Yanıtı AJAX XML Dosyası AJAX PHP AJAX ASP AJAX Veritabanı AJAX Uygulamaları AJAX Örnekleri

JS JSON

JSON'a Giriş JSON Sözdizimi JSON'a karşı XML JSON Veri Türleri JSON Ayrıştırma JSON Stringify JSON Nesneleri JSON Dizileri JSON Sunucusu JSON PHP JSON HTML'si JSON JSONP

JS ve jQuery

jQuery Seçiciler jQuery HTML'si jQuery CSS'si jQuery DOM'si

JS Grafikleri

JS Grafikleri JS Tuval JS Konusu JS Chart.js JS Google Grafiği JS D3.js

JS Örnekleri

JS Örnekleri JS HTML DOM'si JS HTML Girişi JS HTML Nesneleri JS HTML Olayları JS Tarayıcı JS Editörü JS Alıştırmaları JS Testi JS Sertifikası

JS Referansları

JavaScript Nesneleri HTML DOM Nesneleri


JavaScript Dizileri

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

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

Neden Dizi Kullanmalı?

Bir öğe listeniz varsa (örneğin bir araba adları listesi), arabaları tek değişkenlerde depolamak şöyle görünebilir:

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

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

Çözüm bir dizi!

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


Dizi Oluşturma

Bir dizi değişmezi kullanmak, bir 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 .

Şu bölümde dizilerle const hakkında daha fazla bilgi edinin : JS Array Const .

Örnek

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

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

Örnek

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

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

Örnek

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

JavaScript Anahtar Kelimesini kullanma yeni

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

Örnek

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

Yukarıdaki iki örnek tam olarak aynı şeyi yapıyor.

Kullanmaya gerek yok new Array().

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



Dizi Öğelerine Erişim

Dizin öğesine, dizin numarasına başvurarak erişirsiniz :

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

Not: Dizi dizinleri 0 ile başlar.

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


Dizi Öğesini Değiştirme

Bu ifade, aşağıdaki ilk öğenin değerini değiştirir cars:

cars[0] = "Opel";

Örnek

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

Tam Diziye Erişin

JavaScript ile dizinin tamamına dizi adına başvurarak erişilebilir:

Örnek

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

Diziler Nesnelerdir

Diziler, nesnelerin özel bir türüdür. JavaScript'teki operatör , typeofdiziler için "nesne" döndürür.

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

Diziler , "öğelerine" erişmek için sayıları kullanır. Bu örnekte, person[0] John'u döndürür:

Sıralamak:

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

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

Nesne:

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

Dizi Elemanları Nesne Olabilir

JavaScript değişkenleri nesneler olabilir. Diziler nesnelerin özel türleridir.

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

Bir Array'de nesnelere sahip olabilirsiniz. Bir Dizide işlevlere sahip olabilirsiniz. Bir Dizide dizileriniz olabilir:

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

Dizi Özellikleri ve Yöntemleri

JavaScript dizilerinin gerçek gücü, yerleşik dizi özellikleri ve yöntemleridir:

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

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


uzunluk Özellik

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

Örnek

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

Özellik lengthher zaman en yüksek dizi dizininden bir fazladır.


İlk Dizi Öğesine Erişim

Örnek

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

Son Dizi Öğesine Erişim

Örnek

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

Döngü Dizi Elemanları

Bir dizide dolaşmanın bir yolu, bir fordöngü 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>";

Şu işlevi de kullanabilirsiniz Array.forEach():

Örnek

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

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

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

Dizi Elemanları Ekleme

Bir diziye yeni eleman eklemenin en kolay yolu şu push()yöntemi kullanmaktır:

Örnek

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

lengthŞu özellik kullanılarak bir diziye yeni eleman da eklenebilir :

Örnek

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

UYARI !

Yüksek indeksli elemanlar eklemek, bir dizide tanımsız "delikler" oluşturabilir:

Örnek

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

ilişkisel diziler

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

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

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

JavaScript'te diziler her zaman numaralı 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"

UYARI !!
Adlandırılmış dizinler kullanırsanız, JavaScript diziyi bir nesne olarak yeniden tanımlar.

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

 Örnek:

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

Diziler ve Nesneler Arasındaki Fark

JavaScript'te diziler numaralı dizinleri kullanır .  

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

Diziler, numaralandırılmış dizinleri olan özel bir nesne türüdür.


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

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

JavaScript yeni Dizi()

JavaScript'in yerleşik bir dizi yapıcısı vardır new Array().

Ancak bunun yerine güvenle kullanabilirsiniz [].

Bu iki farklı ifade, 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];

Anahtar newkelime bazı beklenmedik sonuçlar üretebilir:

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

Yaygın Bir Hata

const points = [40];

ile aynı değildir:

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

Dizi Nasıl Tanınır?

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

The problem is that the JavaScript operator typeof returns "object":

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

The typeof operator returns object because a JavaScript array is an object.

Solution 1:

To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():

Array.isArray(fruits);

Solution 2:

The instanceof operator returns true if an object is created by a given constructor:

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

fruits instanceof Array;

Complete Array Reference

For a complete Array reference, go to our:

Complete JavaScript Array Reference.

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Exercise:

Get the value "Volvo" from the cars array.

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