JavaScript ES5

ECMAScript 5 คืออะไร?

ECMAScript 5 ก็เรียกว่า ES5 และ ECMAScript 2009

บทนี้นำเสนอคุณสมบัติที่สำคัญที่สุดของ ES5:

คุณสมบัติ ECMAScript 5

นี่เป็นคุณสมบัติที่เพิ่มเติมในปี 2009:

  • "use strict" คำสั่ง
  • 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()
  • คุณสมบัติ Getter และ Setter
  • คุณสมบัติและเมธอดของออบเจกใหม่

การเปลี่ยนแปลงทางภาษา ECMAScript 5

  • การเข้าถึงคุณสมบัติของสตริงด้วย [ ]
  • ความยาวท้ายของแอร์เรย์และวัตถุ
  • สตริงลูปแบบมาตรฐาน
  • คำศัพท์ที่เป็นคำสำคัญในการใช้เป็นชื่อตัวแปร

"use strict" คำสั่ง

"use strict" นิยาย JavaScript ควรที่จะทำงานในโมดูลมาตรฐานเรียบง่าย.

ตัวอย่างเช่น ในโมดูลมาตรฐานเรียบง่าย ไม่สามารถใช้ตัวแปรที่ยังไม่ได้ประกาศได้:

คุณสามารถใช้โมดูลมาตรฐานเรียบง่ายในทุกๆโปรแกรมของคุณ. มันช่วยให้คุณเขียนโค้ดที่ชัดเจนขึ้น ตัวอย่างเช่น ป้องกันไม่ให้ใช้ตัวแปรที่ยังไม่ได้ประกาศ:

"use strict" มีความหมายเพียงแค่ประโยคตัวอักษรค่าเดียว. ตัวเครื่องคอมพิวเตอร์ที่เดิมไม่เข้าใจนั้นจะไม่ของความผิด:

อ่านเพิ่มเติม JS มาตรฐานเรียบง่าย เพื่ออ่านเพิ่มเติม

String.trim()

String.trim() ลบช่องว่างที่ด้านหน้าและด้านหลังของตัวอักษร:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ วิธีการสตริงใน JS เพื่ออ่านเพิ่มเติม

Array.isArray()

isArray() ฟังก์ชันตรวจสอบว่าวัตถุเป็นแอร์เรย์หรือไม่:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS แอร์เรย์ เพื่ออ่านเพิ่มเติม

Array.forEach()

forEach() มีอุปกรณ์ที่เรียกฟังก์ชันเพื่อแอร์เรย์ตัวเดียว:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS วิธีวิเคราะห์แบบตัวเลข เรียนรู้เพิ่มเติม

Array.map()

ตัวอย่างนี้กำหนดค่าแอร์เรย์ทุกตัวเพื่อเพิ่มค่าเท่ากับ 2:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS วิธีวิเคราะห์แบบตัวเลข เรียนรู้เพิ่มเติม

Array.filter()

ตัวอย่างนี้ใช้ค่าที่มากกว่า 18 ในการสร้างแอร์เรย์ใหม่:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS วิธีวิเคราะห์แบบตัวเลข เรียนรู้เพิ่มเติม

Array.reduce()

นี่คือตัวอย่างที่กำหนดรวมค่าของทุกตัวเลขในแอร์เรย์:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS วิธีวิเคราะห์แบบตัวเลข เรียนรู้เพิ่มเติม

Array.reduceRight()

ตัวอย่างนี้เช่นกันเพื่อหาค่ารวมของตัวเลขทั้งหมดในตัวเลข:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS วิธีวิเคราะห์แบบตัวเลข เรียนรู้เพิ่มเติม

Array.every()

ตัวอย่างนี้ตรวจสอบว่าทุกค่าเกิน 18:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS วิธีวิเคราะห์แบบตัวเลข เรียนรู้เพิ่มเติม

Array.some()

ตัวอย่างนี้ตรวจสอบว่าค่าใดกว่า 18:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS วิธีวิเคราะห์แบบตัวเลข เรียนรู้เพิ่มเติม

Array.indexOf()

ค้นหาค่าขององค์ประกอบในตัวเลขและกลับค่าตำแหน่ง:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS วิธีวิเคราะห์แบบตัวเลขเรียนรู้เพิ่มเติม

Array.lastIndexOf()

Array.lastIndexOf() เทียบกับ Array.indexOf() คล้ายกัน แต่ค้นหาจากทางท้ายของตัวเลข:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดใช้ JS วิธีวิเคราะห์แบบตัวเลข เรียนรู้เพิ่มเติม

JSON.parse()

การใช้งานที่ติดตามของ JSON คือ รับข้อมูลจากเว็บเซิร์ฟเวอร์:

จินตนาการว่า คุณได้รับข้อความตัวอักษรนี้จากเว็บเซิร์ฟเวอร์:

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

ฟังก์ชัน JavaScript JSON.parse() ใช้เพื่อแปลงข้อความเป็นวัตถุ JavaScript:

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

ทดลองด้วยตัวเอง

โปรดเข้าชม ตัวอย่าง JSON เรียนรู้เพิ่มเติม

JSON.stringify()

การใช้งานที่ติดตามของ JSON คือ ส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์:

ขณะส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ ข้อมูลต้องเป็นข้อความตัวอักษร:

จินตนาการว่า เรามีวัตถุนี้ใน JavaScript:

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

โปรดใช้ฟังก์ชัน JSON.stringify() ของ JavaScript ในการเปลี่ยนเป็นข้อความตัวอักษร:

var myJSON = JSON.stringify(obj);

ผลลัพธ์จะเป็นข้อความตัวอักษรที่ตามรูปแบบ JSON:

myJSON ตอนนี้เป็นข้อความตัวอักษร ที่เตรียมส่งไปยังเซิร์ฟเวอร์:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โปรดเข้าชม ตัวอย่าง JSON เรียนรู้เพิ่มเติม

Date.now()

Date.now() คืนค่ามิลลิเซ็กันด์ที่เริ่มต้นจากวันที่ 0 (1 มกราคม 1970 00:00:00:00) ต่อไป。

ตัวอย่าง

var timInMSs = Date.now();

ทดลองด้วยตัวเอง

Date.now() ที่คืนค่าเหมือนกับผลลัพธ์ที่ได้จากการปฏิบัติ Date.getTime() ในออบเจก Date。

โปรดใช้ JS วันที่ เรียนรู้เพิ่มเติม。

คุณสมบัติ Getter และ Setter

ES5 อนุญาตให้คุณใช้การเขียนที่คล้ายกับการเรียกและตั้งค่าคุณสมบัติเพื่อกำหนดเมธอดของออบเจก。

ตัวอย่างนี้สร้าง getter สำหรับคุณสมบัติที่ชื่อ fullName: getter:

ตัวอย่าง

// สร้างวัตถุ
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// ใช้ getter แสดงข้อมูลจากออบเจก
document.getElementById("demo").innerHTML = person.fullName;

ทดลองด้วยตัวเอง

ตัวอย่างนี้สร้าง getter และ setter สำหรับคุณสมบัติของภาษา: setter และ getter:

ตัวอย่าง

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// ใช้ setter กำหนดคุณสมบัติของออบเจก
person.lang = "en";
// ใช้ getter แสดงข้อมูลจากออบเจก
document.getElementById("demo").innerHTML = person.lang;

ทดลองด้วยตัวเอง

ตัวอย่างนี้ใช้ setter ในการให้การปรับปรุงตัวอักษรใหญ่ของภาษา:

ตัวอย่าง

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// ใช้ setter กำหนดคุณสมบัติของออบเจก
person.lang = "en";
// แสดงข้อมูลจากออบเจก
document.getElementById("demo").innerHTML = person.language;

ทดลองด้วยตัวเอง

โปรดใช้ JS ออบเจกเซ็ทเทอร์ เรียนรู้เพิ่มเติมเกี่ยวกับ Getter และ Setter ในโลก

คุณสมบัติและเมธอดของออบเจกใหม่

Object.defineProperty() เป็นเมธอดของออบเจกใหม่ใน ES5。

มันอนุญาตให้คุณกำหนดคุณสมบัติของออブเจกท์และ/หรือเปลี่ยนค่าและ/หรือข้อมูลทางเทคนิคของคุณสมบัติ。

ตัวอย่าง

// สร้างวัตถุ
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// กำหนดคุณสมบัติ
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// นับทรัพย์สมบัติ
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

ทดลองด้วยตัวเอง

ตัวอย่างที่เหมือนกันคือรหัสเดียวกันแต่มีการซ่อนคุณสมบัติภาษาในรายการนับ:}

ตัวอย่าง

// สร้างวัตถุ
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// กำหนดคุณสมบัติ
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// นับทรัพย์สมบัติ
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

ทดลองด้วยตัวเอง

// ตัวอย่างนี้สร้าง setter และ getter เพื่อให้ปรับปรุงภาษาในรูปแบบใหญ่

ตัวอย่าง

// สร้างวัตถุ
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
});
// กำหนดคุณสมบัติ
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// เปลี่ยนภาษา
person.language = "en";
// แสดงภาษา
document.getElementById("demo").innerHTML = person.language;

ทดลองด้วยตัวเอง

วิธีใช้วัตถุใหม่ของ ES5

ECMAScript 5 ได้เพิ่มความสามารถใหม่ของวัตถุให้กับ JavaScript

// เพิ่มหรือเปลี่ยนคุณสมบัติของวัตถุ
Object.defineProperty(object, property, descriptor)
// เพิ่มหรือเปลี่ยนคุณสมบัติหลายตัวของวัตถุ
Object.defineProperties(object, descriptors)
// รับคุณสมบัติของทรัพย์สิน
Object.getOwnPropertyDescriptor(object, property)
// ส่งค่าของทรัพย์สินทั้งหมดเป็นตัวแปรแบบมาตรา
Object.getOwnPropertyNames(object)
// ส่งค่าของทรัพย์สินที่สามารถนับได้เป็นตัวแปรแบบมาตรา
Object.keys(object)
// รับโปรโตไทป์
Object.getPrototypeOf(object)
// ป้องกันไม่ให้เพิ่มคุณสมบัติเข้าสู่ตัวแปร
Object.preventExtensions(object)
// หากสามารถเพิ่มคุณสมบัติเข้าสู่ตัวแปร ก็จะกลับมาด้วย true
Object.isExtensible(object)
// ป้องกันไม่ให้เปลี่ยนแปลงคุณสมบัติตัวแปร (ไม่ใช่ค่า)
Object.seal(object)
// หากตัวแปรเป็นที่ปิด ก็จะกลับมาด้วย true
Object.isSealed(object)
// ป้องกันไม่ให้เปลี่ยนแปลงตัวแปร
Object.freeze(object)
// หากตัวแปรเป็นที่แข็งแกร่ง ก็จะกลับมาด้วย true
Object.isFrozen(object)

โปรดใช้ เป้าหมาย ECMAScript5 เรียนรู้เพิ่มเติม

การเข้าถึงคุณสมบัติของสตริง

charAt() วิธีที่กลับมาด้วยตัวอักษรที่อยู่ที่ตำแหน่งที่กำหนดของสตริง

ตัวอย่าง

var str = "HELLO WORLD";
str.charAt(0);            // กลับมาด้วย H

ทดลองด้วยตัวเอง

ECMAScript 5 อนุญาติใช้การเข้าถึงคุณสมบัติของสตริง

ตัวอย่าง

var str = "HELLO WORLD";
str[0];                   // กลับมาด้วย H

ทดลองด้วยตัวเอง

การเข้าถึงคุณสมบัติของสตริงอาจมีความยากที่จะคาดการณ์

โปรดใช้ วิธีการสตริงใน JS เรียนรู้เพิ่มเติม

คำหยุดท้ายตามที่ (Trailing Commas)

ECMAScript 5 อนุญาติใช้คำหยุดท้ายตามที่ในการประกาศตัวแปรเป็นตัวแปร Object และ Array:

ตัวแปร Object

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

ตัวแปร Array

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

คำเตือน！！！

Internet Explorer 8 จะดับขาด

JSON ไม่อนุญาติใช้คำหยุดท้ายตามที่

JSON สเน่งตัวแปร

// อนุญาติ：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}
JSON.parse(person)
// ไม่อนุญาติ：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)

JSON สเน่งตัวแปร

// อนุญาติ：
points = [40, 100, 1, 5, 25, 10]
// ไม่อนุญาติ：
points = [40, 100, 1, 5, 25, 10,]

ข้อความเป็นตัวอ่านหลายบรรทัด

ECMAScript 5 อนุญาตให้ใช้ข้อความเป็นตัวอ่านหลายบรรทัดเมื่อใช้การหลีกเลี่ยงด้วย反斜杠:

ตัวอย่าง

"Hello \
Kitty!";

ทดลองด้วยตัวเอง

วิธี\อาจไม่ได้รับการสนับสนุนอย่างเต็มที่

บางเบราเซอร์เก่าอาจจะจัดการกับช่องว่างที่อยู่รอบสัญลักษณ์反斜杠อย่างต่างกัน

บางเบราเซอร์เก่าที่ยังไม่อนุญาตให้เว้นช่องว่างหลังจากสัญลักษณ์ \

วิธีที่ปลอดภัยของการแยกตัวอักษรของข้อความเป็นตัวอ่านหลายบรรทัดคือการใช้การเพิ่มตัวอักษรตัวอ่าน:

ตัวอย่าง

"Hello " + 
"Kitty!";

ทดลองด้วยตัวเอง

คำสำคัญในชื่อรายการ

ECMAScript 5 อนุญาตให้ใช้คำสำคัญเป็นชื่อรายการ:

ตัวอย่างของวัตถุ

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

ทดลองด้วยตัวเอง

การสนับสนุนเบราเซอร์ ES5 (ECMAScript 5)

Chrome 23, IE 10 และ Safari 6 คืออุปกรณ์ที่สนับสนุน ECMAScript 5 อย่างเต็มที่ในครั้งแรก:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
กันยายน 2012 กันยายน 2012 เมษายน 2013 กรกฎาคม 2012 กรกฎาคม 2013