มีเบราว์เซอร์จำนวนมากที่มาพร้อมกับภาษาสคริปต์ที่แตกต่างกัน หนึ่งในนั้นคือ JScript โดย Microsoft ในฐานะนักพัฒนาเว็บ เราจำเป็นต้องตรวจสอบให้แน่ใจว่าสคริปต์ที่เราพัฒนาจะสามารถทำงานในเบราว์เซอร์เหล่านั้นได้ EcmaScript (โดยทั่วไปเรียกโดยย่อว่า ES) ถูกสร้างขึ้นเพื่อสร้างมาตรฐานภาษาสำหรับภาษาสคริปต์ต่างๆ มากมาย ดังนั้นหน้าเว็บที่เขียนด้วย ES จึงสามารถทำงานได้อย่างถูกต้องในเบราว์เซอร์ที่มีอยู่ประเภทต่างๆ

ES คือมาตรฐานการเขียนโค้ดหรือข้อกำหนดภาษาใน Ecma-262 ที่สร้างโดย Ecma International Ecma International เป็นองค์กรที่พัฒนามาตรฐานสำหรับระบบและเทคโนโลยีสารสนเทศและการสื่อสาร ในขณะที่ Ecma-262 สร้างขึ้นสำหรับภาษาสคริปต์โดยเฉพาะ ES ได้รับการอัปเดต (เกือบ) ทุกปี EcmaScript เวอร์ชันแรก ES1 เปิดตัวในปี 1997 และยังคงพัฒนาเป็น ES6 ในปี 2015 หลังจาก ES6 การตั้งชื่อเวอร์ชัน ES จะเปลี่ยนไปตามปีที่เผยแพร่ อย่าสับสนหากคุณอ่านคำว่า 'ES6 หรือ ES2015' ที่ไหนสักแห่งบนอินเทอร์เน็ต เพราะมันหมายถึง ES เวอร์ชันเดียวกัน วันนี้เวอร์ชันล่าสุดคือ ES2021

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

ก. EcmaScript 6

ES6 เป็นการปรับปรุงที่ยิ่งใหญ่ที่สุดสำหรับ JS นับตั้งแต่ปี 1996 และเปิดตัวในปี 2015 มีฟีเจอร์มากมายในเวอร์ชันนี้ เช่น การทำลายล้าง ตัวดำเนินการสเปรด พารามิเตอร์ส่วนที่เหลือ พารามิเตอร์เริ่มต้น ตัวอักษรเทมเพลต ฟังก์ชันลูกศร และ for...of loop .

1. … ผู้ดำเนินการ

เราสามารถใช้ตัวดำเนินการ … ได้สองวิธี:

ก. ตัวดำเนินการสเปรด

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

const groupOne = ['Niragi', 'Chisiya', 'Arisu']
const groupTwo = ['Ann', 'Usagi', 'Kuina']

const combineGroup = [...groupOne, ...groupTwo]

ในตัวอย่างด้านบน เราจะเห็นอาร์เรย์ที่มีค่าบางอย่าง เช่น 'Niragi', 'Chisiya' และ 'Arisu' และอีกค่าหนึ่งที่มีค่า 'Ann', 'Usagi' และ 'Kuina' เราจะรวมค่าในอาร์เรย์ทั้งสองเป็นค่าเดียวโดยใช้ตัวดำเนินการสเปรด ผลลัพธ์จะเป็นดังนี้:

Niragi, Chisiya, Arisu, Ann, Usagi, Kuina

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

1. คัดลอกแบบลึก อ็อบเจ็กต์/อาร์เรย์ทั้งหมดสำหรับรายการที่ไม่มีรายการที่ซ้อนกัน

2. หากวัตถุ/อาร์เรย์มีรายการที่ซ้อนกัน ระบบจะคัดลอกรายการที่อยู่นอกสุดแบบลึกก่อน จากนั้น คัดลอกตื้นรายการที่ซ้อนกัน

นอกจากนี้เรายังสามารถใช้ตัวดำเนินการสเปรดเพื่อทำ การทำลายโครงสร้างอาร์เรย์ ในตัวอย่างด้านล่าง เรามีอาร์เรย์ของตัวเลข เราต้องการคัดลอกและทำลายโครงสร้างข้อมูล '1' และ '2'... แต่ปล่อยให้ส่วนที่เหลือเป็นไป เราสามารถใช้หมายเลขสเปรดและผลลัพธ์จะเป็นดังนี้:

const numbers = [1, 2, 3, 4, 5, 6]
const [one, two, ...rest] = numbers

// output:
// one : 1
// two : 2
// rest : 3,4,5,6

ข. พารามิเตอร์ส่วนที่เหลือของฟังก์ชัน

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

นี่คือตัวอย่างว่าการใช้พารามิเตอร์ส่วนที่เหลือมีประสิทธิภาพเพียงใด ก่อน ES6 คุณต้องเขียนหลายฟังก์ชันเพื่อทำงานเดียวกันดังนี้:

function firstFunc(param) {
    // do some task...
}
function secondFunc(param1, param2) {
    // do some task...
}
function thirdFunc(param1, param2, param3) {
    // do some task...
}

เป็นการเสียเวลา โดยเฉพาะเมื่อคุณมีพารามิเตอร์จำนวนมากหรือไม่มีกำหนดใช่ไหม? เมื่อใช้ ES6 คุณสามารถใช้ตัวดำเนินการ... เพื่อทำให้งานของคุณง่ายขึ้นโดยการรวบรวมพารามิเตอร์จำนวนมหาศาลในฟังก์ชัน เพียงเขียนพารามิเตอร์ดังนี้:

function myDynamicFunction(...params) {
    console.log(params.length)
}

myDynamicFunction(100, 23, 97, 'Clinton', 0.5, 'Thomas')
// output: 6

2. การ for-of วนซ้ำ

For-of loop ช่วยให้เราสามารถวนซ้ำ "โครงสร้างข้อมูลที่ทำซ้ำได้" เช่น Arrays, Strings, Maps, NodeLists เป็นต้น

สมมติว่าเรามีโครงสร้างข้อมูลที่ทำซ้ำได้ (ในรูปแบบของอาร์เรย์):

const names = ['Alexander', 'Trent', 'Arnold']

มาดูตัวอย่างกัน เราต้องการแปลงอาร์เรย์นั้นเป็นสตริง โดยไม่ใช้ For-of Loop เราจะเขียนโค้ดโดยใช้ For-of Loop ปกติดังนี้:

let fullName = ''
for(let i = 0; i < names.length; i++) {
    fullName += names[i] + ' '
}

console.log(fullName)
// output : Alexander Trent Arnold

เมื่อใช้ For-of Loop มันจะง่ายและอ่านง่ายขึ้น:

let fullName = ''
for(let name of names) {
    fullName += name + ' '
}

console.log(fullName)
// output : Alexander Trent Arnold

3. รวม () วิธีการ

วิธีการ includes() เป็นวิธีการใหม่ใน ES6 เพื่อค้นหาว่าสตริงมีหรือรวมค่าบางอย่างไว้หรือไม่ หากพบค่า ผลลัพธ์จะเป็น จริง ในขณะที่ หากไม่พบ ผลลัพธ์จะเป็น เท็จ

const sentence = "Some of popular Javascript frameworks are React, Vue, Angular, and Svelte"
console.log(sentence.includes('React'))

// output: true

ไม่เพียงแต่สำหรับสตริงเท่านั้น แต่ยังสามารถใช้เมธอด includes() ในอาร์เรย์ดังนี้:

const frameworks = ['React', 'Vue', 'Svelte', 'Angular']
console.log(frameworks.includes('React'))

// output: true

หมายเหตุ:

วิธีการ includes() คือ คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ดังนั้นหากเราเขียน 'react' แทน 'React' ในโค้ด ผลลัพธ์จะเป็น false< /แข็งแกร่ง>.

4. วิธีการค้นหาอาร์เรย์ ()

วิธีการ Array find() เป็นอีกหนึ่งวิธีใหม่ใน ES6 เราสามารถใช้มันเพื่อค้นหารายการแรกในอาร์เรย์ที่ตรงกับเงื่อนไขบางอย่าง วิธีการนี้ยอมรับเฉพาะฟังก์ชันที่เป็นพารามิเตอร์เท่านั้น ในตัวอย่างด้านล่าง เราต้องการค้นหาบางรายการในอาร์เรย์ที่มีค่ามากกว่า 30 มีสองค่าที่พบ คือ 37 และ 98 แต่เรารับเฉพาะรายการแรกเท่านั้น

const numbers = [10, 25, 37, 4, 98]
let first = numbers.find((value, index) => {
    return value > 30
})

console.log(first);
// output : 37

5. อาร์เรย์ findIndex() วิธีการ

แตกต่างจากวิธี find() โดยวิธี findIndex() จะส่งกลับเฉพาะ หมายเลขดัชนี ของรายการในอาร์เรย์ ไม่ใช่ค่า ดูโค้ดตัวอย่างด้านล่าง เรามีพารามิเตอร์สำหรับค่าน้อยกว่า ‹10 พบเพียงค่าเดียวคือ '4' ผลลัพธ์จะแสดงหมายเลขดัชนี

const numbers = [10, 25, 37, 4, 98]
let getIndex = numbers.findIndex((value, index) => {
    return value < 10
})

console.log(getIndex);
// output : 3

โปรดจำไว้ว่าภาษาการเขียนโปรแกรมนับทุกอย่างโดยเริ่มจาก 0 ดังนั้นมันจึงคืนค่า 3 ในตัวอย่างด้านบน

บี EcmaScript 2017

6. วัตถุ รายการ ()

คุณลักษณะ Object.entries() จะสร้างสำเนาของวัตถุที่สามารถทำซ้ำได้ (วัตถุที่ไม่ซ้อนกัน) และเปลี่ยนเป็นอาร์เรย์ JS สองมิติ แต่ละอาร์เรย์ย่อยของอาร์เรย์ JS สองมิติประกอบด้วยคีย์และคู่ค่าของออบเจ็กต์ นี่คือตัวอย่างของวัตถุที่สามารถทำซ้ำได้ซึ่งเราต้องการเปลี่ยนเป็นอาร์เรย์ JS สองมิติ ในกรณีนี้ เราต้องการคัดลอกคีย์ “ชื่อ” และคู่ค่า “Lionel Messi” ลงในอาร์เรย์ใหม่โดยใช้เมธอด Object.entries()

const player = {
  name: 'Lionel Messi',
  nationality: 'Argentina',
  club: 'Paris Saint Germain',
  backNumber: 30
}

let playerArr = Object.entries(player)

ผลลัพธ์จะเป็นดังนี้:

[
    [
        "name",
        "Lionel Messi"
    ],
    [
        "nationality",
        "Argentina"
    ],
    [
        "club",
        "Paris Saint Germain"
    ],
    [
        "backNumber",
        30
    ]
]

ค. EcmaScript 2019

7. วัตถุ fromEntries()

หาก Object.entries() แปลง Object ให้เป็นอาร์เรย์สองมิติ Object.fromEntries() จะทำอย่างอื่น มันแปลงอาร์เรย์สองมิติให้เป็นวัตถุ ดูรหัสด้านล่าง นี่คือตัวอย่างของอาร์เรย์สองมิติที่เราต้องการแปลงเป็นวัตถุโดยการใส่ Object.fromEntries()

const cars = [
  ["ferrari", 5600],
  ["audi", 7200],
  ["bugatti", 9800]
]

let carsObj = Object.fromEntries(cars)

ผลลัพธ์ของ carsObj จะเป็น:

{ferrari: 5600, audi: 7200, bugatti: 9800}

ง่าย ๆ ใช่ไหม? จากนี้ไป เราไม่จำเป็นต้องสร้างฟังก์ชันด้วยตนเองเพียงเพื่อแปลงอาร์เรย์ให้เป็นวัตถุเท่านั้น

​เคล็ดลับสำหรับมือโปร:คุณสามารถใช้คุณสมบัตินี้เพื่อพิมพ์สิ่งที่ formData มีอยู่

8. อาร์เรย์แบน()

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

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
// output : [1, 2, 3, 4, 5, 6]

ง. EcmaScript 2020

9. ตัวดำเนินการรวมศูนย์ Nullish (??)

คุณเคยลอง (หรืออย่างน้อยก็ได้ยิน) เกี่ยวกับ Javascript Ternary Operator หรือไม่? หากคุณยังไม่ได้อ่านบทความ "ที่นี่" ก่อนที่จะอ่านต่อ

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

let someVar = obj['a_long_object_key_name'] ? obj['a_long_object_key_name'] : 'Default Value'

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

let someVar = obj['a_long_object_key_name'] ?? 'Default Value'

ในที่นี้โดยใช้ตัวดำเนินการรวมศูนย์ที่เป็นโมฆะ เราจะหลีกเลี่ยงการเขียนคีย์อ็อบเจ็กต์ "ยาว" อันเดียวกันสองครั้ง ในทางเทคนิคแล้ว จะทำแบบเดียวกับตัวอย่างก่อนหน้านี้แต่ในลักษณะที่อ่านง่ายขึ้น มันเจ๋งใช่มั้ย?

10. ตัวเลือกตัวดำเนินการผูกมัด (?.)

บางครั้งเราประสบปัญหาเมื่อตัวแปรไดนามิกส่งคืนค่าว่าง เป็นผลให้ตรวจพบตัวแปรว่ามีข้อผิดพลาดและโปรแกรมหยุดทำงาน ตัวดำเนินการผูกมัดทางเลือก (?.) ส่งคืนข้อผิดพลาดเป็นไม่ได้กำหนด ในตัวอย่างด้านล่าง เราจะได้คอลัมน์อินพุต แต่สมมติว่าไม่มีองค์ประกอบอินพุตอยู่

// assume the input element doesn't exist, so it will be undefined
const inputNotes = $('#imaginary_input');
const inputLength = inputNotes.val().length

ที่นี่เราใช้ "วิธีการผูกมัด" เพื่อรับค่าจากตัวแปร 'inputNotes' ก่อน หลังจากนั้นเราจะนับความยาวของค่าอินพุต แต่ในกระบวนการรับข้อมูล เราไม่พบอินพุตหรือไม่มีอินพุต เป็นผลให้เกิดข้อผิดพลาดเนื่องจากเราไม่สามารถรับค่าขององค์ประกอบอินพุตที่ไม่มีอยู่และการเรียกใช้โค้ดหยุดลง ที่นี่ เราสามารถใช้ตัวดำเนินการ ?. หลังชื่อของตัวแปร (หรือคีย์วัตถุ) เพื่อตรวจสอบว่ามันเป็นค่าว่างหรือไม่

ด้วยการใช้ตัวดำเนินการลูกโซ่ที่เป็นทางเลือก มันจะไม่ทำวิธีต่อลูกโซ่ต่อไปเมื่อตัวแปรเป็นโมฆะ แทนที่จะส่งข้อผิดพลาด มันจะกำหนดข้อผิดพลาดโดยตรงให้กับตัวแปร inputLength ลงใน 'unknown' และการเรียกใช้โค้ดจะทำงานต่อไป (ไม่หยุด) ดูภาพด้านล่างเพื่อความชัดเจนยิ่งขึ้น:

จ. EcmaScript 2021

11. สตริงแทนที่ทั้งหมด()

ก่อนหน้านี้ Javascript มีฟังก์ชัน replace() อยู่แล้ว ขออภัย ไม่สามารถใช้กับค่าเดียวกันหลายค่าได้ โดยจะแทนที่เฉพาะค่าแรกที่ตรงกันเท่านั้น ดังนั้นเราจึงจำเป็นต้องใช้ซ้ำๆ เพื่อแทนที่คำเดียวกันหลายคำ (ทีละคำ)

ดูตัวอย่างด้านล่าง:

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

การเปลี่ยนสิ่งของต่างๆ ทำได้เร็วและง่ายขึ้นใช่ไหม?

12. ตัวคั่นตัวเลข

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

const reallyBigNumber = 10000000000

หากไม่มีเครื่องหมายจุลภาคหรือจุด นักพัฒนาจะพบว่าการอ่านค่าเป็นเรื่องยากเล็กน้อย ใน ES2021 มีฟีเจอร์ที่เราสามารถใช้เครื่องหมายขีดล่าง (_) เพื่อแยกตัวเลขได้ เราสามารถวางไว้ข้างในเพื่อให้มนุษย์อ่านได้ง่ายขึ้น

ตัวอย่าง:

const reallyBigNumber = 10_000_000_000

Javascript ถือว่าขีดล่างนี้เป็นตัวเลขปกติเมื่อคุณใช้หรือพิมพ์ออกมา

บทสรุป

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