JavaScript ES5
ECMAScript 2009 หรือที่รู้จักในชื่อ ES5 เป็นการแก้ไขครั้งใหญ่ครั้งแรกของ JavaScript
บทนี้อธิบายคุณลักษณะที่สำคัญที่สุดของ ES5
คุณสมบัติของ ES5
- "ใช้อย่างเข้มงวด"
- การเข้าถึง สตริง[ หมายเลข ]
- สตริงหลายบรรทัด
- สตริง. trim()
- Array.isArray()
- อาร์เรย์ forEach()
- แผนที่อาร์เรย์()
- ตัวกรองอาร์เรย์ ()
- อาร์เรย์ลด ()
- อาร์เรย์ reduceRight()
- อาร์เรย์ทุก ()
- อาร์เรย์บาง()
- อาร์เรย์ indexOf()
- อาร์เรย์ lastIndexOf()
- JSON.parse()
- JSON.stringify()
- วันที่.ตอนนี้()
- วันที่ถึง ISOString()
- วันที่ถึง JSON()
- ผู้รับและ setters ทรัพย์สิน
- คำสงวนเป็นชื่อคุณสมบัติ
- วิธีการวัตถุ
- วัตถุ defineProperty()
- ฟังก์ชั่นผูก ()
- เครื่องหมายจุลภาคต่อท้าย
รองรับเบราว์เซอร์
ES5 ได้รับการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์ที่ทันสมัยทั้งหมด:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
คำสั่ง "ใช้อย่างเข้มงวด"
"use strict" กำหนดว่าควรรันโค้ด JavaScript ใน "โหมดเข้มงวด"
ด้วยโหมดเข้มงวด คุณสามารถยกตัวอย่างเช่น ไม่ใช้ตัวแปรที่ไม่ได้ประกาศ
คุณสามารถใช้โหมดเข้มงวดได้ในทุกโปรแกรมของคุณ ช่วยให้คุณเขียนโค้ดที่สะอาดขึ้น เช่น ป้องกันไม่ให้คุณใช้ตัวแปรที่ไม่ได้ประกาศ
"use strict"เป็นเพียงนิพจน์สตริง เบราว์เซอร์เก่าจะไม่แสดงข้อผิดพลาดหากไม่เข้าใจ
อ่านเพิ่มเติมในJS Strict Mode
การเข้าถึงคุณสมบัติบนสตริง
เมธอดส่งคืน อักขระcharAt()ที่ดัชนี (ตำแหน่ง) ที่ระบุในสตริง:
ตัวอย่าง
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 อนุญาตให้เข้าถึงคุณสมบัติบนสตริง:
ตัวอย่าง
var str = "HELLO WORLD";
str[0]; // returns H
การเข้าถึงพร็อพเพอร์ตี้บนสตริงอาจคาดเดาไม่ได้เล็กน้อย
อ่านเพิ่มเติมในJS String Methods
สตริงหลายบรรทัด
ES5 อนุญาตให้ใช้ตัวอักษรสตริงในหลายบรรทัดหากใช้ Escape ด้วยแบ็กสแลช:ตัวอย่าง
"Hello \
Dolly!";
วิธี \ อาจไม่มีการสนับสนุนสากล
เบราว์เซอร์รุ่นเก่าอาจปฏิบัติต่อช่องว่างรอบ ๆ แบ็กสแลชต่างกัน
เบราว์เซอร์รุ่นเก่าบางตัวไม่อนุญาตให้มีช่องว่างหลังอักขระ \
วิธีที่ปลอดภัยกว่าในการแยกตัวอักษรสตริงคือการใช้การบวกสตริง:
ตัวอย่าง
"Hello " +
"Dolly!";
คำสงวนเป็นชื่อคุณสมบัติ
ES5 อนุญาตให้ใช้คำสงวนเป็นชื่อคุณสมบัติ:
ตัวอย่างวัตถุ
var obj = {name: "John", new: "yes"}
ตัดแต่งสตริง()
วิธี การtrim()ลบช่องว่างจากทั้งสองด้านของสตริง
ตัวอย่าง
var str = " Hello World! ";
alert(str.trim());
อ่านเพิ่มเติมในJS String Methods
Array.isArray()
วิธี การisArray()ตรวจสอบว่าวัตถุเป็นอาร์เรย์หรือไม่
ตัวอย่าง
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
อ่านเพิ่มเติมในJS Arrays
อาร์เรย์ forEach()
วิธี การforEach()เรียกใช้ฟังก์ชันหนึ่งครั้งสำหรับแต่ละองค์ประกอบอาร์เรย์
ตัวอย่าง
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
เรียนรู้เพิ่มเติมในJS Array Iteration Methods
แผนที่อาร์เรย์()
ตัวอย่างนี้คูณค่าอาร์เรย์แต่ละค่าด้วย 2:
ตัวอย่าง
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
เรียนรู้เพิ่มเติมในJS Array Iteration Methods
ตัวกรองอาร์เรย์ ()
ตัวอย่างนี้สร้างอาร์เรย์ใหม่จากองค์ประกอบที่มีค่ามากกว่า 18:
ตัวอย่าง
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
เรียนรู้เพิ่มเติมในJS Array Iteration Methods
อาร์เรย์ลด ()
ตัวอย่างนี้ค้นหาผลรวมของตัวเลขทั้งหมดในอาร์เรย์:
ตัวอย่าง
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
เรียนรู้เพิ่มเติมในJS Array Iteration Methods
อาร์เรย์ reduceRight()
ตัวอย่างนี้ยังพบผลรวมของตัวเลขทั้งหมดในอาร์เรย์:
ตัวอย่าง
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
เรียนรู้เพิ่มเติมในJS Array Iteration Methods
อาร์เรย์ทุก ()
ตัวอย่างนี้จะตรวจสอบว่าค่าทั้งหมดมากกว่า 18:
ตัวอย่าง
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
เรียนรู้เพิ่มเติมในJS Array Iteration Methods
อาร์เรย์บาง()
ตัวอย่างนี้จะตรวจสอบว่าค่าบางค่าเกิน 18:
ตัวอย่าง
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
เรียนรู้เพิ่มเติมในJS Array Iteration Methods
อาร์เรย์ indexOf()
ค้นหาค่าองค์ประกอบในอาร์เรย์และส่งกลับตำแหน่ง
ตัวอย่าง
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
เรียนรู้เพิ่มเติมในJS Array Iteration Methods
อาร์เรย์ lastIndexOf()
lastIndexOf()เหมือนกับindexOf()แต่ค้นหาจากส่วนท้ายของอาร์เรย์
ตัวอย่าง
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
เรียนรู้เพิ่มเติมในJS Array Iteration Methods
JSON.parse()
การใช้งานทั่วไปของ JSON คือการรับข้อมูลจากเว็บเซิร์ฟเวอร์
ลองนึกภาพคุณได้รับสตริงข้อความนี้จากเว็บเซิร์ฟเวอร์:
'{"name":"John", "age":30, "city":"New York"}'
ฟังก์ชัน JavaScript JSON.parse()ใช้เพื่อแปลงข้อความเป็นวัตถุ JavaScript:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
อ่านเพิ่มเติมใน บทช่วย สอน JSONของ เรา
JSON.stringify()
การใช้งานทั่วไปของ JSON คือการส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์
เมื่อส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ ข้อมูลจะต้องเป็นสตริง
ลองนึกภาพว่าเรามีวัตถุนี้ใน JavaScript:
var obj = {name:"John", age:30, city:"New York"};
ใช้ฟังก์ชัน JavaScript JSON.stringify()เพื่อแปลงเป็นสตริง
var myJSON = JSON.stringify(obj);
ผลลัพธ์จะเป็นสตริงตามสัญกรณ์ JSON
ตอนนี้ myJSON เป็นสตริงและพร้อมที่จะส่งไปยังเซิร์ฟเวอร์:
ตัวอย่าง
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
อ่านเพิ่มเติมใน บทช่วย สอน JSONของ เรา
วันที่.ตอนนี้()
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,]