Javascript ES6
ECMAScript 2015 adalah revisi besar kedua untuk JavaScript.
ECMAScript 2015 juga dikenal sebagai ES6 dan ECMAScript 6.
Bab ini menjelaskan fitur terpenting ES6.
Fitur Baru di ES6
- Kata kunci biarkan
- Kata kunci const
- Fungsi Panah
- Untuk/dari
- Objek Peta
- Tetapkan Objek
- Kelas
- janji
- Simbol
- Parameter Default
- Parameter Istirahat Fungsi
- String.termasuk()
- String.mulaiDengan()
- String.berakhirDengan()
- Array.dari()
- Kunci larik()
- Cari larik()
- Array temukanIndeks()
- Metode Matematika Baru
- Properti Nomor Baru
- Metode Angka Baru
- Metode Global Baru
- Objek Iterables.entries
- Modul JavaScript
Dukungan Peramban untuk ES6 (2015)
Safari 10 dan Edge 14 adalah browser pertama yang sepenuhnya mendukung ES6:
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
JavaScript mari
Kata letkunci memungkinkan Anda untuk mendeklarasikan variabel dengan cakupan blok.
Contoh
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Baca lebih lanjut tentang letdi bab: JavaScript Let .
Konstanta JavaScript
Kata constkunci memungkinkan Anda untuk mendeklarasikan sebuah konstanta (variabel JavaScript dengan nilai konstan).
Konstanta mirip dengan variabel let, hanya saja nilainya tidak dapat diubah.
Contoh
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Baca lebih lanjut tentang constdi bab: JavaScript Const .
Fungsi Panah
Fungsi panah memungkinkan sintaks pendek untuk menulis ekspresi fungsi.
Anda tidak memerlukan functionkata kunci, returnkata kunci, dan
tanda kurung kurawal .
Contoh
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Fungsi panah tidak memilikinya sendiri this. Mereka tidak cocok untuk mendefinisikan metode objek .
Fungsi panah tidak diangkat. Mereka harus didefinisikan sebelum digunakan.
Menggunakan const
lebih aman daripada menggunakan var, karena ekspresi fungsi selalu bernilai konstan.
Anda hanya dapat menghilangkan returnkata kunci dan tanda kurung kurawal jika fungsinya adalah pernyataan tunggal. Karena itu, mungkin kebiasaan yang baik untuk selalu menjaganya:
Contoh
const x = (x, y) => { return x * y };
Pelajari lebih lanjut tentang Fungsi Panah dalam bab: Fungsi Panah JavaScript .
Untuk/Dari Loop
Pernyataan JavaScript for/ofberulang melalui nilai-nilai dari objek yang dapat diubah.
for/of memungkinkan Anda mengulang struktur data yang dapat diubah seperti Array, Strings, Maps, NodeLists, dan banyak lagi.
Loop for/ofmemiliki sintaks berikut:
for (variable of iterable) {
// code block to be executed
}
variabel - Untuk setiap iterasi, nilai properti berikutnya diberikan ke variabel. Variabel dapat dideklarasikan dengan
const, let, atau var.
iterable - Objek yang memiliki properti iterable.
Mengulangi Array
Contoh
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Mengulangi sebuah String
Contoh
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Pelajari lebih lanjut di bab: JavaScript Loop For/In/Of .
Objek Peta JavaScript
Mampu menggunakan Objek sebagai kunci adalah fitur Peta yang penting.
Contoh
// 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);
Pelajari lebih lanjut tentang objek Peta di bab: JavaScript Map() .
Objek Set JavaScript
Contoh
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Pelajari lebih lanjut tentang Set objek dalam bab: JavaScript Set() .
Kelas JavaScript
Kelas JavaScript adalah template untuk Objek JavaScript.
Gunakan kata kunci classuntuk membuat kelas.
Selalu tambahkan metode bernama constructor():
Sintaksis
class ClassName {
constructor() { ... }
}
Contoh
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Contoh di atas membuat kelas bernama "Mobil".
Kelas memiliki dua properti awal: "nama" dan "tahun".
Kelas JavaScript bukan objek.
Ini adalah template untuk objek JavaScript.
Menggunakan Kelas
Saat Anda memiliki kelas, Anda dapat menggunakan kelas tersebut untuk membuat objek:
Contoh
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Pelajari lebih lanjut tentang kelas dalam bab: Kelas JavaScript .
Janji JavaScript
Janji adalah objek JavaScript yang menghubungkan "Kode Memproduksi" dan "Mengkonsumsi Kode".
"Memproduksi Kode" dapat memakan waktu dan "Mengkonsumsi Kode" harus menunggu hasilnya.
Sintaks Janji
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 */ }
);
Contoh Menggunakan Janji
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Pelajari lebih lanjut tentang Janji di bab: Janji JavaScript .
Tipe Simbol
Simbol JavaScript adalah tipe data primitif seperti Number, String, atau Boolean.
Ini mewakili pengidentifikasi "tersembunyi" unik yang tidak dapat diakses oleh kode lain secara tidak sengaja.
Misalnya, jika pembuat kode yang berbeda ingin menambahkan properti person.id ke objek orang milik kode pihak ketiga, mereka dapat mencampur nilai satu sama lain.
Menggunakan Symbol() untuk membuat pengidentifikasi unik, selesaikan masalah ini:
Contoh
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
Simbol selalu unik.
Jika Anda membuat dua simbol dengan deskripsi yang sama, mereka akan memiliki nilai yang berbeda.
Symbol("id") == Symbol("id") // false
Nilai Parameter Default
ES6 memungkinkan parameter fungsi memiliki nilai default.
Contoh
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
Parameter Istirahat Fungsi
Parameter rest (...) memungkinkan fungsi untuk memperlakukan sejumlah argumen yang tidak terbatas sebagai array:
Contoh
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.termasuk()
Metode includes()kembali truejika string berisi nilai tertentu, jika tidak false:
Contoh
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
String.mulaiDengan()
Metode startsWith()kembali true
jika string dimulai dengan nilai yang ditentukan, jika tidak false:
Contoh
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.berakhirDengan()
Metode endsWith()kembali true
jika string diakhiri dengan nilai yang ditentukan, jika tidak false:
Contoh
var text = "John Doe";
text.endsWith("Doe") // Returns true
Array.dari()
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