JavaScript ES5
ECMAScript 2009, juga dikenal sebagai ES5, adalah revisi besar pertama untuk JavaScript.
Bab ini menjelaskan fitur terpenting ES5.
Fitur ES5
- "gunakan yang ketat"
- Akses string[ nomor ]
- String multibaris
- String.trim()
- Array.isArray()
- Array untuk Setiap()
- Peta larik()
- Filter larik()
- pengurangan array()
- Array mengurangiKanan()
- Larik setiap()
- Larik beberapa()
- Indeks larikDari()
- Array LastIndexOf()
- JSON.parse()
- JSON.stringify()
- Tanggal.sekarang()
- Tanggal keISOString()
- Tanggal keJSON()
- Pengambil dan penyetel properti
- Kata-kata yang dicadangkan sebagai nama properti
- Metode objek
- Objek mendefinisikanProperti()
- Fungsi.mengikat()
- Tanda koma
Dukungan Peramban
ES5didukung penuh di semua browser modern:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
Arahan "gunakan ketat"
"use strict"mendefinisikan bahwa kode JavaScript harus dijalankan dalam "mode ketat".
Dengan mode ketat Anda dapat, misalnya, tidak menggunakan variabel yang tidak dideklarasikan.
Anda dapat menggunakan mode ketat di semua program Anda. Ini membantu Anda menulis kode yang lebih bersih, seperti mencegah Anda menggunakan variabel yang tidak dideklarasikan.
"use strict"hanyalah ekspresi string. Browser lama tidak akan membuat kesalahan jika mereka tidak memahaminya.
Baca lebih lanjut di JS Strict Mode .
Akses Properti di String
Metode charAt()mengembalikan karakter pada indeks tertentu (posisi) dalam string:
Contoh
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 memungkinkan akses properti pada string:
Contoh
var str = "HELLO WORLD";
str[0]; // returns H
Akses properti pada string mungkin sedikit tidak terduga.
Baca lebih lanjut di Metode String JS .
String Lebih Dari Beberapa Baris
ES5 memungkinkan literal string melalui beberapa baris jika lolos dengan garis miring terbalik:Contoh
"Hello \
Dolly!";
Metode \ mungkin tidak memiliki dukungan universal.
Peramban yang lebih lama mungkin memperlakukan spasi di sekitar garis miring terbalik secara berbeda.
Beberapa browser lama tidak mengizinkan spasi di belakang karakter \.
Cara yang lebih aman untuk memecah string literal, adalah dengan menggunakan penambahan string:
Contoh
"Hello " +
"Dolly!";
Kata Cadangan sebagai Nama Properti
ES5 memungkinkan kata-kata yang dicadangkan sebagai nama properti:
Contoh Objek
var obj = {name: "John", new: "yes"}
Pemangkasan string()
Metode trim()ini menghilangkan spasi putih dari kedua sisi string.
Contoh
var str = " Hello World! ";
alert(str.trim());
Baca lebih lanjut di Metode String JS .
Array.isArray()
Metode isArray()ini memeriksa apakah suatu objek adalah array.
Contoh
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
Baca lebih lanjut di JS Arrays .
Array untuk Setiap()
Metode forEach()ini memanggil fungsi sekali untuk setiap elemen array.
Contoh
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Pelajari lebih lanjut di Metode Iterasi Array JS .
Peta larik()
Contoh ini mengalikan setiap nilai array dengan 2:
Contoh
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Pelajari lebih lanjut di Metode Iterasi Array JS .
Filter larik()
Contoh ini membuat array baru dari elemen dengan nilai lebih besar dari 18:
Contoh
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Pelajari lebih lanjut di Metode Iterasi Array JS .
pengurangan array()
Contoh ini menemukan jumlah semua angka dalam array:
Contoh
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Pelajari lebih lanjut di Metode Iterasi Array JS .
Array mengurangiKanan()
Contoh ini juga menemukan jumlah semua angka dalam array:
Contoh
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Pelajari lebih lanjut di Metode Iterasi Array JS .
Larik setiap()
Contoh ini memeriksa apakah semua nilai lebih dari 18:
Contoh
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Pelajari lebih lanjut di Metode Iterasi Array JS .
Larik beberapa()
Contoh ini memeriksa apakah beberapa nilai lebih dari 18:
Contoh
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
Pelajari lebih lanjut di Metode Iterasi Array JS .
Indeks larikDari()
Cari array untuk nilai elemen dan kembalikan posisinya.
Contoh
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Pelajari lebih lanjut di Metode Iterasi Array JS .
Array LastIndexOf()
lastIndexOf()sama dengan indexOf(), tetapi mencari dari akhir array.
Contoh
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
Pelajari lebih lanjut di Metode Iterasi Array JS .
JSON.parse()
Penggunaan umum JSON adalah untuk menerima data dari server web.
Bayangkan Anda menerima string teks ini dari server web:
'{"name":"John", "age":30, "city":"New York"}'
Fungsi JavaScript JSON.parse()digunakan untuk mengubah teks menjadi objek JavaScript:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
Baca lebih lanjut di Tutorial JSON kami .
JSON.stringify()
Penggunaan umum JSON adalah untuk mengirim data ke server web.
Saat mengirim data ke server web, data harus berupa string.
Bayangkan kita memiliki objek ini di JavaScript:
var obj = {name:"John", age:30, city:"New York"};
Gunakan fungsi JavaScript JSON.stringify()untuk mengubahnya menjadi string.
var myJSON = JSON.stringify(obj);
Hasilnya akan menjadi string yang mengikuti notasi JSON.
myJSON sekarang menjadi string, dan siap dikirim ke server:
Contoh
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Baca lebih lanjut di Tutorial JSON kami .
Tanggal.sekarang()
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,]