JavaScript ES5
ES5 olarak da bilinen ECMAScript 2009, JavaScript'in ilk büyük revizyonuydu.
Bu bölüm ES5'in en önemli özelliklerini açıklamaktadır.
ES5 Özellikleri
- "katı kullan"
- [ sayı ] dizi erişimi
- çok satırlı dizeler
- dize.trim()
- Array.isArray()
- Her biri için dizi()
- Dizi haritası()
- Dizi filtresi()
- Dizi azaltma()
- Dizi azaltmaRight()
- Her dizi ()
- Bazılarını dizile()
- Dizi indexOf()
- dizi lastIndexOf()
- JSON.parse()
- JSON.stringify()
- tarih.şimdi()
- ISOString() tarihi
- Tarihe JSON()
- Mülk alıcılar ve ayarlayıcılar
- Özellik adları olarak ayrılmış sözcükler
- nesne yöntemleri
- Nesne defineProperty()
- işlev.bind()
- Sondaki virgül
Tarayıcı Desteği
ES5tüm modern tarayıcılarda tam olarak desteklenir:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
"Sıkı kullanım" Direktifi
"use strict"JavaScript kodunun "katı modda" yürütülmesi gerektiğini tanımlar.
Katı mod ile, örneğin, bildirilmemiş değişkenleri kullanamazsınız.
Tüm programlarınızda katı modu kullanabilirsiniz. Bildirilmemiş değişkenleri kullanmanızı engellemek gibi daha temiz kod yazmanıza yardımcı olur.
"use strict"sadece bir dize ifadesidir. Eski tarayıcılar anlamazlarsa hata vermezler.
JS Strict Mode'da daha fazlasını okuyun .
Dizelerde Mülk Erişimi
Yöntem charAt(), bir dizgede belirtilen bir dizindeki (konumdaki) karakteri döndürür:
Örnek
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5, dizelerde mülk erişimine izin verir:
Örnek
var str = "HELLO WORLD";
str[0]; // returns H
Dize üzerindeki mülk erişimi biraz tahmin edilemez olabilir.
JS String Methods'da daha fazlasını okuyun .
Birden Çok Satır Üzerindeki Dizeler
ES5, ters eğik çizgi ile kaçarsa, dize değişmezlerinin birden çok satırda kullanılmasına izin verir:Örnek
"Hello \
Dolly!";
\ yönteminin evrensel desteği olmayabilir.
Daha eski tarayıcılar, ters eğik çizginin etrafındaki boşluklara farklı davranabilir.
Bazı eski tarayıcılar, \ karakterinin arkasında boşluk bırakılmasına izin vermez.
Bir dize değişmezini ayırmanın daha güvenli bir yolu, dize eklemeyi kullanmaktır:
Örnek
"Hello " +
"Dolly!";
Özellik Adları Olarak Ayrılmış Sözcükler
ES5, özellik adları olarak ayrılmış sözcüklere izin verir:
Nesne Örneği
var obj = {name: "John", new: "yes"}
Dize kırpma()
Yöntem trim(), bir dizgenin her iki tarafındaki boşlukları kaldırır.
Örnek
var str = " Hello World! ";
alert(str.trim());
JS String Methods'da daha fazlasını okuyun .
Array.isArray()
Yöntem isArray(), bir nesnenin bir dizi olup olmadığını kontrol eder.
Örnek
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
JS Dizilerinde daha fazlasını okuyun .
Her biri için dizi()
Yöntem forEach(), her dizi öğesi için bir işlevi bir kez çağırır.
Örnek
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
JS Dizi Yineleme Yöntemleri'nde daha fazla bilgi edinin .
Dizi haritası()
Bu örnek, her dizi değerini 2 ile çarpar:
Örnek
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
JS Dizi Yineleme Yöntemleri'nde daha fazla bilgi edinin .
Dizi filtresi()
Bu örnek, değeri 18'den büyük olan öğelerden yeni bir dizi oluşturur:
Örnek
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
JS Dizi Yineleme Yöntemleri'nde daha fazla bilgi edinin .
Dizi azaltma()
Bu örnek, bir dizideki tüm sayıların toplamını bulur:
Örnek
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
JS Dizi Yineleme Yöntemleri'nde daha fazla bilgi edinin .
Dizi azaltmaRight()
Bu örnek ayrıca bir dizideki tüm sayıların toplamını da bulur:
Örnek
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
JS Dizi Yineleme Yöntemleri'nde daha fazla bilgi edinin .
Her dizi ()
Bu örnek, tüm değerlerin 18'in üzerinde olup olmadığını kontrol eder:
Örnek
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
JS Dizi Yineleme Yöntemleri'nde daha fazla bilgi edinin .
Bazılarını dizile()
Bu örnek, bazı değerlerin 18'in üzerinde olup olmadığını kontrol eder:
Örnek
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
JS Dizi Yineleme Yöntemleri'nde daha fazla bilgi edinin .
Dizi indexOf()
Bir öğe değeri için bir dizi arayın ve konumunu döndürür.
Örnek
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
JS Dizi Yineleme Yöntemleri'nde daha fazla bilgi edinin .
dizi lastIndexOf()
lastIndexOf()ile aynıdır indexOf(), ancak dizinin sonundan arama yapar.
Örnek
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
JS Dizi Yineleme Yöntemleri'nde daha fazla bilgi edinin .
JSON.parse()
JSON'un yaygın bir kullanımı, bir web sunucusundan veri almaktır.
Bu metin dizesini bir web sunucusundan aldığınızı düşünün:
'{"name":"John", "age":30, "city":"New York"}'
JavaScript işlevi JSON.parse(), metni bir JavaScript nesnesine dönüştürmek için kullanılır:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
JSON Eğitimimizde daha fazlasını okuyun .
JSON.stringify()
JSON'un yaygın bir kullanımı, bir web sunucusuna veri göndermektir.
Bir web sunucusuna veri gönderirken, verinin bir dize olması gerekir.
JavaScript'te bu nesneye sahip olduğumuzu hayal edin:
var obj = {name:"John", age:30, city:"New York"};
JSON.stringify()Bir dizeye dönüştürmek için JavaScript işlevini kullanın .
var myJSON = JSON.stringify(obj);
Sonuç, JSON gösterimini izleyen bir dize olacaktır.
myJSON artık bir dizgedir ve bir sunucuya gönderilmeye hazırdır:
Örnek
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
JSON Eğitimimizde daha fazlasını okuyun .
tarih.şimdi()
Date.now() returns the number of milliseconds since zero date (January 1.
1970 00:00:00 UTC).
Example
var timInMSs = Date.now();
Date.now() returns the same as getTime() performed on a Date object.
Learn more in JS Dates.
Date toISOString()
The toISOString() method converts a Date object to a string, using the ISO standard format:
Example
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
Date toJSON()
toJSON() converts a Date object into a string, formatted as a JSON date.
JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:
Example
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
Property Getters and Setters
ES5 lets you define object methods with a syntax that looks like getting or setting a property.
This example creates a getter for a property called fullName:
Example
// Create an object:
var person = {
firstName:
"John",
lastName : "Doe",
get
fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.fullName;
This example creates a setter and a getter for the language property:
Example
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.lang;
This example uses a setter to secure upper case updates of language:
Example
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object:
document.getElementById("demo").innerHTML =
person.language;
Learn more about Gettes and Setters in JS Object Accessors
Object.defineProperty()
Object.defineProperty() is a new Object method in ES5.
It lets you define an object property and/or change a property's value and/or metadata.
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
Next example is the same code, except it hides the language property from enumeration:
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
This example creates a setter and a getter to secure upper case updates of language:
Example
/// Create an Object:
var person = {
firstName: "John",
lastName :
"Doe",
language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return
language },
set : function(value) { language = value.toUpperCase()}
});
// Change Language
person.language = "en";
// Display Language
document.getElementById("demo").innerHTML = person.language;
E5 Object Methods
ES5 added a lot of new Object Methods to JavaScript:
Managing Objects
// Create object with an existing object as prototype
Object.create(parent, donor)
// Adding or changing an object property
Object.defineProperty(object, property, descriptor)
// Adding or changing object properties
Object.defineProperties(object, descriptors)
// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)
// Returns all properties as an array
Object.getOwnPropertyNames(object)
// Accessing the prototype
Object.getPrototypeOf(object)
// Returns enumerable properties as an array
Object.keys(object)
Protecting Objects
// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)
// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)
// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)
Learn more in Object ECMAScript5.
Trailing Commas
ES5 allows trailing commas in object and array definitions:
Object Example
person = {
firstName: "John",
lastName: "
Doe",
age: 46,
}
Array Example
points = [
1,
5,
10,
25,
40,
100,
];
WARNING !!!
JSON does not allow trailing commas.
JSON Objects:
//
Allowed:
var person = '{"firstName":"John", "lastName":"Doe",
"age":46}'
JSON.parse(person)
// Not allowed:
var person = '{"firstName":"John",
"lastName":"Doe", "age":46,}'
JSON.parse(person)
JSON Arrays:
//
Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points =
[40, 100, 1, 5, 25, 10,]