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

ECMAScript 6 คืออะไร?

ECMAScript 6 ก็เรียกว่า ES6 และ ECMAScript 2015

บางคนเรียกมันว่า JavaScript 6

บทนี้นำเสนอบทบาทใหม่บางอย่างของ ES6

  • JavaScript let
  • JavaScript const
  • การทำการยกกำึง (**)
  • ค่าเริ่มต้นที่เปิดใช้งาน
  • Array.find()
  • Array.findIndex()

การสนับสนุนของเบราเซอร์ที่สำหรับ ES6 (ECMAScript 2015)

Safari 10 และ Edge 14 คือเบราเซอร์ที่สนับสนุน ES6 อย่างเต็มที่แรก

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript let

คำสั่ง let อนุญาตให้คุณประกาศตัวแปรด้วยช่วงที่มีผลกระทบ

ตัวอย่าง

var x = 10;
// ที่นี่ x คือ 10
{ 
  let x = 2;
  // ที่นี่ x คือ 2
}
// ที่นี่ x คือ 10

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

JavaScript const

const คำสั่งอนุญาตให้คุณประกาศค่าคงที่ (ตัวแปรที่มีค่าคงที่ของ JavaScript)

ค่าคงที่เหมือน let ตัวแปร แต่ไม่สามารถเปลี่ยนค่าได้

ตัวอย่าง

var x = 10;
// ที่นี่ x คือ 10
{ 
  const x = 2;
  // ที่นี่ x คือ 2
}
// ที่นี่ x คือ 10

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

กรุณาอ่านที่ JavaScript Let / Const อ่านเพิ่มเติมเกี่ยวกับ let และ const หลังจากนั้น

การทำการหลายฐาน

การทำการยกกำึง (**จะเพิ่มค่าหนึ่งให้เป็นพหุคำของค่าที่สอง

ตัวอย่าง

var x = 5;
var z = x ** 2;          // ผลลัพธ์คือ 25

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

x ** y ผลลัพธ์ของ Math.pow(x,y) เหมือนกัน:

ตัวอย่าง

var x = 5;
var z = Math.pow(x,2);   // ผลลัพธ์คือ 25

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

ค่าเริ่มต้นที่เปิดใช้งาน

ES6 อนุญาตให้พารามิเตอร์ฟังก์ชันมีค่าเริ่มต้น

ตัวอย่าง

function myFunction(x, y = 10) {
  // y คือ 10 ถ้าไม่ได้ส่งมาหรือ undefined
  return x + y;
}
myFunction(5); // จะส่งกลับ 15

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

Array.find()

find() ฟังก์ชันนี้ส่งกลับค่าขององค์ประกอบแรกของตัวแปรแบบนี้ที่ผ่านทางฟังก์ชันทดสอบ

ตัวอย่างนี้ค้นหา (ส่งกลับ) องค์ประกอบแรกที่มีค่ามากกว่า 18

ตัวอย่าง

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

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

โปรดสังเกตว่าฟังก์ชันนี้รับ 3 ค่าตัวเลข:

  • ค่าของหน่วยงาน
  • ดัชนีของหน่วยงาน
  • ตัวอย่างเอกสาร

Array.findIndex()

findIndex() ฟังก์ชันนี้ส่งกลับดัชนีขององค์ประกอบแรกของตัวแปรแบบนี้ที่ผ่านทางฟังก์ชันทดสอบ

ตัวอย่างนี้กำหนดดัชนีขององค์ประกอบแรกที่มีค่ามากกว่า 18:

ตัวอย่าง

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

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

โปรดสังเกตว่าฟังก์ชันนี้รับ 3 ค่าตัวเลข:

  • ค่าของหน่วยงาน
  • ดัชนีของหน่วยงาน
  • ตัวอย่างเอกสาร

คุณสมบัติสำหรับตัวเลขใหม่

ES6 ได้เพิ่มคุณสมบัติตัวเลขใหม่สำหรับตัวเลข Number:

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

ตัวอย่าง

var x = Number.EPSILON;

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

ตัวอย่าง

var x = Number.MIN_SAFE_INTEGER;

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

ตัวอย่าง

var x = Number.MAX_SAFE_INTEGER;

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

วิธีสำหรับตัวเลขใหม่

ES6 ได้เพิ่ม 2 วิธีใหม่สำหรับตัวเลข Number:

  • Number.isInteger()
  • Number.isSafeInteger()

วิธี Number.isInteger()

ถ้าค่าประกาศเป็นตัวเลขเต็ม Number.isInteger() วิธีที่มีความเป็นส่วนตัว true.

ตัวอย่าง

Number.isInteger(10);        // กลับค่า true
Number.isInteger(10.5);      // กลับค่า false

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

วิธี Number.isSafeInteger()

ตัวเลขปลอดภัยเป็นตัวเลขที่สามารถแสดงในแบบเทคสโตรและแสดงค่าแบบเทคสโตรเป็นค่าที่เท่ากัน

ถ้าค่าประกาศเป็นตัวเลขปลอดภัย Number.isSafeInteger() วิธีที่มีความเป็นส่วนตัว true.

ตัวอย่าง

Number.isSafeInteger(10);    // กลับค่า true
Number.isSafeInteger(12345678901234567890);  // กลับค่า false

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

ตัวเลขปลอดภัยหมายถึงทั้งหมดของตัวเลขจาก -(253 - 1) ถึง +(253 - 1).

มันเป็นสิ่งที่ปลอดภัย: 9007199254740991. มันไม่ปลอดภัย: 9007199254740992.

วิธีสำหรับตัวเลขโลกใหม่

ES6 ยังเพิ่ม 2 วิธีสำหรับตัวเลขโลกอีก:

  • isFinite()
  • isNaN()

วิธี isFinite()

ถ้าค่าประกาศเป็น Infinity หรือ NaNทั้งนี้ isFinite() กลับค่า false โดยมีวิธี

ควรกลับค่า true:

ตัวอย่าง

isFinite(10/0);       // กลับค่า false
isFinite(10/1);       // กลับค่า true

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

方法 isNaN()

หากตัวอักษรเป็น NaNทั้งนี้ isNaN() วิธีที่มีความเป็นส่วนตัว trueค่าที่มาจากมีทางเลือก false:

ตัวอย่าง

isNaN("Hello");       // กลับค่า true

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

ฟังก์ชันที่ใช้เครื่องหมายหน้าแข็ง (Arrow Function)

ฟังก์ชันที่ใช้เครื่องหมายหน้าแข็งอนุญาตให้ใช้กฎระเบียบที่สั้นๆ ในการเขียนฟังก์ชันแสดงค่า

คุณไม่จำเป็น function คำทั้งหมดreturn คำทั้งหมดและเครื่องหมายรอบวง.

ตัวอย่าง

// ES5
var x = function(x, y) {
   return x * y;
}
// ES6
const x = (x, y) => x * y;

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

ฟังก์ชันที่ใช้เครื่องหมายหน้าแข็งไม่มี this. พวกเขาไม่เหมาะสมที่จะใช้เพื่อวิธีตัวแทน.

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

เพื่อ const เมื่อใช้ var มั่นคงยิ่งขึ้น เพราะฟังก์ชันแสดงค่าคงที่เสมอ

หากฟังก์ชันเป็นประโยคเดียว จึงสามารถละคราวได้ return คำทั้งหมดและเครื่องหมายรอบวง จึงอาจเป็นประสงค์ดีที่จะรักษาเหล่านั้น

ตัวอย่าง

const x = (x, y) => { return x * y };

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