จาวาสคริปต์ ES5

สารบัญ

ECMAScript 2009 หรือที่รู้จักในชื่อ ES5 เป็นการปรับปรุง JavaScript ครั้งใหญ่ครั้งแรก

บทนี้จะอธิบายคุณลักษณะที่สำคัญที่สุดของ ES5

คุณสมบัติของ ES5

"ใช้อย่างเข้มงวด"
การเข้าถึงสตริง [หมายเลข]
สตริงหลายบรรทัด
String.trim()
Array.isArray()
อาร์เรย์ forEach()
แผนที่อาร์เรย์()
ตัวกรองอาร์เรย์()
อาร์เรย์ลด()
อาร์เรย์ลด Right()
อาร์เรย์ทุกๆ()
อาร์เรย์บางส่วน()
อาร์เรย์ดัชนีของ()
อาร์เรย์ LastIndexOf()
JSON.แยกวิเคราะห์()
JSON.stringify()
วันที่.ตอนนี้()
วันที่ถึง ISOString()
วันที่ถึง JSON()
ผู้ได้รับทรัพย์สินและผู้ตั้งค่า
คำสงวนเป็นชื่อคุณสมบัติ
วิธีการวัตถุ
วัตถุกำหนดคุณสมบัติ()
ฟังก์ชั่นผูก()
เครื่องหมายจุลภาคต่อท้าย

รองรับเบราว์เซอร์

ES5 ได้รับการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์สมัยใหม่ทั้งหมด:


Chrome	IE	Edge	Firefox	Safari	Opera
Yes	9.0	Yes	Yes	Yes	Yes

คำสั่ง "ใช้อย่างเข้มงวด"

"use strict" กำหนดว่าโค้ด JavaScript ควรถูกเรียกใช้งานใน "โหมดเข้มงวด"

เมื่อใช้โหมดเข้มงวด คุณจะไม่สามารถใช้ตัวแปรที่ไม่ได้ประกาศได้ เช่น

คุณสามารถใช้โหมดเข้มงวดในทุกโปรแกรมของคุณ ช่วยให้คุณเขียนโค้ดที่สะอาดยิ่งขึ้น เช่น การป้องกันไม่ให้คุณใช้ตัวแปรที่ไม่ได้ประกาศ

"use strict" เป็นเพียงนิพจน์สตริง เบราว์เซอร์รุ่นเก่าจะไม่เกิดข้อผิดพลาดหากไม่เข้าใจ

อ่านเพิ่มเติมในโหมดเข้มงวด JS

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

charAt() วิธีการส่งกลับอักขระที่ระบุ ดัชนี (ตำแหน่ง) ในสตริง:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The charAt() method returns the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>

ES5 อนุญาตให้เข้าถึงคุณสมบัติบนสตริง:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 allows property acces on strings:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>

การเข้าถึงคุณสมบัติบนสตริงอาจคาดเดาไม่ได้เล็กน้อย

อ่านเพิ่มเติมในวิธีการสตริง JS

สตริงบนหลายบรรทัด

ตัวอย่าง

 "Hello \
Dolly!";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>
You can break a code line within a text string with a backslash.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

วิธี\อาจไม่มีการรองรับแบบสากล
เบราว์เซอร์รุ่นเก่าอาจใช้วิธีนี้ได้ ช่องว่างรอบแบ็กสแลชแตกต่างกัน
เบราว์เซอร์รุ่นเก่าบางรุ่นทำเช่นนั้น ไม่อนุญาตให้มีช่องว่างด้านหลังอักขระ \

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

ตัวอย่าง

 "Hello " + 
"Dolly!";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The safest way to break a code line in a string is using string addition.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

คำที่สงวนไว้เป็นชื่อทรัพย์สิน

ES5 อนุญาตให้ใช้คำสงวนเป็นชื่อคุณสมบัติ:

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>ECMAScript 5</h1>

<p>ECMAScript 5 allows reserved words as property names.</p>
<p id="demo"></p>

<script>
var obj = {name: "John", new: "yes"};
document.getElementById("demo").innerHTML = obj.new;
</script>

</body>
</html>

สตริง `trim()`

trim() วิธีการลบช่องว่างออกจากทั้งสองด้านของสตริง

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trim();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

อ่านเพิ่มเติมในวิธีการสตริง JS

`Array.isArray()`

isArray() วิธีการตรวจสอบว่าวัตถุเป็นอาร์เรย์หรือไม่

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>

<p>Click the button to check if "fruits" is an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

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

</body>
</html>

อ่านเพิ่มเติมในอาร์เรย์ JS

อาร์เรย์ `forEach()`

forEach() วิธีการเรียกใช้ฟังก์ชันหนึ่งครั้งสำหรับแต่ละองค์ประกอบอาร์เรย์

ตัวอย่าง

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
   
txt = txt + value + "<br>"; 
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt = txt + value + "<br>"; 
}
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในวิธีการวนซ้ำอาร์เรย์ JS

อาร์เรย์ `map()`

ตัวอย่างนี้จะคูณค่าอาร์เรย์แต่ละค่าด้วย 2:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array) {
  return value * 2;
}
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในวิธีการวนซ้ำอาร์เรย์ JS

อาร์เรย์ `filter()`

ตัวอย่างนี้สร้างอาร์เรย์ใหม่จากองค์ประกอบที่มีค่ามากกว่า 18:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.filter()</h2>

<p>Creates a new array with all array elements that passes a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในวิธีการวนซ้ำอาร์เรย์ JS

อาร์เรย์ `reduce()`

ตัวอย่างนี้ค้นหาผลรวมของตัวเลขทั้งหมดในอาร์เรย์:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในวิธีการวนซ้ำอาร์เรย์ JS

อาร์เรย์ `reduceRight()`

ตัวอย่างนี้ยังค้นหาผลรวมของตัวเลขทั้งหมดในอาร์เรย์ด้วย:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduceRight()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในวิธีการวนซ้ำอาร์เรย์ JS

อาร์เรย์ `ทุก()`

ตัวอย่างนี้จะตรวจสอบว่าค่าทั้งหมดมากกว่า 18 หรือไม่:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.every()</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในวิธีการวนซ้ำอาร์เรย์ JS

อาร์เรย์ `some()`

ตัวอย่างนี้จะตรวจสอบว่าค่าบางค่ามากกว่า 18 หรือไม่:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.some()</h2>

<p>The some() method checks if some array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

document.getElementById("demo").innerHTML = "Some over 18 is " + allOver18;

function myFunction(value) {
  return value > 18;
}
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในวิธีการวนซ้ำอาร์เรย์ JS

อาร์เรย์ `indexOf()`

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในวิธีการวนซ้ำอาร์เรย์ JS

อาร์เรย์ `lastIndexOf()`

lastIndexOf() เหมือนกับ indexOf() แต่ค้นหาจากจุดสิ้นสุดของอาร์เรย์

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในวิธีการวนซ้ำอาร์เรย์ JS

<รหัส>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"}');

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

<p id="demo"></p>

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

อ่านเพิ่มเติมในบทช่วยสอน 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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

อ่านเพิ่มเติมในบทช่วยสอน JSON ของเรา

<รหัส>Date.now()

Date.now() ส่งคืนค่าจำนวนมิลลิวินาทีนับตั้งแต่วันที่เป็นศูนย์ (1 มกราคม 1970 00:00:00 UTC)

ตัวอย่าง

var timInMSs = Date.now();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date.now()</h2>

<p>Date.now() is new in ECMAScript 5 (2009):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
document.getElementById("demo1").innerHTML = Date.now();
var d = new Date();
document.getElementById("demo2").innerHTML = d.getTime();
</script>
</body>
</html>

Date.now() ส่งคืนค่าเดียวกันกับ getTime() ดำเนินการกับอ็อบเจ็กต์ Date

เรียนรู้เพิ่มเติมใน JS Dates

วันที่ `toISOString()`

toISOString() วิธีการแปลงวัตถุ Date ให้เป็นสตริงโดยใช้รูปแบบมาตรฐาน ISO:

ตัวอย่าง

const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toISOString() Method</h2>

<p>Convert a date to a string using the ISO standard:</p>
<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
</script>

</body>
</html>

วันที่ `toJSON()`

toJSON() แปลงวัตถุ Date ให้เป็นสตริง โดยจัดรูปแบบเป็นวันที่ JSON

วันที่ของ JSON มีรูปแบบเดียวกับมาตรฐาน ISO-8601: YYYY-MM-DDTHH:mm:ss.sssZ:

ตัวอย่าง

d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date.toJSON()</h2>

<p id="demo"></p>

<script>
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
</script>

</body>
</html>

ผู้ได้รับทรัพย์สินและผู้ตั้งค่า

ES5 ให้คุณกำหนดวิธีการของวัตถุด้วยไวยากรณ์ที่ดูเหมือนการรับหรือการตั้งค่า คุณสมบัติ

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

ตัวอย่าง

 // 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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example creates a getter for a property called fullName.</p>

<p id="demo"></p>

<script>
// 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;
</script>

</body>
</html>

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

ตัวอย่าง

 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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example creates a setter and a getter for the language property.</p>

<p id="demo"></p>

<script>
// Create an object:
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;
</script>

</body>
</html>

ตัวอย่างนี้ใช้ setter เพื่อรักษาความปลอดภัยการอัปเดตตัวพิมพ์ใหญ่ของภาษา:

ตัวอย่าง

 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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example has a modified setter to secure upper case uppdates of language.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  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;
</script>

</body>
</html>

เรียนรู้เพิ่มเติมเกี่ยวกับ Gettes และ Setters ใน JS Object Accessors

<รหัส>Object.defineProperty()

Object.defineProperty() เป็นวิธีการ Object ใหม่ใน ES5

ช่วยให้คุณสามารถกำหนดคุณสมบัติของอ็อบเจ็กต์และ/หรือเปลี่ยนค่าของคุณสมบัติและ/หรือได้ ข้อมูลเมตา

ตัวอย่าง

 // 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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
</head>

<body>

<h2>JavaScript defineProperty()</h2>

<p id="demo"></p>

<script>
// 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
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

ตัวอย่างถัดไปคือโค้ดเดียวกัน ยกเว้นว่าจะซ่อนคุณสมบัติภาษาจากการแจงนับ:

ตัวอย่าง

 // 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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript defineProperty()</h2>

<p id="demo"></p>

<script>
// 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
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

ตัวอย่างนี้สร้าง setter และ getter เพื่อรักษาความปลอดภัยการอัพเดตตัวพิมพ์ใหญ่ของภาษา:

ตัวอย่าง

 // 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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript defineProperty()</h2>

<p id="demo"></p>

<script>
// 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;
</script>

</body>
</html>

วิธีการวัตถุ E5

ES5 เพิ่ม Object Methods ใหม่มากมายให้กับ JavaScript:

การจัดการวัตถุ

// 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)

การปกป้องวัตถุ

// 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)

เรียนรู้เพิ่มเติมในออบเจ็กต์ ECMAScript5

ฟังก์ชัน `Bind()`

ด้วยเมธอด bind() วัตถุสามารถยืมวิธีการจากวัตถุอื่นได้

ตัวอย่างนี้สร้าง 2 วัตถุ (บุคคลและสมาชิก)

วัตถุสมาชิกยืมวิธีการชื่อเต็มจากวัตถุบุคคล:

ตัวอย่าง

const person = {
  firstName:"John",
  lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

document.getElementById("demo").innerHTML = fullName();
</script>

</body>
</html>

เรียนรู้เพิ่มเติมในฟังก์ชันผูก()

เครื่องหมายจุลภาคต่อท้าย

ES5 อนุญาตให้ใช้เครื่องหมายจุลภาคต่อท้ายในคำจำกัดความของวัตถุและอาร์เรย์:

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

person = {
  firstName: "John",
  lastName: "
Doe",
	age: 46,
}

ตัวอย่างอาร์เรย์

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

คำเตือน !!!

JSON ไม่อนุญาตให้ใช้เครื่องหมายจุลภาคต่อท้าย

วัตถุ JSON:

 //
  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:

   //
    Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points = 
    [40, 100, 1, 5, 25, 10,]

จาวาสคริปต์ ES5

สารบัญ

คุณสมบัติของ ES5

รองรับเบราว์เซอร์

คำสั่ง "ใช้อย่างเข้มงวด"

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

ตัวอย่าง

ตัวอย่าง

สตริงบนหลายบรรทัด

ตัวอย่าง

ตัวอย่าง

คำที่สงวนไว้เป็นชื่อทรัพย์สิน

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

สตริง trim()

ตัวอย่าง

Array.isArray()

ตัวอย่าง

อาร์เรย์ forEach()

ตัวอย่าง

อาร์เรย์ map()

ตัวอย่าง

อาร์เรย์ filter()

ตัวอย่าง

อาร์เรย์ reduce()

ตัวอย่าง

อาร์เรย์ reduceRight()

ตัวอย่าง

อาร์เรย์ ทุก()

ตัวอย่าง

อาร์เรย์ some()

ตัวอย่าง

อาร์เรย์ indexOf()

ตัวอย่าง

อาร์เรย์ lastIndexOf()

ตัวอย่าง

<รหัส>JSON.parse()

<รหัส>JSON.stringify()

ตัวอย่าง

<รหัส>Date.now()

ตัวอย่าง

วันที่ toISOString()

ตัวอย่าง

วันที่ toJSON()

ตัวอย่าง

ผู้ได้รับทรัพย์สินและผู้ตั้งค่า

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

<รหัส>Object.defineProperty()

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

วิธีการวัตถุ E5

การจัดการวัตถุ

การปกป้องวัตถุ

ฟังก์ชัน Bind()

ตัวอย่าง

เครื่องหมายจุลภาคต่อท้าย

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

ตัวอย่างอาร์เรย์

วัตถุ JSON:

อาร์เรย์ JSON:

สตริง `trim()`

`Array.isArray()`

อาร์เรย์ `forEach()`

อาร์เรย์ `map()`

อาร์เรย์ `filter()`

อาร์เรย์ `reduce()`

อาร์เรย์ `reduceRight()`

อาร์เรย์ `ทุก()`

อาร์เรย์ `some()`

อาร์เรย์ `indexOf()`

อาร์เรย์ `lastIndexOf()`

วันที่ `toISOString()`

วันที่ `toJSON()`

ฟังก์ชัน `Bind()`