Javascript ES6
ECMAScript 2015 เป็นการแก้ไขครั้งสำคัญครั้งที่สองของ JavaScript
ECMAScript 2015 เรียกอีกอย่างว่า ES6 และ ECMAScript 6
บทนี้อธิบายคุณลักษณะที่สำคัญที่สุดของ ES6
คุณสมบัติใหม่ใน ES6
- ให้คำสำคัญ
- คำหลัก const
- ฟังก์ชั่นลูกศร
- สำหรับ/ของ
- วัตถุแผนที่
- ตั้งค่าวัตถุ
- ชั้นเรียน
- สัญญา
- สัญลักษณ์
- พารามิเตอร์เริ่มต้น
- พารามิเตอร์ส่วนที่เหลือของฟังก์ชัน
- String.includes()
- สตริง.startsWith()
- String.endsWith()
- Array.from()
- คีย์อาร์เรย์ ()
- ค้นหาอาร์เรย์ ()
- อาร์เรย์ findIndex()
- วิธีการทางคณิตศาสตร์ใหม่
- คุณสมบัติหมายเลขใหม่
- วิธีการหมายเลขใหม่
- วิธีการใหม่ระดับโลก
- Iterables Object.entries
- โมดูลจาวาสคริปต์
การสนับสนุนเบราว์เซอร์สำหรับ ES6 (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คีย์เวิร์ดอนุญาตให้คุณประกาศตัวแปรที่มีขอบเขตบล็อก
ตัวอย่าง
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
อ่านเพิ่มเติมเกี่ยวกับletในบท: JavaScript Let
JavaScript const
คีย์เวิร์ดช่วยให้คุณประกาศ ค่าconstคงที่ (ตัวแปร JavaScript ที่มีค่าคงที่)
ค่าคงที่คล้ายกับตัวแปร let ยกเว้นค่าที่ไม่สามารถเปลี่ยนแปลงได้
ตัวอย่าง
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
อ่านเพิ่มเติมเกี่ยวกับconstในบท: JavaScript Const
ฟังก์ชั่นลูกศร
ฟังก์ชันลูกศรช่วยให้ไวยากรณ์สั้น ๆ สำหรับเขียนนิพจน์ของฟังก์ชัน
คุณไม่จำเป็นต้องมี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 };
เรียนรู้เพิ่มเติมเกี่ยวกับฟังก์ชันลูกศรในบท: ฟังก์ชั่ นลูกศร JavaScript
สำหรับ / ของวง
คำสั่ง JavaScript for/ofวนซ้ำค่าของวัตถุที่ทำซ้ำได้
for/ofให้คุณวนซ้ำโครงสร้างข้อมูลที่ทำซ้ำได้ เช่น Arrays, Strings, Maps, NodeLists และอื่นๆ
ลู ปfor/ofมีไวยากรณ์ต่อไปนี้:
for (variable of iterable) {
// code block to be executed
}
ตัวแปร - สำหรับการวนซ้ำทุกครั้ง ค่าของคุณสมบัติถัดไปจะถูกกำหนดให้กับตัวแปร สามารถประกาศ
ตัวแปรด้วยconst, let, หรือvar
iterable - วัตถุที่มีคุณสมบัติ iterable
วนรอบอาร์เรย์
ตัวอย่าง
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
วนรอบสตริง
ตัวอย่าง
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
เรียนรู้เพิ่มเติมในบท: JavaScript Loop For/In/ Of
JavaScript Map Objects
ความสามารถในการใช้ Object เป็นคีย์ถือเป็นคุณสมบัติที่สำคัญของแผนที่
ตัวอย่าง
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
เรียนรู้เพิ่มเติมเกี่ยวกับวัตถุแผนที่ในบท: JavaScript Map( )
JavaScript Set Objects
ตัวอย่าง
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
เรียนรู้เพิ่มเติมเกี่ยวกับ Set object ในบท: JavaScript Set( )
คลาส JavaScript
คลาส JavaScript เป็นเทมเพลตสำหรับออบเจกต์ JavaScript
ใช้คีย์เวิร์ดclassเพื่อสร้างคลาส
เพิ่มเมธอดชื่อconstructor():
ไวยากรณ์
class ClassName {
constructor() { ... }
}
ตัวอย่าง
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
ตัวอย่างข้างต้นสร้างคลาสชื่อ "รถยนต์"
คลาสมีคุณสมบัติเริ่มต้นสองประการ: "ชื่อ" และ "ปี"
คลาส JavaScript ไม่ใช่วัตถุ
เป็นเทมเพลตสำหรับวัตถุ JavaScript
การใช้คลาส
เมื่อคุณมีคลาส คุณสามารถใช้คลาสเพื่อสร้างออบเจกต์:
ตัวอย่าง
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
เรียนรู้ เพิ่มเติมเกี่ยวกับคลาสในบท: JavaScript Classes
สัญญาจาวาสคริปต์
Promise เป็นอ็อบเจ็กต์ JavaScript ที่เชื่อมโยง "Production Code" และ "Consuming Code"
"รหัสการผลิต" อาจใช้เวลาสักครู่และ "รหัสการบริโภค" ต้องรอผล
สัญญาไวยากรณ์
const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
ตัวอย่างการใช้คำสัญญา
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
เรียนรู้ เพิ่มเติมเกี่ยวกับ Promises ในบท: JavaScript Promises
ประเภทสัญลักษณ์
สัญลักษณ์ JavaScript เป็นประเภทข้อมูลพื้นฐานเช่นเดียวกับ Number, String หรือ Boolean
มันแสดงถึงตัวระบุ "ซ่อน" ที่ไม่ซ้ำกันซึ่งไม่มีรหัสอื่นใดที่ไม่สามารถเข้าถึงได้โดยบังเอิญ
ตัวอย่างเช่น หากผู้เขียนโค้ดต่างกันต้องการเพิ่มคุณสมบัติ person.id ให้กับวัตถุบุคคลที่เป็นของรหัสบุคคลที่สาม พวกเขาสามารถผสมค่าของกันและกันได้
การใช้ Symbol() เพื่อสร้างตัวระบุเฉพาะ แก้ปัญหานี้:
ตัวอย่าง
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
สัญลักษณ์มีเอกลักษณ์เฉพาะตัวเสมอ
หากคุณสร้างสัญลักษณ์สองอันที่มีคำอธิบายเหมือนกัน พวกมันจะมีค่าต่างกัน
Symbol("id") == Symbol("id") // false
ค่าพารามิเตอร์เริ่มต้น
ES6 อนุญาตให้พารามิเตอร์ฟังก์ชันมีค่าเริ่มต้นได้
ตัวอย่าง
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
พารามิเตอร์ส่วนที่เหลือของฟังก์ชัน
พารามิเตอร์ rest (...) อนุญาตให้ฟังก์ชันจัดการกับอาร์กิวเมนต์จำนวนไม่ จำกัด เป็นอาร์เรย์:
ตัวอย่าง
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
String.includes()
includes()เมธอดส่งคืนหากtrueสตริงมีค่าที่ระบุ มิฉะนั้นfalse:
ตัวอย่าง
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
สตริง.startsWith()
startsWith()เมธอดส่งคืนหากtrue
สตริงเริ่มต้นด้วยค่าที่ระบุ มิฉะนั้นfalse:
ตัวอย่าง
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.endsWith()
endsWith()เมธอดจะคืนค่าหากtrue
สตริงลงท้ายด้วยค่าที่ระบุ มิฉะนั้นfalse:
ตัวอย่าง
var text = "John Doe";
text.endsWith("Doe") // Returns true
Array.from()
The Array.from() method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys() method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find() method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex() method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
The Math.trunc() Method
Math.trunc(x) returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4
The Math.sign() Method
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x) returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true