JavaScript ES5

ECMAScript 5 ແມ່ນຫຍັງ?

ECMAScript 5 ບັນເອີນ ES5 ແລະ ECMAScript 2009.

ວັດສະດຸນີ້ສະເໜີບັນດາພັນທະສັນຍາຫນັງສຸດສຸດຂອງ ES5.

ECMAScript 5 特性

ນີ້ແມ່ນບັນດາພັນທະສັນຍາພາຍໃນ 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()
  • Property Getter and Setter
  • ວິທີການຫາສັນຍາລັກພາສາແລະວິທີການປະກອບອາງວຽງ

ECMAScript 5 语法更改

  • 访问字符串的属性 [ ]
  • 尾随逗号在数组和对象字面量中
  • 多行字符串字面量
  • ວິທະຍານຂັດສະນະນັບຫມາຍຂອງວິທະຍານປະຈຳສາຍ.

"use strict" 指令

"use strict"

ບົດຢ່າງນີ້, ທ່ານບໍ່ສາມາດໃຊ້ວັດຖຸທີ່ບໍ່ໄດ້ປະກາດໃນ "strict mode".

ທ່ານສາມາດໃຊ້ວິທີການ "strict mode" ໃນທຸກໆເລື່ອງຂອງໂຄງການ. ມັນຈະຊ່ວຍທ່ານຂຽນວິການທີ່ຫຼາຍຫນັງ, ເຊິ່ງເປັນຫນັງທີ່ບໍ່ອະນຸຍາດທີ່ຈະໃຊ້ວັດຖຸທີ່ບໍ່ໄດ້ປະກາດ.

"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 ກວດກາຫຼັງຈາກນີ້.

Array.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 ຂໍ້ມູນຂອງພວກເຮົາ

Array.map()

ບົດຢ່າງນີ້ສະເໜີການສ້າງຈຳນວນທີ່ທາງໄປສອງຂອງວັດຖຸທີ່ມີໃນອາກາດ:

ຄວາມຄົງ

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

ທ້າທາຍດັ່ງກ່າວ

ກຳລັງ JS Array Iteration Methods ຂໍ້ມູນຂອງພວກເຮົາ

Array.filter()

ບົດຢ່າງນີ້ສະເໜີການສ້າງອາກາດໃໝ່ຈາກວັດຖຸທີ່ມີຈຳນວນຫຼາຍກວ່າ 18:

ຄວາມຄົງ

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

ທ້າທາຍດັ່ງກ່າວ

ກຳລັງ JS Array Iteration Methods ຂໍ້ມູນຂອງພວກເຮົາ

Array.reduce()

ບົດຢ່າງນີ້ສະເໜີການບັນທຶກຄວາມຂອງຈຳນວນຂອງວັດຖຸທັງໝົດໃນອາກາດວິການຄື:

ຄວາມຄົງ

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

ທ້າທາຍດັ່ງກ່າວ

ກຳລັງ JS Array Iteration Methods ຂໍ້ມູນຂອງພວກເຮົາ

Array.reduceRight()

ບົດການນັ້ນຈະກວດກາວ່າມີການກວ່າຫລາຍກວ່າ 18:

ຄວາມຄົງ

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

ທ້າທາຍດັ່ງກ່າວ

ກຳລັງ JS Array Iteration Methods ຂໍ້ມູນຂອງພວກເຮົາ

Array.every()

ບົດການນັ້ນຈະກວດກາວ່າມີການກວ່າຫລາຍກວ່າ 18:

ຄວາມຄົງ

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

ທ້າທາຍດັ່ງກ່າວ

ກຳລັງ JS Array Iteration Methods ຂໍ້ມູນຂອງພວກເຮົາ

Array.some()

ບົດການນັ້ນຈະກວດກາວ່າມີຄຳຂອງວິສະວະກຳທີ່ກາຍຫລາຍກວ່າ 18:

ຄວາມຄົງ

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

ທ້າທາຍດັ່ງກ່າວ

ກຳລັງ JS Array Iteration Methods ຂໍ້ມູນຂອງພວກເຮົາ

Array.indexOf()

ຄົ້ນຫາຄຳຂອງວິສະວະກຳໃນວິສະວະກຳສະໝອງອອກຫລັງຈາກຄຳຂອງວິສະວະກຳດັ່ງກ່າວແລະກັບຄຳຂອງວິສະວະກຳອອກຫລັງຈາກຄຳຂອງວິສະວະກຳ:

ຄວາມຄົງ

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

ທ້າທາຍດັ່ງກ່າວ

ກຳລັງ JS Array Iteration Methodsຂໍ້ມູນຂອງພວກເຮົາ

Array.lastIndexOf()

Array.lastIndexOf() ກັບ Array.indexOf() ຄືກັນຢ່າງໃດກໍ່ຕາມທີ່ຈະຄົ້ນຫາຈາກດ້ານຫລັງຂອງວິສະວະກຳ:

ຄວາມຄົງ

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

ທ້າທາຍດັ່ງກ່າວ

ກຳລັງ JS Array Iteration Methods ຂໍ້ມູນຂອງພວກເຮົາ

JSON.parse()

ການນຳໃຊ້ຂອງ JSON ແມ່ນຈະຮັບຂໍ້ມູນຈາກ Web 服务器:

ຄິດວ່າພວກເຮົາຈະຮັບຄຳຂອງວິຊານັ້ນຈາກ Web 服务器:

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

XML JavaScript ການສະແດງ JSON.parse() ການນຳໃຊ້ຂອງຫົວຫນັງທີ່ຖືກປ່ຽນເປັນອັນດັບພະຍານ JavaScript:

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

ທ້າທາຍດັ່ງກ່າວ

ກະລຸນາໄປຫາ JSON Tutorial ຂໍ້ມູນຂອງພວກເຮົາ

JSON.stringify()

ການນຳໃຊ້ຂອງ JSON ແມ່ນຈະສົ່ງຂໍ້ມູນໄປຫາ Web 服务器:

ບໍ່ວ່າຂ້ອຍຈະສົ່ງຂໍ້ມູນໄປຫາ Web 服务器ບໍ່ວ່າມັນຄວນເປັນຄຳຂອງວິຊາ:

ຄິດວ່າພວກເຮົາມີອັນດັບພະຍານນັ້ນໃນ JavaScript:

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

ກະລຸນາໃຊ້ຫົວຫນັງ JavaScript JSON.stringify() ເພື່ອແປງເປັນຄຳຂອງວິຊາ:

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 Tutorial ຂໍ້ມູນຂອງພວກເຮົາ

Date.now()

Date.now() ອາດກັບຄົນກວ່າການດຳເນີນວິທີການ getTime() ໃນບັນຊີ Date.

ຄວາມຄົງ

var timInMSs = Date.now();

ທ້າທາຍດັ່ງກ່າວ

Date.now() ມີຜົນກັບການດຳເນີນວິທີການ getTime() ໃນບັນຊີ Date.

ກຳລັງ JS Date ສຶກສາຫາລະພາສາຫຼາຍເກີນກວ່າ.

Property Getter and 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 ແລະ 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 Object Accessor ສຶກສາຫາລະພາສາ 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)

// ປ້ອງກັນການດັດແກ້ອົງກະດີ
// ປ້ອງກັນການດັດແກ້ອົງກະດີ
// ຖ້າອົງກະດີຖືກຫຼຸດການດັດແກ້ຈະກັບຄືນ true
// ປ້ອງກັນການດັດແກ້ອົງກະດີ
// ຖ້າອົງກະດີຖືກຫຼຸດການດັດແກ້ຈະກັບຄືນ true
// ປ້ອງກັນການດັດແກ້ອົງກະດີຖືກຫຼຸດການດັດແກ້ຈາກຄຳສັບຈົດສະບາຍ
// ປ້ອງກັນການດັດແກ້ອົງກະດີ
// ຖ້າອົງກະດີຖືກຫຼຸດການດັດແກ້ຈະກັບຄືນ true
// ປ້ອງກັນການດັດແກ້ອົງກະດີຖືກຫຼຸດການດັດແກ້ຈາກຄຳສັບຈົດສະບາຍ
// ປ້ອງກັນການດັດແກ້ອົງກະດີ
// ຖ້າອົງກະດີຖືກຫຼຸດການດັດແກ້ຈະກັບຄືນ true

ກຳລັງ Object.isFrozen(object) ຂໍ້ມູນຂອງພວກເຮົາ

charAt() ການກະຈາຍຄຳສັບຈົດສະບາຍ

ຄວາມຄົງ

var str = "HELLO WORLD";
str.charAt(0);            // ກັບຄືນ H

ທ້າທາຍດັ່ງກ່າວ

ECMAScript 5 ອະນຸຍາດການຢ້ຽມຢາມຄຳສັບຈົດສະບາຍ：

ຄວາມຄົງ

var str = "HELLO WORLD";
str[0];                   // ກັບຄືນ H

ທ້າທາຍດັ່ງກ່າວ

ການຢ້ຽມຢາມຂອງຄຳສັບຈົດສະບາຍສາມາດບໍ່ຄາດຄະເນຫຼາຍເທື່ອຫຼາຍກໍ່ຕາມ。

ກຳລັງ JS ການກະຈາຍຄຳສັບຈົດ ຂໍ້ມູນຂອງພວກເຮົາ

ຄຳເວລາສິບຕາມຫຼັງ(Trailing Commas)

ECMAScript 5 ອະນຸຍາດນຳໃຊ້ຄຳເວລາສິບຕາມຫຼັງໃນການອອກພາບລະບົບລະບົບແລະອົງກະດີ：

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"}

ທ້າທາຍດັ່ງກ່າວ

ການສະໜັບສະໜູນ ECMAScript 5 (ES5) ໃນບັນດາບັນດາຊາວບັນດາບາງຊາວ

Chrome 23, IE 10 ແລະ Safari 6 ແມ່ນກຸ່ມທໍາອິດທີ່ໃຫ້ການສະໜັບສະໜູນ ECMAScript 5 ຢ່າງເຕັມສ່ວນ:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
2012 ຕຸລາ 9 2012 ຕຸລາ 9 2013 ຕຸລາ 4 2012 ທັນວາ 7 2013 ທັນວາ 7