Javascript ES6
ECMAScript 2015, JavaScript'in ikinci büyük revizyonuydu.
ECMAScript 2015, ES6 ve ECMAScript 6 olarak da bilinir.
Bu bölüm ES6'nın en önemli özelliklerini açıklamaktadır.
ES6'daki Yeni Özellikler
- let anahtar kelimesi
- const anahtar sözcüğü
- Ok Fonksiyonları
- için
- Harita Nesneleri
- Nesneleri Ayarla
- sınıflar
- vaatler
- sembol
- Varsayılan Parametreler
- Fonksiyon Dinlenme Parametresi
- String.includes()
- String.startsWith()
- String.endsWith()
- dizi.from()
- Dizi tuşları()
- Dizi bul()
- Dizi findIndex()
- Yeni Matematik Yöntemleri
- Yeni Numara Özellikleri
- Yeni Sayı Yöntemleri
- Yeni Küresel Yöntemler
- Yinelenebilirler Object.entries
- JavaScript Modülleri
ES6 için Tarayıcı Desteği (2015)
Safari 10 ve Edge 14, ES6'yı tam olarak destekleyen ilk tarayıcılardı:
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
JavaScript izin ver
Anahtar letkelime, blok kapsamı olan bir değişken tanımlamanıza izin verir.
Örnek
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Hakkında daha fazla bilgiyi letşu bölümde okuyun: JavaScript Let .
JavaScript sabiti
Anahtar constkelime, bir sabit (sabit bir değere sahip bir JavaScript değişkeni) tanımlamanıza izin verir.
Sabitler, değerin değiştirilememesi dışında let değişkenlerine benzer.
Örnek
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Hakkında daha fazla bilgiyi constşu bölümde okuyun: JavaScript Const .
Ok Fonksiyonları
Ok işlevleri, işlev ifadelerini yazmak için kısa bir sözdizimine izin verir.
functionAnahtar kelimeye, returnanahtar kelimeye ve
küme parantezlerine ihtiyacınız yoktur .
Örnek
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Ok fonksiyonlarının kendilerine ait this. Nesne yöntemlerini tanımlamak için pek uygun değiller .
Ok işlevleri kaldırılmaz. Kullanılmadan önce tanımlanmaları gerekir .
Bir işlev ifadesi her zaman sabit bir değer olduğundan, kullanmak kullanmaktan const
daha güvenlidir .var
returnAnahtar sözcüğü ve küme parantezlerini yalnızca işlev tek bir ifadeyse atlayabilirsiniz . Bu nedenle, bunları her zaman tutmak iyi bir alışkanlık olabilir:
Örnek
const x = (x, y) => { return x * y };
Ok İşlevleri hakkında daha fazla bilgiyi şu bölümden öğrenin: JavaScript Ok İşlevi .
For/Of Döngüsü
JavaScript for/ofifadesi, yinelenebilir nesnelerin değerleri arasında döngü yapar.
for/of Diziler, Dizeler, Haritalar, Düğüm Listeleri ve daha fazlası gibi yinelenebilir veri yapıları üzerinde döngü oluşturmanıza olanak tanır.
for/ofDöngü aşağıdaki sözdizimine sahiptir :
for (variable of iterable) {
// code block to be executed
}
değişken - Her yineleme için bir sonraki özelliğin değeri değişkene atanır. Değişkenconst , letveya ile bildirilebilir
var.
yinelenebilir - Yinelenebilir özelliklere sahip bir nesne.
Dizi Üzerinde Döngü Yapmak
Örnek
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Bir String Üzerinde Döngü Yapmak
Örnek
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Şu bölümde daha fazla bilgi edinin: JavaScript Döngüsü For/In/Of .
JavaScript Harita Nesneleri
Bir Nesneyi anahtar olarak kullanabilmek önemli bir Harita özelliğidir.
Örnek
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Şu bölümde Harita nesneleri hakkında daha fazla bilgi edinin: JavaScript Map() .
JavaScript Set Nesneleri
Örnek
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Şu bölümde Set nesneleri hakkında daha fazla bilgi edinin: JavaScript Set() .
JavaScript Sınıfları
JavaScript Sınıfları, JavaScript Nesneleri için şablonlardır.
classBir sınıf oluşturmak için anahtar kelimeyi kullanın .
Her zaman adında bir yöntem ekleyin constructor():
Sözdizimi
class ClassName {
constructor() { ... }
}
Örnek
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Yukarıdaki örnek, "Car" adında bir sınıf oluşturur.
Sınıfın iki başlangıç özelliği vardır: "name" ve "year".
JavaScript sınıfı bir nesne değildir .
JavaScript nesneleri için bir şablondur .
Sınıf Kullanmak
Bir sınıfınız olduğunda, nesneleri oluşturmak için sınıfı kullanabilirsiniz:
Örnek
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Şu bölümde sınıflar hakkında daha fazla bilgi edinin: JavaScript Sınıfları .
JavaScript Sözleri
Bir Söz, "Kod Üretmek" ve "Kod Tüketmek" arasında bağlantı kuran bir JavaScript nesnesidir.
"Kod Üretmek" biraz zaman alabilir ve "Kod Tüketmek" sonucu beklemek zorundadır.
Söz Sözdizimi
const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Bir Söz Kullanma Örneği
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Vaatler hakkında daha fazla bilgiyi şu bölümden öğrenin: JavaScript Vaatleri .
Sembol Türü
JavaScript Sembolü, Number, String veya Boolean gibi ilkel bir veri türüdür.
Başka hiçbir kodun yanlışlıkla erişemeyeceği benzersiz bir "gizli" tanımlayıcıyı temsil eder.
Örneğin, farklı kodlayıcılar bir üçüncü taraf koduna ait bir kişi nesnesine bir person.id özelliği eklemek isterse, birbirlerinin değerlerini karıştırabilirler.
Benzersiz bir tanımlayıcı oluşturmak için Symbol() kullanmak bu sorunu çözer:
Örnek
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
Semboller her zaman benzersizdir.
Aynı açıklamaya sahip iki sembol oluşturursanız, bunlar farklı değerlere sahip olacaktır.
Symbol("id") == Symbol("id") // false
Varsayılan Parametre Değerleri
ES6, işlev parametrelerinin varsayılan değerlere sahip olmasına izin verir.
Örnek
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
Fonksiyon Dinlenme Parametresi
rest parametresi (...), bir fonksiyonun belirsiz sayıda argümanı bir dizi olarak ele almasına izin verir:
Örnek
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
String.includes()
Yöntem includes(), truebir dize belirtilen bir değer içeriyorsa, aksi takdirde false:
Örnek
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
String.startsWith()
Bir
dize belirtilen bir değerle başlıyorsa startsWith()yöntem , aksi takdirde :truefalse
Örnek
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.endsWith()
Yöntem
, bir dize belirtilen bir değerle biterse endsWith()döner , aksi takdirde :truefalse
Örnek
var text = "John Doe";
text.endsWith("Doe") // Returns true
dizi.from()
The Array.from() method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys() method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find() method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex() method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
The Math.trunc() Method
Math.trunc(x) returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4
The Math.sign() Method
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x) returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true