JavaScript ES5

Apakah ECMAScript 5 adalah apa?

ECMAScript 5 juga disebut ES5 dan ECMAScript 2009.

Bagian ini memperkenalkan beberapa fitur paling penting ES5.

Fitur ECMAScript 5

Ini adalah fitur baru yang dirilis pada tahun 2009:

  • "use strict" perintah
  • 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()
  • Properti Getter dan Setter
  • Properti dan Metode Objek Baru

Perubahan sintaks ECMAScript 5

  • Akses properti string [ ]
  • Koma di akhir ekspresi array dan objek
  • Lambang string berbaris
  • Kata-reservasi yang digunakan sebagai nama properti

"use strict" perintah

"use strict"Definisi kode JavaScript harus dijalankan dalam mode 'strict'."

Contoh, dengan mode yang ketat, variabel yang belum dideklarasikan tidak dapat digunakan.

Anda dapat menggunakan mode yang ketat di semua program. Ini dapat membantu Anda menulis kode yang lebih jelas, seperti melindungi Anda dari penggunaan variabel yang belum dideklarasikan.

"use strict"Hanya ekspresi string. Browser yang lama yang tidak mengerti mereka tidak akan melempar kesalahan."

Baca Mode JS yang ketat Baca lebih banyak di sini.

String.trim()

String.trim() Menghapus spasi di kedua ujung string.

Contoh

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

Coba Sendiri

Silakan Metode String JS Baca lebih banyak di sini.

Array.isArray()

isArray() Method ini memeriksa apakah objek adalah array.

Contoh

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

Coba Sendiri

Silakan JS Array Baca lebih banyak di sini.

Array.forEach()

forEach() Method ini dipanggil sekali untuk setiap elemen di dalam array.

Contoh

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

Coba Sendiri

Silakan Metode iterasi array JS pelajari lebih lanjut.

Array.map()

Contoh ini mengalikan setiap nilai di dalam array dengan 2:

Contoh

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

Coba Sendiri

Silakan Metode iterasi array JS pelajari lebih lanjut.

Array.filter()

Pada contoh ini, akan dibuat array baru dengan elemen yang nilai nya lebih besar dari 18:

Contoh

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

Coba Sendiri

Silakan Metode iterasi array JS pelajari lebih lanjut.

Array.reduce()

Contoh ini menentukan total seluruh bilangan di dalam array:

Contoh

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

Coba Sendiri

Silakan Metode iterasi array JS pelajari lebih lanjut.

Array.reduceRight()

Contoh ini juga untuk menentukan total seluruh bilangan dalam array：

Contoh

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

Coba Sendiri

Silakan Metode iterasi array JS pelajari lebih lanjut.

Array.every()

Contoh ini memeriksa apakah semua nilai melebihi 18：

Contoh

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

Coba Sendiri

Silakan Metode iterasi array JS pelajari lebih lanjut.

Array.some()

Contoh ini memeriksa apakah beberapa nilai melebihi 18：

Contoh

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

Coba Sendiri

Silakan Metode iterasi array JS pelajari lebih lanjut.

Array.indexOf()

Mencari nilai elemen dalam array dan mengembalikan posisinya：

Contoh

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

Coba Sendiri

Silakan Metode iterasi array JSpelajari lebih lanjut.

Array.lastIndexOf()

Array.lastIndexOf() Dengan Array.indexOf() Dengan demikian, tetapi mencari dari ujung akhir array.

Contoh

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

Coba Sendiri

Silakan Metode iterasi array JS pelajari lebih lanjut.

JSON.parse()

Penggunaan umum JSON adalah untuk menerima data dari server Web。

Buat gambaran, Anda menerima string teks ini dari server Web：

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

Fungsi JavaScript JSON.parse() Digunakan untuk mengonversi teks ke objek JavaScript：

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

Coba Sendiri

Silakan kunjungi Panduan JSON pelajari lebih lanjut.

JSON.stringify()

Penggunaan umum JSON adalah untuk mengirim data ke server Web。

Ketika mengirim data ke server Web, data harus berupa string。

Buat gambaran, kami memiliki objek ini di JavaScript：

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

Gunakan fungsi JavaScript JSON.stringify() untuk mengonversikannya ke string。

var myJSON = JSON.stringify(obj);

Hasilnya akan menjadi string yang mengikuti standar representasi JSON。

myJSON sekarang adalah string, siap untuk dikirim ke server：

Contoh

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

Coba Sendiri

Silakan kunjungi Panduan JSON pelajari lebih lanjut.

Date.now()

Date.now() mengembalikan milidetik sejak tanggal nol (1 Januari 1970 00:00:00:00).

Contoh

var timInMSs = Date.now();

Coba Sendiri

Date.now() mengembalikan nilai yang sama seperti yang dijalankan di objek Date dengan getTime().

Silakan Tanggal JS pelajari lebih lanjut.

Properti Getter dan Setter

ES5 memungkinkan Anda menggunakan sintaks yang mirip dengan mendapatkan atau menetapkan properti untuk mendefinisikan metode objek.

Contoh ini membuat properti bernama fullName dengan getter:

Contoh

// Membuat objek:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Gunakan getter untuk menampilkan data dari objek:
document.getElementById("demo").innerHTML = person.fullName;

Coba Sendiri

Contoh ini membuat properti bahasa dengan setter dan getter:

Contoh

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  ,
  set lang(value) {
    this.language = value;
  }
});
// Gunakan setter untuk menetapkan properti objek:
person.lang = "en";
// Gunakan getter untuk menampilkan data dari objek:
document.getElementById("demo").innerHTML = person.lang;

Coba Sendiri

Contoh ini menggunakan setter untuk memastikan pembaruan huruf besar untuk bahasa:

Contoh

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Gunakan setter untuk menetapkan properti objek:
person.lang = "en";
// Tampilkan data dari objek:
document.getElementById("demo").innerHTML = person.language;

Coba Sendiri

Silakan Pembacaan Objek JS pelajari lebih lanjut tentang Getter dan Setter di sini.

Properti dan Metode Objek Baru

Object.defineProperty() adalah metode objek baru di ES5.

Ini memungkinkan Anda mendefinisikan properti objek dan/atau mengubah nilai dan/atau metadata properti.

Contoh

// Membuat objek:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// Mengubah properti:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable: true
  configurable : true
});
// Mengevaluasi properti
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Coba Sendiri

Contoh berikut adalah kode yang sama, tetapi menyembunyikan properti bahasa di dalam enumerasi:

Contoh

// Membuat objek:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// Mengubah properti:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Mengevaluasi properti
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Coba Sendiri

// Contoh ini membuat setter dan getter untuk memastikan pembaruan huruf besar untuk bahasa:

Contoh

// Membuat objek:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO"
});
// Mengubah properti:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Mengubah bahasa
person.language = "en";
// Menampilkan bahasa
document.getElementById("demo").innerHTML = person.language;

Coba Sendiri

Metode baru objek ES5

ECMAScript 5 menambahkan banyak metode baru objek untuk JavaScript:

// Menambahkan atau mengubah properti objek
Object.defineProperty(object, property, descriptor)
// Menambahkan atau mengubah banyak properti objek
Object.defineProperties(object, descriptors)
// Akses properti
Object.getOwnPropertyDescriptor(object, property)
// Mengembalikan semua properti sebagai array
Object.getOwnPropertyNames(object)
// Mengembalikan properti yang dapat dievaluasi sebagai array
Object.keys(object)
// Akses prototype
Object.getPrototypeOf(object)
// Mencegah menambahkan properti ke objek
Object.preventExtensions(object)
// Jika dapat menambahkan properti ke objek, kembalikan true
Object.isExtensible(object)
// Mencegah perubahan properti objek (tidak nilai)
Object.seal(object)
// Jika objek disegel, kembalikan true
Object.isSealed(object)
// Mencegah perubahan apapun terhadap objek
Object.freeze(object)
// Jika objek diseklarasi, kembalikan true
Object.isFrozen(object)

Silakan objek ECMAScript5 pelajari lebih lanjut.

akses properti string

charAt() metode mengembalikan karakter yang ditentukan indeks (lokasi) di dalam string:

Contoh

var str = "HELLO WORLD";
str.charAt(0);            // Mengembalikan H

Coba Sendiri

ECMAScript 5 mengizinkan akses properti string:

Contoh

var str = "HELLO WORLD";
str[0];                   // Mengembalikan H

Coba Sendiri

akses properti string dapat diharapkan tidak terlalu

Silakan Metode String JS pelajari lebih lanjut.

Koma di Akhir (Trailing Commas)

ECMAScript 5 mengizinkan penggunaan koma di akhir dalam definisi objek dan daftar:

Contoh Object

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

Contoh Array

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

Peringatan！！！

Internet Explorer 8 akan gagal.

JSON tidak mengizinkan koma di akhir.

Objek JSON：

// Diizinkan：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// Tidak diizinkan：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

Daftar JSON：

// Diizinkan：
points = [40, 100, 1, 5, 25, 10]
// Tidak diizinkan：
points = [40, 100, 1, 5, 25, 10,]

Teks string berbaris

Jika menggunakan backslash untuk mengesampingkan, ECMAScript 5 mengijinkan teks string berbaris (literals):

Contoh

"Hello \
Kitty!";

Coba Sendiri

Metode backslash mungkin belum disokong secara umum.

Browser yang lebih lama mungkin menangani spasi di sekitar backslash dengan cara yang berbeda.

Beberapa browser lama tidak mengizinkan spasi setelah karakter backslash.

Cara yang lebih aman untuk memecah teks string adalah menggunakan penambahan string:

Contoh

"Hello " + 
"Kitty!";

Coba Sendiri

Kata Rezervasi sebagai Nama Properti

ECMAScript 5 mengijinkan kata rezervasi sebagai nama properti:

Contoh Obek

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

Coba Sendiri

Dukungan Browser ES5 (ECMAScript 5)

Chrome 23, IE 10, dan Safari 6 adalah browser pertama yang sepenuhnya mendukung ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
September 2012 September 2012 April 2013 Juli 2012 Juli 2013