Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Predefined Core Objects

บทนี้กล่าวถึงอ็อบเจกต์พื้นฐานในแกนหลักของจาวาสคริปต์ คือ Array, Boolean, Date, Function, Math, Number, RegExp, และ String

อ็อบเจกต์อาร์เรย์

จาวาสคริปต์ไม่มีชนิดข้อมูลที่เป็นอาร์เรย์โดยตรง อย่างไรก็ตาม คุณสามารถใช้อ็อบเจกต์อาร์เรย์ (Array) และเมธอดของมันทำงานกับข้อมูลแบบอาร์เรย์ในแอปพลิเคชันของคุณได้ โดยอ็อบเจกต์อาร์เรย์มีเมธอดที่ใช้จัดการอาร์เรย์หลายแบบ เช่น เชื่อมต่ออาร์เรย์, กลับลำดับอาร์เรย์, และจัดเรียงข้อมูลในอาร์เรย์ และยังมีคุณสมบัติที่ใช้หาความยาวของอาร์เรย์และคุณสมบัติอื่นๆที่เกี่ยวข้องกับ regular expression ด้วย

อาร์เรย์คือชุดลำดับของค่าข้อมูล ที่คุณอ้างถึงด้วยชื่อและเลขลำดับ ตัวอย่างเช่น, คุณมีอาร์เรย์ชื่อ emp ที่เก็บรายชื่อพนักงาน เรียงตามหมายเลขพนักงาน นั่นคือ emp[1] คือพนักงานหมายเลขหนึ่ง, emp[2] คือพนักงานหมายเลขสอง,  และเป็นเช่นนี้ต่อไป

การสร้างอาร์เรย์

ทุกคำสั่งต่อไปนี้สร้างอาร์เรย์ที่เหมือนกัน:

var arr = new Array(element0, element1, ..., elementN);
var arr = Array(element0, element1, ..., elementN);
var arr = [element0, element1, ..., elementN];

element0, element1, ..., elementN คือรายการค่าข้อมูลที่จะกำหนดให้กับสมาชิกในอาร์เรย์ โดยเมื่อมีการกำหนดค่าข้อมูลเหล่านี้แล้ว, อาร์เรย์จะถูกสร้างขึ้นโดยที่สมาชิกของอาร์เรย์จะมีค่าตามข้อมูลที่กำหนด และมีความยาวเท่ากับจำนวนค่าข้อมูล

รูปแบบที่สาม ใช้วงเล็บเหลี่ยมที่เรียกว่า "ค่าข้อมูลอาร์เรย์" หรือ "ตัวสร้างอาร์เรย์" ซึ่งวิธีนี้จะสั้นกว่าการสร้างอาร์เรย์แบบอื่นๆ และเป็นที่นิยมใช้กัน โดยดูรายละเอียดได้ที่ Array Literals

การสร้างอาร์เรย์ที่มีความยาวมากกว่าศูนย์ แต่ไม่มีสมาชิกเลย มีวิธีทำได้แบบใดแบบหนึ่งตามตัวอย่างต่อไปนี้:

var arr = new Array(arrayLength);
var arr = Array(arrayLength);

// This has exactly the same effect
var arr = [];
arr.length = arrayLength;

หมายเหตุ: ในโค้ดข้างบน arrayLength ต้องเป็นตัวเลขเท่านั้น ไม่เช่นนั้นแล้วอาร์เรย์จะถูกสร้างขึ้นโดยมีสมาชิกหนึ่งตัว (มีค่าเท่ากับ arrayLength) ซึ่งการเรียกใช้ arr.legth จะได้ค่าเป็น arrayLength โดยตัวอาร์เรย์จริงๆแล้วจะมีแต่สมาชิกว่าง (ไม่ถูกกำหนดค่า) อยู่ข้างใน ซึ่งเมื่อใช้คำสั่งลูป for...in กับอาร์เรย์นี้ จะไม่ได้สมาชิกของอาร์เรย์ในลูปเลย

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

var obj = {};
// ...
obj.prop = [element0, element1, ..., elementN];

// OR
var obj = {prop: [element0, element1, ...., elementN]}

ถ้าคุณต้องการสร้างอาร์เรย์ที่มีสมาชิกตัวเดียว และสมาชิกนั้นมีค่าเป็นตัวเลข คุณต้องใช้วิธีการสร้างอาร์เรย์ในรูปแบบวงเล็บเหลี่ยมเท่านั้น เพราะถ้าเราสร้างอาร์เรย์โดยส่งค่าตัวเลขให้ฟังก์ชัน Array(), มันจะแปลความหมายเป็นความยาวของอาร์เรย์เสมอ ซึ่งไม่ใช่การกำหนดค่าให้สมาชิกตัวเดียวในอาร์เรย์ตามที่เราต้องการ

var arr = [42];
var arr = Array(42); // Creates an array with no element, but with arr.length set to 42

// The above code is equivalent to
var arr = [];
arr.length = 42;

การเรียกฟังก์ชัน Array(N) จะได้ค่า RangeError, ถ้า N เป็นตัวเลขที่มีทศนิยมมากกว่าศูนย์ ซึ่งแสดงในตัวอย่างต่อไปนี้

var arr = Array(9.3);  // RangeError: Invalid array length

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

การสร้างข้อมูลในอาร์เรย์

คุณสามารถสร้างข้อมูลในอาร์เรย์ โดยการกำหนดค่าให้สมาชิก ดังตัวอย่าง,

var emp = [];
emp[0] = "Casey Jones";
emp[1] = "Phil Lesh";
emp[2] = "August West";

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

 var arr = [];
arr[3.4] = "Oranges";
console.log(arr.length);                // 0
console.log(arr.hasOwnProperty(3.4));   // true

คุณสามารถกำหนดค่าให้สมาชิกของอาร์เรย์ ในตอนที่สร้างมันได้:

var myArray = new Array("Hello", myVar, 3.14159);
var myArray = ["Mango", "Apple", "Orange"]

การอ้างถึงสมาชิกของอาร์เรย์

คุณสามารถอ้างถึงสมาชิกของอาร์เรย์โดยใช้ลำดับที่ของสมาชิก ตัวอย่าง, สมมุติว่าคุณได้สร้างอาร์เรย์ต่อไปนี้:

var myArray = ["Wind", "Rain", "Fire"];

จากนั้นคุณก็อ้างถึงสมาชิกตัวแรกด้วย myArray[0] และสมาชิกตัวที่สองด้วย myArray[1] โดยลำดับของสมาชิกในอาร์เรย์จะเริ่มจากศูนย์

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

 var arr = ["one", "two", "three"];
arr[2];  // three
arr["length"];  // 3

ทำความเข้าใจคุณสมบัติ length

การทำงานภายในของจาวาสคริปต์นั้น อาร์เรย์จะจัดเก็บสมาชิกของมันในรูปแบบคุณสมบัติของอ็อบเจกต์ และใช้ลำดับที่ของสมาชิกเป็นชื่อคุณสมบัติ โดยคุณสมบัติ length มีความพิเศษคือ มันจะคืนลำดับที่ของสมาชิกตัวสุดท้ายเสมอ และต้องจำไว้ว่า ลำดับที่ของอาร์เรย์เริ่มจาก 0, ไม่ใช่ 1 นั่นหมายถึงว่าคุณสมบัติ length จะมีค่ามากกว่าลำดับที่สูงสุดของอาร์เรย์อยู่หนึ่ง

var cats = [];
cats[30] = ['Dusty'];
print(cats.length); // 31

คุณสามารถที่จะกำหนดค่าให้คุณสมบัติ length ได้ โดยถ้ากำหนดค่าที่น้อยกว่าจำนวนสมาชิกจริง จะเป็นการตัดสมาชิกที่เกินออกไป และถ้ากำหนดค่าเป็น 0 จะทำให้กลายเป็นอาร์เรย์ว่าง:

var cats = ['Dusty', 'Misty', 'Twiggy'];
console.log(cats.length); // 3

cats.length = 2;
console.log(cats); // prints "Dusty,Misty" - Twiggy has been removed

cats.length = 0;
console.log(cats); // prints nothing; the cats array is empty

cats.length = 3;
console.log(cats); // [undefined, undefined, undefined]

การวนซ้ำในอาร์เรย์

การทำงานที่ใช้กันเสมอ คือการวนซ้ำด้วยค่าของอาร์เรย์ และทำงานบางอย่างกับค่านั้น ซึ่งวิธีที่ง่ายที่สุดคือ:

var colors = ['red', 'green', 'blue'];
for (var i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

ถ้าคุณรู้ว่า ไม่มีสมาชิกตัวใดในอาร์เรย์ที่สามารถหาค่าได้เป็น false เลย — และถ้าอาร์เรย์ของคุณประกอบด้วยโหนดของ DOM เท่านั้น, ตัวอย่างนี้ คุณสามารถใช้วิธีการวนซ้ำที่ดีกว่าเดิมได้:

var divs = document.getElementsByTagName('div');
for (var i = 0, div; div = divs[i]; i++) {
  /* Process div in some way */
}

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

Introduced in JavaScript 1.6

เมธอด forEach() ของอาร์เรย์ ที่ถูกเพิ่มเข้ามาในจาวาสคริปต์ 1.6 คืออีกวิธีที่ทำให้มีการวนซ้ำในอาร์เรย์:

var colors = ['red', 'green', 'blue'];
colors.forEach(function(color) {
  console.log(color);
});

โดยฟังก์ชันที่ส่งเข้า forEach จะถูกเรียกให้ทำงานทีละครั้ง กับทุกสมาชิกในอาร์เรย์ ที่ถูกส่งเป็นตัวแปร (color) เข้าฟังก์ชัน โดยสมาชิกที่ไม่ถูกกำหนดค่าจะไม่ถูกวนซ้ำในลูป forEach

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

var array = ['first', 'second', , 'fourth'];

// returns ['first', 'second', 'fourth'];
array.forEach(function(element) {
  console.log(element);
})

if(array[2] === undefined) { console.log('array[2] is undefined'); } // true

var array = ['first', 'second', undefined, 'fourth'];

// returns ['first', 'second', undefined, 'fourth'];
array.forEach(function(element) {
  console.log(element);
})

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

เมธอดของอาร์เรย์

อ็อบเจกต์อาร์เรย์ (Array) มีเมธอดให้ใช้ต่อไปนี้:

  • concat()รวมสองอาร์เรย์เข้าด้วยกัน และคืนค่าอาร์เรย์ใหม่
    var myArray = new Array("1", "2", "3");
    myArray = myArray.concat("a", "b", "c"); // myArray is now ["1", "2", "3", "a", "b", "c"]
    
  • join(deliminator = ",")รวมสมาชิกทุกตัวในอาร์เรย์ให้เป็นสตริง
    var myArray = new Array("Wind", "Rain", "Fire");
    var list = myArray.join(" - "); // list is "Wind - Rain - Fire"
    
  • push()เพิ่มสมาชิกใหม่ตัวเดียวหรือมากกว่าที่ท้ายอาร์เรย์ และคืนค่าความยาวใหม่ของอาร์เรย์
    var myArray = new Array("1", "2");
    myArray.push("3"); // myArray is now ["1", "2", "3"]
    
  • pop()ลบสมาชิกตัวสุดท้ายออกจากอาร์เรย์ และคืนค่าสมาชิกนั้น
    var myArray = new Array("1", "2", "3");
    var last = myArray.pop(); // myArray is now ["1", "2"], last = "3"
    
  • shift()ลบสมาชิกตัวแรกออกจากอาร์เรย์ และคืนค่าสมาชิกนั้น
    var myArray = new Array ("1", "2", "3");
    var first = myArray.shift(); // myArray is now ["2", "3"], first is "1"
    
  • unshift()เพิ่มสมาชิกใหม่ตัวเดียวหรือมากกว่าที่หัวอาร์เรย์ และคืนค่าความยาวใหม่ของอาร์เรย์
    var myArray = new Array ("1", "2", "3");
    myArray.unshift("4", "5"); // myArray becomes ["4", "5", "1", "2", "3"]
  • slice(start_index, upto_index)ตัดอาร์เรย์ออกตามส่วนที่กำหนด และคืนอาร์เรย์ใหม่
    var myArray = new Array ("a", "b", "c", "d", "e");
    myArray = myArray.slice(1, 4); /* starts at index 1 and extracts all elements
      until index 3, returning [ "b", "c", "d"] */
    
  • splice(index, count_to_remove, addelement1, addelement2, ...)ลบสมาชิกออกจากอาร์เรย์ และเลือกที่จะแทนสมาชิกใหม่ลงไปได้
    var myArray = new Array ("1", "2", "3", "4", "5");
    myArray.splice(1, 3, "a", "b", "c", "d"); // myArray is now ["1", "a", "b", "c", "d", "5"]
      // This code started at index one (or where the "2" was), removed 3 elements there, 
      // and then inserted all consecutive elements in its place.
    
  • reverse()กลับลำดับสมาชิกในอาร์เรย์ ตัวแรกเป็นตัวสุดท้าย ตัวสุดท้ายเป็นตัวแรก
    var myArray = new Array ("1", "2", "3");
    myArray.reverse(); // transposes the array so that myArray = [ "3", "2", "1" ]
    
  • sort()จัดเรียงลำดับสมาชิกในอาร์เรย์
    var myArray = new Array("Wind", "Rain", "Fire");
    myArray.sort(); // sorts the array so that myArrray = [ "Fire", "Rain", "Wind" ]
    
    

    sort() สามารถรับฟังก์ชัน callback ที่ทำการเปรียบเทียบค่าสมาชิกของอาร์เรย์ได้ โดยฟังก์ชันนี้จะเปรียบเทียบค่าสองค่า และคืนค่าหนึ่งจากสามค่าต่อไปนี้:

    • ถ้า a น้อยกว่า b ตามระบบการจัดเรียงข้อมูล ให้คืนค่า -1 (หรือค่าลบใดๆ)
    • ถ้า a มากกว่า b ตามระบบการจัดเรียงข้อมูล ให้คืนค่า 1 (หรือค่าบวกใดๆ)
    • ถ้า a และ b มีค่าเท่ากัน ให้คืนค่า 0

    ตัวอย่างต่อไปนี้ ทำการจัดเรียงตามอักษรตัวสุดท้ายของอาร์เรย์:

    var sortFn = function(a, b){
      if (a[a.length - 1] < b[b.length - 1]) return -1;
      if (a[a.length - 1] > b[b.length - 1]) return 1;
      if (a[a.length - 1] == b[b.length - 1]) return 0;
    }
    myArray.sort(sortFn); // sorts the array so that myArray = ["Wind","Fire","Rain"]

Introduced in JavaScript 1.6

โค้ดที่เข้ากันได้กับเบราว์เซอร์รุ่นเก่า ดูได้ที่หน้าฟังก์ชันนั้น ส่วนเบราว์เซอร์ที่รองรับความสามารถเหล่านี้ได้โดยตรงดูได้ ที่นี่

  • indexOf(searchElement[, fromIndex])ค้นหาค่า searchElement ในอาร์เรย์ และคืนค่าลำดับที่ของตัวแรกที่พบ
    var a = ['a', 'b', 'a', 'b', 'a'];
    alert(a.indexOf('b')); // Alerts 1
    // Now try again, starting from after the last match
    alert(a.indexOf('b', 2)); // Alerts 3
    alert(a.indexOf('z')); // Alerts -1, because 'z' was not found
    
  • lastIndexOf(searchElement[, fromIndex])ทำงานเหมือน indexOf แต่เริ่มค้นหาจากด้านท้าย และค้นย้อนกลับไป
    var a = ['a', 'b', 'c', 'd', 'a', 'b'];
    alert(a.lastIndexOf('b')); // Alerts 5
    // Now try again, starting from before the last match
    alert(a.lastIndexOf('b', 4)); // Alerts 1
    alert(a.lastIndexOf('z')); // Alerts -1
    
  • forEach(callback[, thisObject])เรียกใช้ฟังก์ชัน callback กับทุกสมาชิกในอาร์เรย์
    var a = ['a', 'b', 'c'];
    a.forEach(alert); // Alerts each item in turn
    
  • map(callback[, thisObject])คืนค่าอาร์เรย์ใหม่ที่ได้จากค่าที่เกิดจากการทำงานของฟังก์ชัน callback กับทุกสมาชิกในอาร์เรย์
    var a1 = ['a', 'b', 'c'];
    var a2 = a1.map(function(item) { return item.toUpperCase(); });
    alert(a2); // Alerts A,B,C
    
  • filter(callback[, thisObject]) คืนค่าอาร์เรย์ใหม่ที่ประกอบด้วยสมาชิกที่ฟังก์ชัน callback คืนค่า true
    var a1 = ['a', 10, 'b', 20, 'c', 30];
    var a2 = a1.filter(function(item) { return typeof item == 'number'; });
    alert(a2); // Alerts 10,20,30
    
  • every(callback[, thisObject])คืนค่า true ถ้าฟังก์ชัน callback คืนค่า true กับทุกสมาชิกในอาร์เรย์
    function isNumber(value){
      return typeof value == 'number';
    }
    var a1 = [1, 2, 3];
    alert(a1.every(isNumber)); // Alerts true
    var a2 = [1, '2', 3];
    alert(a2.every(isNumber)); // Alerts false
    
  • some(callback[, thisObject])คืนค่า true ถ้าฟังก์ชัน callback คืนค่า true ให้กับสมาชิกอย่างน้อยหนึ่งตัวในอาร์เรย์
    function isNumber(value){
      return typeof value == 'number';
    }
    var a1 = [1, 2, 3];
    alert(a1.some(isNumber)); // Alerts true
    var a2 = [1, '2', 3];
    alert(a2.some(isNumber)); // Alerts true
    var a3 = ['1', '2', '3'];
    alert(a3.some(isNumber)); // Alerts false
    

เมธอดข้างบนที่รับฟังก์ชัน callback เรียกว่า เมธอดแบบวนซ้ำ (iterative method) เพราะว่ามันจะทำการวนซ้ำกับค่าในอาร์เรย์และทำงานบางอย่าง โดยสามารถที่จะเลือกรับค่าตัวแปรเข้าเมธอดตัวที่สองคือ thisObject ได้ ซึ่งถ้ามีการกำหนดตัวแปรนี้, thisObject จะกลายเป็นค่าของ this ภายในฟังก์ชัน callback แต่ถ้าไม่มีการกำหนด, ก็จะเหมือนกับกรณีอื่นที่มีการเรียกใช้ฟังก์ชันนอกขอบเขตที่สร้างมันขึ้นมา ซึ่ง this จะอ้างถึงอ็อบเจกต์ส่วนกลาง (window)

ฟังก์ชัน callback จริงๆแล้วจะถูกเรียกใช้ด้วยค่าสามค่า ซึ่งตัวแรกคือค่าของสมาชิกในรอบนั้น, ตัวที่สองคือลำดับของสมาชิกในอาร์เรย์, และตัวที่สามคือตัวอาร์เรย์เอง โดยจาวาสคริปต์จะไม่สนใจค่าที่ไม่ได้ส่งเข้าฟังก์ชัน ดังนั้นจึงไม่มีปัญหาอะไรถ้าฟังก์ชัน callback จะรับแค่ค่าเดียว เช่นใน alert

Introduced in JavaScript 1.8

  • reduce(callback[, initialValue])ใช้กับฟังก์ชัน callback(firstValue, secondValue)เพิ่อแปลงค่าจากอาร์เรย์ให้เหลือค่าเดียว
    var a = [10, 20, 30];
    var total = a.reduce(function(first, second) { return first + second; }, 0);
    alert(total) // Alerts 60
    
  • reduceRight(callback[, initialValue])ทำงานเหมือน reduce()แต่เริ่มจากสมาชิกตัวสุดท้าย

reduce และ reduceRight พบได้น้อยในการทำงานแบบวนซ้ำกับอาร์เรย์ โดยมักจะใช้ในโปรแกรมที่ทำการรวมข้อมูลที่เรียงเป็นชุดให้เป็นข้อมูลค่าเดียว

อาร์เรย์หลายมิติ

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

โค้ดต่อไปนี้สร้างอาร์เรย์แบบสองมิติ

var a = new Array(4);
for (i = 0; i < 4; i++) {
  a[i] = new Array(4);
  for (j = 0; j < 4; j++) {
    a[i][j] = "[" + i + "," + j + "]";
  }
}

จากตัวอย่าง จะได้อาร์เรย์ที่มีข้อมูลในแต่ละแถวเป็นดังนี้:

Row 0: [0,0] [0,1] [0,2] [0,3]
Row 1: [1,0] [1,1] [1,2] [1,3]
Row 2: [2,0] [2,1] [2,2] [2,3]
Row 3: [3,0] [3,1] [3,2] [3,3]

อาร์เรย์และ Regular Expression

เมื่อผลลัพธ์ของการค้นหาค่าในสตริงด้วย regular expression เป็นค่าอาร์เรย์ อาร์เรย์นั้นจะมีคุณสมบัติและสมาชิกที่มีข้อมูลเกี่ยวข้องกับการค้นหานั้น โดยเราจะได้ผลลัพธ์ที่เป็นค่าอาร์เรย์จากเมธอด RegExp.exec(), String.match(), และ String.split()ซึ่งสามารถดูวิธีการใช้อาร์เรย์กับ regular expression เพิ่มเติมได้ที่ Regular Expressions

การทำงานกับอ็อบเจกต์ที่ดูเหมือนอาร์เรย์

Introduced in JavaScript 1.6

มีอ็อบเจกต์จาวาสคริปต์บางตัว เช่น NodeList ที่ได้จาก document.getElementsByTagName()หรือ arguments ที่ใช้งานได้ในฟังก์ชัน ที่ดูผิวเผินจะเหมือนอาร์เรย์ แต่ไม่มีเมธอดของอาร์เรย์ทั้งหมด เช่น อ็อบเจกต์ arguments มีคุณสมบัติ length แต่ไม่มีเมธอด forEach()

คำสั่งจัดการแบบอาร์เรย์ ที่เริ่มมีใช้ในจาวาสคริปต์ 1.6 ช่วยให้เราใช้เมธอดของอ็อบเจกต์ Array กับอ็อบเจกต์ที่ดูเหมือนอาร์เรย์ได้ โดยแต่ละคำสั่งจะมีชื่อที่ตรงกันกับเมธอดของอ็อบเจกต์ Array ตัวอย่างเช่น:

 function alertArguments() {
   Array.forEach(arguments, function(item) {
     alert(item);
   });
 }

ซึ่งคำสั่งจัดการแบบอาร์เรย์เหล่านี้  สามารถเขียนให้ชัดเจนเพื่อใช้ในจาวาสคริปต์เวอร์ชันเก่า โดยเรียกใช้เมธอด call ของอ็อบเจกต์ฟังก์ชัน:

 Array.prototype.forEach.call(arguments, function(item) {
   alert(item);
 });

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

Array.forEach("a string", function(chr) {
   alert(chr);
});

ตัวอย่างต่อไป เป็นวิธีการใช้คำสั่งจัดการแบบอาร์เรย์กับสตริง และยังใช้ประโยชน์จาก JavaScript 1.8 expression closures ด้วย:

var str = 'abcdef';
var consonantsOnlyStr = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf'
var vowelsPresent = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true
var allVowels = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false
var interpolatedZeros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0'
var numerologicalValue = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0);
// 21 (reduce() since JS v1.8)

สังเกตุได้ว่า filter และ map ไม่ได้คืนค่าผลลัพธ์แบบสตริงที่มีอักขระเป็นสมาชิกอยู่ข้างใน แต่ได้ค่าเป็นอาร์เรย์แทน โดยเราต้องใช้เมธอด join เพื่อแปลงให้กลับเป็นสตริง

การสร้างอาร์เรย์แบบ comprehension

Introduced in JavaScript 1.7

เริ่มมีใช้ในจาวาสคริปต์ 1.7, การสร้างอาร์เรย์แบบ comprehension นี้ช่วยให้เราสร้างอาร์เรย์ใหม่จากข้อมูลของอาร์เรย์อีกตัวได้ โดยบ่อยครั้งที่เราใช้แทนเมธอด map() และ filter() หรือใช้เมื่อต้องการทั้งสองอย่าง

การสร้างอาร์เรย์แบบ comprehension ต่อไปนี้ รับอาร์เรย์ของตัวเลขและสร้างอาร์เรย์ใหม่ที่มีค่าเป็นสองเท่าของค่าเดิม

var numbers = [1, 2, 3, 4];
var doubled = [i * 2 for (i of numbers)];
alert(doubled); // Alerts 2,4,6,8

ซึ่งได้ผลลัพธ์เทียบเท่ากับที่ได้จากเมธอด map() ดังนี้:

var doubled = numbers.map(function(i){return i * 2;});

การสร้างอาร์เรย์แบบ comprehension ยังสามารถใช้เพื่อเลือกสมาชิกที่ตรงกับเงื่อนไขเฉพาะได้ เช่นตัวอย่างการสร้างอาร์เรย์ที่เลือกเฉพาะเลขคู่เท่านั้น:

var numbers = [1, 2, 3, 21, 22, 30];
var evens = [i for (i of numbers) if (i % 2 === 0)];
alert(evens); // Alerts 2,22,30

ซึ่งสามารถใช้ filter() เพื่อวัตถุประสงค์เดียวกันนี้ได้:

var evens = numbers.filter(function(i){return i % 2 === 0;});

การใช้งาน map() และ filter()  สามารถรวมเข้าด้วยกัน โดยใช้การสร้างอาร์เรย์แบบ comprehension ได้ในครั้งเดียว ตัวอย่างนี้ ทำการเลือกเฉพาะเลขคู่และสร้างอาร์เรย์ที่มีค่าเป็นสองเท่าของมัน:

var numbers = [1, 2, 3, 21, 22, 30];
var doubledEvens = [i * 2 for (i of numbers) if (i % 2 === 0)];
alert(doubledEvens); // Alerts 4,44,60

วงเล็บเหลี่ยมที่ใช้ในการสร้างอาร์เรย์แบบ comprehension ทำให้เกิดบล็อกแฝงขึ้นเพื่อจำกัดขอบเขตการทำงาน โดยตัวแปรใหม่ภายในบล็อกนี้ (เช่น i ในตัวอย่าง) จะถูกดำเนินการเหมือนกับว่าถูกประกาศโดยใช้คำสั่ง let ซึ่งหมายความได้ว่ามันไม่สามารถเรียกใช้ได้นอกบล็อกนี้

ข้อมูลเริ่มต้นที่ใช้สร้างอาร์เรย์แบบ comprehension นี้ ไม่จำเป็นต้องอาร์เรย์เสมอไป สามารถใช้ iterators and generators ได้

แม้กระทั่งสตริงก็สามารถใช้เป็นข้อมูลเริ่มต้นได้ ตัวอย่างต่อไปนี้ เป็นการรวมคำสั่ง filter และ map ของตัวอย่างข้างบน โดยใช้การสร้างอาร์เรย์แบบ comperhension กับสตริง:

var str = 'abcdef';
var consonantsOnlyStr = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c))  ].join(''); // 'bcdf'
var interpolatedZeros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0'

ซึ่งจะได้ผลลัพธ์เป็นคนละแบบกับข้อมูลเริ่มต้น นั่นคือเราต้องใช้คำสั่ง join() เพื่อแปลงอาร์เรย์ที่ได้ให้กลับเป็นสตริงอีกครั้ง

อ็อบเจกต์ Boolean

อ็อบเจกต์ Boolean คือตัวหุ้มค่าข้อมูลพื้นฐานตรรกะ โดยมีรูปแบบการสร้างอ็อบเจกต์ Boolean ดังนี้:

var booleanObjectName = new Boolean(value);

อย่าสับสนระหว่างค่าข้อมูลพื้นฐานตรรกะ true และ false กับค่าของอ็อบเจ็กต์ Boolean ซึ่งอ็อบเจกต์ใดก็ตามที่ไม่ใช่ undefined, null, 0, NaN หรือสตริงว่าง และรวมถึงอ็อบเจกต์ Boolean ที่มีค่าเป็น false, จะประมวลค่าได้ผลลัพธ์เป็น true เมื่อใช้ในคำสั่งเงื่อนไข ดูข้อมูลเพิ่มเติมที่ if...else Statement

อ็อบเจกต์ Date

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

จาวาสคริปต์จัดการข้อมูลวันที่คล้ายกับจาวา โดยทั้งสองภาษามีเมธอดจัดการวันที่เหมือนกันหลายตัว และภาษาทั้งคู่จัดเก็บวันที่ เป็นจำนวนมิลลิวินาทีตั้งแต่วันที่ 1 มกราคม ค.ศ. 1970 เวลา 00:00:00

อ็อบเจกต์ Date มีค่าอยู่ในช่วง -100,000,000 วัน ถึง 100,000,000 วัน นับจากวันที่ 1 มกราคม ค.ศ. 1970 ตามเวลามาตรฐาน (UTC)

การสร้างอ็อบเจกต์ Date ทำได้ดังนี้:

var dateObjectName = new Date([parameters]);

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

การใช้คำสั่ง Date ที่ไม่มี new นำหน้า คือการแปลงวันที่ให้เป็นสตริง

โดยตัวแปร parameters ที่ใช้ในคำสั่ง สามารถมีค่าได้ดังต่อไปนี้:

  • ไม่กำหนด: จะสร้างวันที่และเวลาปัจจุบัน เช่น,  today = new Date();
  • ค่าสตริงในรูปแบบต่อไปนี้: "เดือน วัน, ปี ชั่วโมง:นาที:วินาที" เช่น var Xmas95 = new Date("December 25, 1995 13:30:00"), ถ้าไม่ระบุค่า ชั่วโมง, นาที, หรือวินาที จะถูกกำหนดให้เป็นศูนย์
  • ชุดตัวเลขจำนวนเต็มมีค่าเป็น ปี, เดือน, และวัน เช่น, var Xmas95 = new Date(1995, 11, 25)
  • ชุดตัวเลขจำนวนเต็มมีค่าเป็น ปี, เดือน, วัน, ชั่วโมง, นาที, และวินาที เช่น, var Xmas95 = new Date(1995, 11, 25, 9, 30, 0)

ในจาวาสคริปต์ 1.2 และก่อนหน้า
อ็อบเจกต์ Date มีการทำงานดังนี้:

  • ไม่รับวันที่ก่อนปี 1970
  • การทำงานของจาวาสคริปต์จะขึ้นกับวิธีจัดการและใช้งานข้อมูลวันที่ของแต่ละระบบ นั่นคือการทำงานของอ็อบเจกต์ Date มีความแตกต่างกันไปในแต่ละระบบ

เมธอดของอ็อบเจกต์ Date

เมธอดของอ็อบเจกต์ Date ที่จัดการข้อมูลวันที่และเวลา แบ่งออกได้เป็นกลุ่มใหญ่ๆดังนี้:

  • เมธอด set , ใช้กำหนดค่าข้อมูลวันที่และเวลาของอ็อบเจกต์ Date
  • เมธอด get , ใช้ดึงค่าข้อมูลวันที่และเวลาจากอ็อบเจกต์ Date
  • เมธอด to , ใช้คืนค่าสตริงจากอ็อบเจกต์ Date
  • เมธอด parse และ UTC , ใช้แปลงค่าสตริงเป็นอ็อบเจกต์ Date

ด้วยเมธอด get และ set คุณสามารถกำหนดและดึงค่า วินาที, นาที, ชั่วโมง, วันในเดือน, วันในสัปดาห์, เดือน, และปี แยกจากกันได้ โดยมีเมธอด getDay ที่คืนค่าวันในสัปดาห์ แต่ไม่มีเมธอด setDay เพราะว่าวันในสัปดาห์ถูกกำหนดให้โดยอัตโนมัติ ซึ่งเมธอดเหล่านี้ใช้ตัวเลขจำนวนเต็มแทนค่าต่างๆดังนี้:

  • วินาทีและนาที: 0 ถึง 59
  • ชั่วโมง: 0 ถึง 23
  • วัน: 0 (วันอาทิตย์) ถึง 6 (วันเสาร์)
  • วันที่: 1 ถึง 31 (วันในเดือน)
  • เดือน: 0 (มกราคม) ถึง 11 (ธันวาคม)
  • ปี: จำนวนปีตั้งเต่ ค.ศ. 1900

ตัวอย่าง เช่น, สมมุติว่าคุณสร้างวันที่ต่อไปนี้:

var Xmas95 = new Date("December 25, 1995");

เมื่อเรียก Xmas95.getMonth() จะได้ค่า 11, และ Xmas95.getFullYear() จะได้ 1995

เมธอด getTime และ setTime ใช้ประโยชน์ในการเปรียบเทียบวันที่ โดยเมธอด getTime จะคืนค่าจำนวนมิลลิวินาทีตั้งแต่วันที่ 1 มกราคม ค.ศ. 1970 เวลา 00:00:00 จากอ็อบเจกต์ Date

ตัวอย่างต่อไปนี้แสดงจำนวนวันที่เหลือในปีปัจจุบัน:

var today = new Date();
var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month
endYear.setFullYear(today.getFullYear()); // Set year to this year
var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
var daysLeft = Math.round(daysLeft); //returns days left in the year

ตัวอย่างนี้สร้างอ็อบเจกต์ Date ชื่อ today ซึ่งเก็บวันที่ปัจจุบัน และสร้างอ็อบเจกต์  Date ชื่อ endYear แล้วตั้งค่าปีเป็นปีปัจจุบัน จากนั้นใช้จำนวนมิลลิวินาทีในหนึ่งวันคำนวณค่าจำนวนวันระหว่าง today กับ endYear ด้วย getTime และปัดให้เป็นจำนวนเต็มวัน

เมธอด parse ใช้ประโยชน์ในการกำหนดค่าจากสตริงให้กับอ็อบเจกต์ Date ที่มีอยู่แล้ว เช่นในตัวอย่างต่อไปนี้​, ใช้ parse และ setTime เพื่อกำหนดค่าวันที่ให้อ็อบเจกต์ IPOdate:

var IPOdate = new Date();
IPOdate.setTime(Date.parse("Aug 9, 1995"));

ตัวอย่างการใช้อ็อบเจกต์ Date

ในตัวอย่างต่อไปนี้, ฟังก์ชัน JSClock() จะคืนค่าเวลาในรูปแบบนาฬิกาดิจิตอล

function JSClock() {
  var time = new Date();
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();
  var temp = "" + ((hour > 12) ? hour - 12 : hour);
  if (hour == 0)
    temp = "12";
  temp += ((minute < 10) ? ":0" : ":") + minute;
  temp += ((second < 10) ? ":0" : ":") + second;
  temp += (hour >= 12) ? " P.M." : " A.M.";
  return temp;
}

ในตอนแรก ฟังก์ชัน JSClock จะสร้างอ็อบเจกต์ Date ขึ้นใหม่ชื่อ time โดยไม่กำหนดค่าใดๆ ซึ่งทำให้ time มีค่าเริ่มต้นเป็นวันที่และเวลาปัจจุบัน จากนั้นจะเรียกเมธอด getHours, getMinutes, และ getSeconds เพื่อกำหนดค่าเวลาปัจจุบันให้ตัวแปร hour, minute, และ second

สี่คำสั่งถัดมาจะสร้างค่าสตริงจากเวลาที่ได้ โดยคำสั่งแรกจะสร้างตัวแปร temp และกำหนดค่าด้วยนิพจน์เงื่อนไข ถ้า hour มากกว่า 12 ให้ใช้ค่า (hour - 12), นอกนั้นให้ใช้ค่า hour, ถ้า hour เป็น 0 ให้ใช้ค่า 12

คำสั่งถัดมาจะเพิ่มค่า minute ไปที่ temp โดยถ้าค่าของ minute น้อยกว่า 10, นิพจน์เงื่อนไขจะเพิ่มศูนย์ไปข้างหน้าสตริง นอกนั้นจะเพิ่ม colon เข้าไปหน้าสตริง จากนั้นคำสั่งต่อมาก็จะเพิ่มค่า seconds ไปที่ temp ด้วยวิธีเดียวกัน

ท้ายสุด, นิพจน์เงื่อนไขจะเพิ่ม "PM" ไปที่ temp ถ้า hour เท่ากับหรือน้อยกว่า 12, นอกจากนั้น มันจะเพิ่ม "AM" ไปที่ temp

อ็อบเจกต์ Function

อ็อบเจกต์พื้นฐาน Function นำสตริงที่มีโค้ดจาวาสคริปต์ มาแปลให้เป็นฟังก์ชัน

โดยมีวิธีสร้างอ็อบเจกต์ Function ดังนี้:

var functionObjectName = new Function ([arg1, arg2, ... argn], functionBody);

functionObjectName คือชื่อของตัวแปร หรือคุณสมบัติของอ็อบเจกต์ที่มึอยู่แล้ว โดยสามารถใช้ชื่ออ็อบเจกต์ตามด้วยชื่อตัวจัดการเหตุการณ์แบบอักษรตัวเล็กได้ เช่น window.onerror

arg1, arg2, ... argn เป็นค่าข้อมูลที่ฟังก์ชันใช้โดยระบุชื่อแต่ละตัวด้วยสตริง ที่มีรูปแบบถูกต้องตามชื่อตัวแปรของจาวาสคริปต์ เช่น "x" หรือ "theForm"

functionBody คือสตริงที่มีโค้ดจาวาสคริปต์ ที่ต้องการแปลให้เป็นตัวฟังก์ชัน

อ็อบเจกต์ Function จะถูกประมวลค่าทุกครั้งที่มันถูกเรียกใช้ ทำให้มีประสิทธิภาพน้อยกว่าการประกาศฟังก์ชันและเรียกใช้ในโค้ด เพราะว่าฟังก์ชันที่ประกาศไว้จะถูกแปลก่อนการใช้งาน

นอกจากการสร้างฟังก์ชันตามแบบที่อธิบายนี้แล้ว, คุณยังสามารถใช้ function statement และ นิพจน์ฟังก์ชันได้ โดยดูข้อมูลเพิ่มเติมได้ที่ JavaScript Reference

โค้ดต่อไปนี้จะกำหนดค่าฟังก์ชันให้กับตัวแปร setBGColor โดยฟังก์ชันนี้จะทำการตั้งค่าสีพื้นของเอกสาร

var setBGColor = new Function("document.bgColor = 'antiquewhite'");

ในการเรียกใช้อ็อบเจกต์ Function คุุณใช้ชื่อตัวแปรเหมือนว่าเป็นฟังก์ชัน โดยโค้ดต่อไปนี้เรียกใช้งานฟังก์ชันจากตัวแปร setBGColor :

var colorChoice="antiquewhite";
if (colorChoice=="antiquewhite") {setBGColor()}

คุณสามารถกำหนดค่าฟังก์ชันให้กับตัวจัดการเหตุการณ์ ได้จากสองวิธีต่อไปนี้:

  1. document.form1.colorButton.onclick = setBGColor;
    
  2. <INPUT NAME="colorButton" TYPE="button"
      VALUE="Change background color"
      onClick="setBGColor()">
    

การสร้างตัวแปร setBGColor ที่แสดงข้างบนจะคล้ายกับการประกาศฟังก์ชันต่อไปนี้:

function setBGColor() {
  document.bgColor = 'antiquewhite';
}

การกำหนดค่าฟังก์ชันให้กับตัวแปรจะคล้ายกับการประกาศฟังก์ชัน แต่แตกต่างกันที่:

  • เมื่อคุณกำหนดค่าฟังก์ชันให้ตัวแปรด้วย var setBGColor = new Function("..."), ตัวแปร setBGColor จะมีค่าอ้างอิงไปที่ฟังก์ชันที่ถูกสร้างด้วย new Function()
  • เมื่อคุณสร้างฟังก์ชันด้วย function setBGColor() {...}, setBGColor จะไม่ใช่ตัวแปร แต่เป็นชื่อของฟังก์ชัน

คุณสามารถซ้อนฟังก์ชันในฟังก์ชันได้ ซึ่งฟังก์ชันที่ถูกซ้อน (ตัวใน) จะมองเห็นได้จากฟังก์ชันที่หุ้มมันอยู่ (ตัวนอก) เท่านั้น โดยที่:

  • ฟังก์ชันตัวในจะถูกเข้าถึงได้เฉพาะจากคำสั่งของฟังก์ชันตัวนอกเท่านั้น
  • ฟังก์ชันตัวในจะสามารถใช้ตัวแปรรับเข้าและตัวแปรต่างๆของฟังก์ชันตัวนอกได้ แต่ฟังก์ชันตัวนอกจะไม่สามารถใช้ตัวแปรรับเข้าและตัวแปรต่างๆของฟังก์ชันตัวในได้

อ็อบเจกต์ Math

อ็อบเจกต์ Math มีคุณสมบัติและเมธอดต่างๆที่ใช้ในค่าคงที่และฟังก์ชันทางคณิตศาสตร์ ตัวอย่างเช่น, คุณสมบัติ PI ของอ็อบเจกต์ Math มีค่าของ pi (3.141...) ซึ่งคุณสามารถใช้ในแอปพลิเคชันได้ดังนี้

Math.PI

เช่นเดียวกัน, ฟังก์ชันพื้นฐานทางคณิตศาสตร์ก็คือเมธอดของอ็อบเจกต์ Math ซึ่งประกอบด้วย ตรีโกณมิติ, ล็อกการิทึม, เลขยกกำลัง, และฟังก์ชันอื่นๆ ตัวอย่างเช่น, ถ้าคุณต้องการใช้ฟังก์ชันตรีโกณมิติ sine คุณสามารถเขียนได้ดังนี้

Math.sin(1.56)

สังเกตุว่าเมธอดตรีโกณมิติรับค่าเข้าเป็นมุมเรเดียน

ตารางต่อไปนี้สรุปเมธอดต่างๆของอ็อบเจกต์ Math

ตาราง 7.1 เมธอดต่างๆของอ็อบเจกต์ Math
Method Description
abs ค่าสัมบูรณ์
sin, cos, tan ฟังก์ชันมาตรฐานตรีโกณมิติ รับค่ามุมเรเดียน
acos, asin, atan, atan2 ฟังก์ชันอินเวอร์สตรีโกณมิติ คืนค่ามุมเรเดียน
exp, log เลขยกกำลัง และลอการิทึมธรรมชาติ, ฐาน e
ceil คืนค่าเลขจำนวนเต็ม ที่มากกว่าหรือเท่ากับค่าที่รับเข้ามา
floor คืนค่าเลขจำนวนเต็ม ที่มากที่สุดแต่น้อยกว่าหรือเท่ากับค่าที่รับเข้ามา
min, max คืนค่าที่มากกว่าหรือน้อยกว่า (ตามลำดับ) ของสองค่าที่รับเข้ามา
pow ยกกำลัง, ค่ารับเข้าตัวแรกเป็นฐาน ตัวที่สองเป็นเลขกำลัง
random คืนค่าตัวเลขสุ่ม ที่อยู่ระหว่าง 0 และ 1
round ปัดค่าตัวเลขรับเข้าให้เป็นเลขตำนวนเต็มที่ใกล้เคียงที่สุด
sqrt รากที่สอง

ที่ไม่เหมือนกับอ็อบเจกต์อื่นคือ คุณไม่จำเป็นต้องสร้างอ็อบเจกต์ Math ของตัวเอง คุณใช้จากอ็อบเจกต์ Math พื้นฐานเสมอ

อ็อบเจกต์ Number

อ็อบเจกต์ Number มีคุณสมบัติต่างๆที่ใช้เป็นตัวเลขค่าคงที่ เช่นค่ามากสุด, NaN (not-a-number), ค่าอนันต์ (infinity) โดยคุณไม่สามารถเปลี่ยนค่าคุณสมบัติเหล่านี้ได้ และมีวิธีการใช้งานดังนี้:

var biggestNum = Number.MAX_VALUE;
var smallestNum = Number.MIN_VALUE;
var infiniteNum = Number.POSITIVE_INFINITY;
var negInfiniteNum = Number.NEGATIVE_INFINITY;
var notANum = Number.NaN;

คุณมักอ้างถึงคุณสมบัติจากอ็อบเจกต์ Number พื้นฐานตามวิธีข้างบนเสมอ ไม่ใช่จากอ็อบเจกต์ Number ที่คุณสร้างเอง

ตารางต่อไปนี้สรุปคุณสมบัติต่างๆของอ็อบเจกต์ Number

ตาราง 7.2 คุณสมบัติต่างๆของอ็อบเจกต์ Number
Property Description
MAX_VALUE ตัวเลขที่มากที่สุด
MIN_VALUE ตัวเลขที่น้อยที่สุด
NaN ค่าข้อมูลที่ไม่ใช่ตัวเลข ("not a number")
NEGATIVE_INFINITY ค่าลบอนันต์, ได้จากการหารด้วยศูนย์ (overflow)
POSITIVE_INFINITY ค่าบวกอนันต์, ได้จากการหารด้วยศูนย์ (overflow)

โปรโตไทป์ของ Number มีเมธอดที่ช่วยแปลงค่าจากอ็อบเจกต์ Number หลายรูปแบบ โดยตารางต่อไปนี้สรุปเมธอดต่างๆของ  Number.prototype

ตาราง 7.3 เมธอดต่างๆของ Number.prototype
Method Description
toExponential คืนค่าสตริงจากตัวเลข ในรูปแบบเลขยกกำลัง
toFixed คืนค่าสตริงจากตัวเลข ในรูปแบบทศนิยม โดยระบุจำนวนหลักทศนิยม
toPrecision คืนค่าสตริงจากตัวเลข ในรูปแบบทศนิยม โดยระบุนัยสำคัญ
toSource คืนค่าข้อมูลอ็อบเจกต์จากอ็อบเจกต์ Number ที่กำหนด คุณสามารถใช้เพื่อสร้างอ็อบเจกต์ใหม่ได้ แทนที่เมธอด Object.toSource()
toString คืนค่าสตริงจากอ็อบเจกต์ที่กำหนด แทนที่เมธอด Object.toString
valueOf คืนชนิดข้อมูลพื้นฐานของอ็อบเจกต์ที่ระบุ แทนที่เมธอด Object.toString

อ็อบเจกต์ RegExp

อ็อบเจกต์ RegExp ช่วยให้คุณทำงานกับ regular expression ได้ โดยมีรายละเอียดอยู่ที่ Regular Expressions

อ็อบเจกต์ String

อ็อบเจกต์ String คือตัวหุ้มข้อมูลพื้นฐานสตริง โดยต้องไม่สับสนระหว่างค่าข้อมูลสตริง กับอ็อบเจกต์ String ในตัวอย่างโค้ดต่อไปนี้, ได้ทำการสร้างค่าข้อมูล s1 และอ็อบเจกต์ String s2

var s1 = "foo"; //creates a string literal value
var s2 = new String("foo"); //creates a String object

คุณสามารถใช้เมธอดใดก็ได้ของอ็อบเจกต์ String กับค่าข้อมูลสตริง — จาวาสคริปต์จะแปลงค่าข้อมูลสตริงให้เป็นอ็อบเจดต์ String ชั่วคราว และเรียกใช้เมธอด แล้วทิ้งอ็อบเจกต์ String ชั่วคราวนั้นไป โดยคุณสามารถใช้คุณสมบัติ String.length กับค่าข้อมูลสตริงได้ด้วย

คุณควรใช้ค่าข้อมูลสตริง ถ้าคุณไม่จำเป็นต้องใช้อ็อบเจกต์ String เพราะว่าอ็อบเจกต์ String อาจจะให้ผลลัพธ์ที่ไม่คาดคิดได้:

var s1 = "2 + 2"; //creates a string literal value
var s2 = new String("2 + 2"); //creates a String object
eval(s1); //returns the number 4
eval(s2); //returns the string "2 + 2"

อ็อบเจกต์ String มีคุณสมบัติเดียวคือ length ซึ่งระบุจำนวนอักขระในสตริง เช่น, ในโค้ดทำให้ x มีค่าเป็น 13 เพราะ "Hello, World" มีความยาว 13 อักขระ:

var mystring = "Hello, World!";
var x = mystring.length;

อ็อบเจกต์ String มีเมธอดสองชนิด: ชนิดแรกจะคืนค่าที่เปลี่ยนไปของตัวสตริงเอง เช่น substring และ toUpperCase อีกชนิดจะคืนค่าสตริงที่ถูกจัดรูปแบบ HTML เช่น bold และ link

เช่น, ในตัวอย่างก่อนหน้า ทั้ง mystring.toUpperCase() และ "hello, world!".toUpperCase()ต่างก็คืนค่าสตริง "HELLO, WORLD!"

เมธอด substring รับค่าข้อมูลเข้าสองตัว และคืนสตริงย่อยระหว่างค่าสองค่านั้น จากตัวอย่างก่อนหน้า, mystring.substring(4, 9) จะคืนค่าสตริง "o, Wo" โดยดูข้อมูลเพิ่มเติมเรื่อง substring ของอ็อบเจกต์ String ได้ใน JavaScript Reference

อ็อบเจกต์ String มีเมธอดหลายตัวที่สามารถจัดรูปแบบ HTML ได้ เช่น bold ใช้สร้างตัวหนังสือตัวทึบ และ link ใช้สร้างไฮเปอร์ลิิ๊งค์ ตัวอย่างเช่น, คุณสามารถสร้างไฮเปอร์ลิิ๊งค์ให้ URL สมมุติ ด้วยเมธอด link ดังนี้:

mystring.link("https://www.helloworld.com")

ตารางต่อไปนี้ สรุปเมธอดต่างๆของอ็อบเจกต์ String

ตาราง 7.4 เมธอดต่างๆของอ็อบเจกต์ String
Method Description
anchor สร้าง <a> ที่ระบุชื่อ
big, blink, bold, fixed, italics, small, strike, sub, sup สร้างสตริงรูปแบบ HTML
charAt, charCodeAt คืนค่าอักขระ หรือรหัสอักขระ จากตำแหน่งที่กำหนดในสตริง
indexOf, lastIndexOf คืนค่าตำแหน่งของสตริงย่อยในสตริง หรือตำแหน่งสุดท้ายของสตริงย่อย ตามลำดับ
link สร้างไฮเปอร์ลิงค์ HTML
concat รวมสองสตริงเข้าด้วยกัน และคืนสตริงใหม่
fromCharCode สร้างสตริงจากลำดับข้อมูลยูนิโค้ด เป็นเมธอดของชนิดอ็อบเจกต์ String, ไม่ใช่ของอ็อบเจกต์ String
split แบ่งอ็อบเจกต์ String เป็นอาร์เรย์ของสตริง โดยแยกสตริงให้เป็นหลายๆสตริงย่อย
slice ดึงส่วนของสตริงออก และคืนสตริงใหม่
substring, substr คืนสตริงย่อยที่ระบุโดยตำแหน่งเริ่มต้นและสิ้นสุด หรือตำแหน่งเริ่มต้นและความยาวที่ต้องการ
match, replace, search ใช้กับ regular expression
toLowerCase, toUpperCase

คืนสตริงในแบบตัวอักษรเล็กทั้งหมด หรือใหญ่ทั้งหมด ตามลำดับ

Document Tags and Contributors

 Contributors to this page: Zarazi
 Last updated by: Zarazi,