JavaScript ES5

ECMAScript 5 nedir?

ECMAScript 5 aynı zamanda ES5 ve ECMAScript 2009 olarak da bilinir.

Bu bölüm, ES5'nin en önemli özelliklerini tanıtır.

ECMAScript 5 Özellikleri

Bu, 2009 yılında yayınlanan yeni özelliklerdir:

  • "use strict" talimatı
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • Özellik Getter ve Setter
  • Yeni nesne özellikleri ve yöntemleri

ECMAScript 5 dilbilgisi değişiklikleri

  • Dizge özelliklerine [ ] ile erişim
  • Dizi ve nesne kalıplarındaki son virgül
  • Çok satırlı dizge kalıpları
  • Özellikle属性 adı olarak kullanılan saklı kelimeler

"use strict" talimatı

"use strict"

Örneğin, sıkı modda tanımlanmamış değişkenler kullanılamaz.

Tüm programlarınızda sıkı modu kullanabilirsiniz. Bu, daha net kod yazmanıza yardımcı olabilir, örneğin, tanımlanmamış değişkenleri kullanmanızı engeller.

"use strict"use strict" sadece bir dizgi ifadeidir. Eski tarayıcılar anlayamadıklarında hata vermez.

Okuyun lütfen JS Sıkı Modu daha fazla içerik için burayı okuyun.

String.trim()

String.trim() Dizgi iki uçtaki boşluk karakterlerini siler.

Örnek

var str = "       Hello World!        ";
alert(str.trim());

Kişisel Deneyim

Lütfen JS dize yöntemleri daha fazla bilgi için burayı okuyun.

Array.isArray()

isArray() Bu method, nesnenin dizisi olup olmadığını kontrol eder.

Örnek

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

Kişisel Deneyim

Lütfen JS Dizileri daha fazla bilgi için burayı okuyun.

Array.forEach()

forEach() Her bir dizideki elemana bir kez fonksiyon çağrılır.

Örnek

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Kişisel Deneyim

Lütfen JS dizi döngü yöntemleri daha fazla bilgi için öğrenin.

Array.map()

Bu örnek, dizideki her bir değer iki katına çıkarır:

Örnek

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Kişisel Deneyim

Lütfen JS dizi döngü yöntemleri daha fazla bilgi için öğrenin.

Array.filter()

Bu örnek, 18'den büyük olan değerlerin yeni bir dizisi oluşturur:

Örnek

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Kişisel Deneyim

Lütfen JS dizi döngü yöntemleri daha fazla bilgi için öğrenin.

Array.reduce()

Bu örnek, dizideki tüm sayıların toplamını belirler:

Örnek

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Kişisel Deneyim

Lütfen JS dizi döngü yöntemleri daha fazla bilgi için öğrenin.

Array.reduceRight()

Bu örnek, dizideki tüm sayıların toplamını belirlemek içindir:

Örnek

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Kişisel Deneyim

Lütfen JS dizi döngü yöntemleri daha fazla bilgi için öğrenin.

Array.every()

Bu örnek, tüm değerlerin 18'den büyük olup olmadığını kontrol eder：

Örnek

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Kişisel Deneyim

Lütfen JS dizi döngü yöntemleri daha fazla bilgi için öğrenin.

Array.some()

Bu örnek, bazı değerlerin 18'den büyük olup olmadığını kontrol eder：

Örnek

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
  return value > 18;
}

Kişisel Deneyim

Lütfen JS dizi döngü yöntemleri daha fazla bilgi için öğrenin.

Array.indexOf()

Dizideki belirli bir elemanın değerini arar ve konumunu döndürür：

Örnek

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Kişisel Deneyim

Lütfen JS dizi döngü yöntemleridaha fazla bilgi için öğrenin.

Array.lastIndexOf()

Array.lastIndexOf() ile Array.indexOf() Benzer, ancak dizinin sonundan başlayarak arama yapar。

Örnek

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Kişisel Deneyim

Lütfen JS dizi döngü yöntemleri daha fazla bilgi için öğrenin.

JSON.parse()

JSON'un en yaygın kullanım alanlarından biri, Web sunucusundan veri almakdır。

Düşünün ki, Web sunucusundan bu metin dizisini alırsınız：

'{"name":"Bill", "age":62, "city":"Seatle"}'

JavaScript Fonksiyonları JSON.parse() Metni JavaScript nesnesine dönüştürmek için kullanılır：

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

Kişisel Deneyim

Lütfen bizim JSON dersleri daha fazla bilgi için öğrenin.

JSON.stringify()

JSON'un en yaygın kullanım alanlarından biri, verileri Web sunucusuna göndermektir。

Verileri Web sunucusuna gönderirken, verilerin dize olmaları gerekmektedir。

Düşünün ki, JavaScript'te şu nesnemiz var：

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

Bu diziyi dizeye dönüştürmek için JavaScript fonksiyonu JSON.stringify() kullanın。

var myJSON = JSON.stringify(obj);

Sonuç, JSON gösterimine uyan bir dize olacaktır。

myJSON şimdi bir dize, sunucuya gönderilmeye hazırdır：

Örnek

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

Kişisel Deneyim

Lütfen bizim JSON dersleri daha fazla bilgi için öğrenin.

Date.now()

Date.now() yöntemi, 1970 yılının 1 Ocak tarihinden itibaren başlayan sıfır tarihinden bu yana milisaniye cinsinden sayıyı döner.

Örnek

var timInMSs = Date.now();

Kişisel Deneyim

Date.now() Date.now() yöntemi ile aynı sonuç döner.

Lütfen JS tarih daha fazla bilgi edinmek için burada öğrenin.

Özellik Getter ve Setter

ES5, nesne yöntemlerini tanımlamak için benzer bir alışveriş veya ayarlama özelliği kullanmanıza izin verir.

Bu örnek, fullName adlı özellik için bir getter:

Örnek

// Nesne oluşturma:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Getter kullanarak nesnenin verilerini göster:
document.getElementById("demo").innerHTML = person.fullName;

Kişisel Deneyim

Bu örnek, dil özelliği için bir setter ve getter:

Örnek

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// Setter kullanarak nesne özelliğini ayarlayın:
person.lang = "en";
// Getter kullanarak nesnenin verilerini göster:
document.getElementById("demo").innerHTML = person.lang;

Kişisel Deneyim

Bu örnek, dilin büyük harfe güncellenmesini sağlamak için setter kullanır:

Örnek

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Setter kullanarak nesne özelliğini ayarlayın:
person.lang = "en";
// Nesnenin verilerini göster:
document.getElementById("demo").innerHTML = person.language;

Kişisel Deneyim

Lütfen JS nesne erişicileri Getter ve Setter hakkında daha fazla bilgi edinmek için burada öğrenin.

Yeni nesne özellikleri ve yöntemleri

Object.defineProperty() ES5'teki yeni nesne yöntemidir.

Bu, nesne özelliklerini ve/ya özellik değerlerini ve/ya meta verilerini tanımlamanıza izin verir.

Örnek

// Nesne oluşturma:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Özellik değiştirme:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable: true,
  configurable : true
});
// Özellikleri dolaş
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Kişisel Deneyim

Bir sonraki örnek, aynı kodu ancak özelliği dolaşmada gizler:

Örnek

// Nesne oluşturma:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Özellik değiştirme:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Özellikleri dolaş
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Kişisel Deneyim

Bu örnek, dilin büyük harfe güncellenmesini sağlamak için bir setter ve getter oluşturur:

Örnek

// Nesne oluşturma:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
});
// Özellik değiştirme:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Dil değiştir
person.language = "en";
// Dil göster
document.getElementById("demo").innerHTML = person.language;

Kişisel Deneyim

ES5 yeni nesne yöntemleri

ECMAScript 5, JavaScript'e birçok yeni nesne yöntemi ekledi:

// Nesne özelliğini ekleyin veya değiştirin
Object.defineProperty(object, property, descriptor)
// Çok sayıda nesne özelliğini ekleyin veya değiştirin
Object.defineProperties(object, descriptors)
// Özellik erişimi
Object.getOwnPropertyDescriptor(object, property)
// Tüm özellikleri dizi olarak döndür
Object.getOwnPropertyNames(object)
// Daha fazla sayıda özelliği dizi olarak döndür
Object.keys(object)
// Erişim prototipi
Object.getPrototypeOf(object)
// Nesneye özellik eklemeyi önler
Object.preventExtensions(object)
// Nesneye özellik ekleyebilecekseniz true döndürür
Object.isExtensible(object)
// Nesne özelliklerine (değere değil) değişiklik yapmayı önler
Object.seal(object)
// Nesne kilitlenmişse true döndürür
Object.isSealed(object)
// Nesneye herhangi bir değişiklik yapmayı önler
Object.freeze(object)
// Nesne dondurulmuşsa true döndürür
Object.isFrozen(object)

Lütfen ECMAScript5 nesnesi daha fazla bilgi için öğrenin.

dize özelliklerine erişim

charAt() Yöntem, dizede belirtilen indeksi (konumu) döndürür:

Örnek

var str = "HELLO WORLD";
str.charAt(0);            // H döndürür

Kişisel Deneyim

ECMAScript 5 dize özelliklerine erişimi izin verir:

Örnek

var str = "HELLO WORLD";
str[0];                   // H döndürür

Kişisel Deneyim

dize özelliklerine erişim biraz öngörülebilir olmayabilir.

Lütfen JS dize yöntemleri daha fazla bilgi için öğrenin.

Sonlu virgül (Trailing Commas)

ECMAScript 5 nesneler ve diziler tanımlarında sonlu virgül kullanmayı izin verir:

Nesne örneği

person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 62,
}

Dizi örneği

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

Uyarı！！！

Internet Explorer 8 çöküşe geçecektir.

JSON sonlu virgül kullanamaz.

JSON nesnesi:

// İzin verilir:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)
// Yasaklanamaz:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON dizisi:

// İzin verilir:
points = [40, 100, 1, 5, 25, 10]
// Yasaklanamaz:
points = [40, 100, 1, 5, 25, 10,]

Çok satırlı dizgi

Eğer alt çizgi işaretini kullanarak yuvarlama yapılırsa, ECMAScript 5, çok satırlı dizgi metinlerini (doğrudan ifadeleri) çok satırlı olarak izin verir:

Örnek

"Hello \
Kitty!";

Kişisel Deneyim

Alt çizgi işareti yöntemi geniş bir destek görmeyebilir.

Daha eski tarayıcılar, alt çizgi işaretinin etrafındaki boşlukları farklı şekillerde işleyebilir.

Bazı eski tarayıcılar, alt çizgi işaretinin ardından boşlukları izin vermez.

Dizgi metnini parçalara ayırmak için daha güvenli bir yöntem, dizgi ekleme kullanmaktır:

Örnek

"Hello " + 
"Kitty!";

Kişisel Deneyim

Tutarlı Kelimeler Özellik Adı Olarak

ECMAScript 5, tutarlı kelimeleri özellik adı olarak kullanmayı izin verir:

Nesne Örneği

var obj = {name: "Bill", new: "yes"}

Kişisel Deneyim

ES5 (ECMAScript 5) Tarayıcı Desteği

Chrome 23, IE 10 ve Safari 6 ECMAScript 5'yi tam olarak destekleyen ilk tarayıcılar oldu:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
2012 Eylül 2012 Eylül 2013 Nisan 2012 Temmuz 2013 Temmuz