ต่อไปนี้เป็นวิธีการและฟังก์ชันในตัวใหม่ใน JavaScript

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

วิธีการวัตถุใหม่

Object คือสิ่งที่ทำให้ JavaScript เป็นภาษาโปรแกรมที่มีประสิทธิภาพ ออบเจ็กต์ช่วยให้คุณสามารถจัดกลุ่มประเภทข้อมูลต่างๆได้ หากคุณต้องการเรียนรู้กรอบ JavaScript ใหม่ ๆ เช่น React, Vue หรือ Angular คุณต้องรู้วิธีใช้ Objects และวิธีการของมัน เฟรมเวิร์กเหล่านี้ใช้อ็อบเจ็กต์เพื่อรับและจัดการอินพุตของผู้ใช้ JavaScript รุ่นใหม่นำวิธีการใหม่ ๆ มาสู่ Objects ที่ทำให้สนุกยิ่งขึ้น นี่คือวิธีการใหม่ของวัตถุ:

object.assign ()

Object.assign () method มีหลายงาน สามารถคัดลอกวัตถุโคลนจากวัตถุอื่นหรือเชื่อมต่อวัตถุตั้งแต่สองชิ้นขึ้นไป

  • คัดลอกค่าจากวัตถุอื่น:
  • โคลนวัตถุไปยังวัตถุใหม่
  • นอกจากนี้คุณสามารถผสานคุณสมบัติที่ซ้ำกันกับ Object.assign () โดยตั้งค่าวงเล็บว่างสองตัวเป็นอาร์กิวเมนต์แรก:

Object.entries ()

Object.entries () วิธีการคืนค่าคีย์และค่าของวัตถุเป็น Array

Object.getOwnPropertyDescriptors ()

Object.getOwnPropertyDescriptors ช่วยให้เราได้รับคุณสมบัติ descriptor สำหรับวัตถุ

การตรวจสอบคุณสมบัติของตัวบอกออบเจ็กต์นั้นมีประโยชน์มากเช่นดูว่าเขียนได้หรือแจกแจงได้

วิธีการอาร์เรย์ใหม่

JavaScript รุ่นใหม่ได้จัดเตรียมวิธีการใหม่สำหรับ Arrays วิธีการอาร์เรย์ใหม่มีดังนี้

Array.inc รวม ()

Array.includes () ช่วยให้เราตรวจสอบว่ามีคุณสมบัติอยู่ในอาร์เรย์หรือไม่ คุณสามารถเห็นความแตกต่างระหว่างรหัสเก่าและไวยากรณ์ใหม่ (ES6) วิธีการใหม่สั้นและอ่านง่ายขึ้น

Array.find ()

Array.find () ช่วยให้เราค้นหาองค์ประกอบใน Array ใช้ฟังก์ชันเรียกกลับเป็นอาร์กิวเมนต์ ฟังก์ชันเรียกกลับมีตัวเลือกเพิ่มเติมในการค้นหาและดึงข้อมูลที่ซับซ้อน

หากคุณสมบัติที่เรากำลังมองหามีอยู่จะส่งคืนค่าที่พบ มิฉะนั้นจะส่งกลับไม่ได้กำหนด

Array.findIndex ()

Array.findIndex () ส่งคืนดัชนีขององค์ประกอบที่พบแทนที่จะเป็นค่า

Array.values ​​()

วิธีใหม่นี้จะส่งคืนตัววนซ้ำ Array ของค่าเพื่อให้เราสามารถเรียกใช้ for loop เพื่อแยกแต่ละค่าของ Array

Array.entries ()

Array.entries () ส่งคืนทั้งคีย์และค่าและในรูปแบบ Array

Array.from ()

Array.from () ถูกนำมาใช้ในรุ่น ES6 สามารถทำหลายสิ่งได้โดยเรียกใช้ฟังก์ชัน map () บนข้อมูล มันสามารถแปลง String เป็น Array หรือแม้แต่สร้าง Array ใหม่จากข้อมูล

Array.keys ()

ตามความหมายของชื่อวิธีนี้จะส่งคืนคีย์ของ Array

วิธีการสตริงใหม่

JavaScript ออกใหม่มีวิธีการสตริงใหม่ นี่คือวิธีการใหม่ของ String:

String.repeat ()

String.repeat () วิธีการให้คุณทำซ้ำสตริง

สตริง. รวม ()

String.includes () ทำงานเหมือน Array.includes () จะส่งคืนบูลีนหากค่าที่ป้อนมีอยู่

วิธีการ Number ใหม่

JavaScript ออกใหม่ให้วิธี Number ใหม่ นี่คือวิธีการ Number ใหม่:

Number.isNaN ()

วิธีนี้เผยแพร่ในการอัปเดต ES6 ตรวจสอบค่า Number ที่ส่งผ่านและส่งคืนจริงหากค่าเป็น NaN มิฉะนั้นจะส่งกลับเท็จ วิธีนี้ได้รับแรงบันดาลใจจากฟังก์ชันคลาสสิก isNAN () ใน JavaScript

Number.isInteger ()

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

Number.isSafeInteger ()

คุณอาจต้องการตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อนเสมอเพื่อให้แน่ใจว่าเป็นตัวเลข Number.isSafeInteger () ตรวจสอบว่าหมายเลขนั้นเป็นหมายเลขที่ปลอดภัยหรือไม่

เรียนรู้เพิ่มเติมที่นี่

Number.isFinite ()

Number.isFinite () ตรวจสอบว่าค่าที่ส่งผ่านเป็นจำนวน จำกัด หรือไม่

รองรับเบราว์เซอร์

เบราว์เซอร์หลักรองรับเมธอด Number ใหม่เกือบทั้งหมดยกเว้น Opera Mini และ IE-11 การสนับสนุนแสดงในภาพด้านล่าง:

วัตถุเฉพาะใหม่

JavaScript มาพร้อมกับฟังก์ชันเฉพาะใหม่ที่ช่วยให้เราเขียนโค้ดที่มีประสิทธิภาพมากขึ้น นี่คือวิธีการใหม่ของวัตถุเฉพาะ:

วัตถุ Proxy ()

พร็อกซีเป็นหนึ่งในส่วนเสริมที่ยอดเยี่ยมของ JavaScript มันสร้างพฤติกรรมที่กำหนดเองสำหรับโค้ดของเรา ด้วย Proxy คุณสามารถจัดการ:

  • การตรวจสอบข้อมูลผู้ใช้
  • การแก้ไขข้อมูล
  • การค้นหาคุณสมบัติ
  • การมอบหมาย
  • การแจงนับ
  • การเรียกใช้ฟังก์ชัน

ตรวจสอบการใช้งาน Proxy และวิธีการอื่น ๆ ได้ที่นี่

เพื่อทำความเข้าใจพร็อกซีเราจะเขียนสองตัวอย่าง

ตัวอย่างที่ 1:

ในตัวอย่างนี้เราตรวจสอบความถูกต้องของข้อมูลขณะรับข้อมูลจากผู้ใช้ เราจะพยายามกำหนดลักษณะการทำงานของข้อผิดพลาดที่ไม่ได้กำหนด

undefinedในขณะที่คุณเห็นในตัวอย่างข้างต้นผลตอบแทน userInfo.favCar จะเป็นอย่างไรหากเราต้องการจัดการกับข้อความแสดงข้อผิดพลาดนี้ หากเราต้องการสร้างลักษณะการทำงานที่กำหนดเองสำหรับข้อผิดพลาดตัวอย่างเช่นการแสดงข้อความอื่นแทนการไม่ได้กำหนดเราสามารถใช้ Proxy ในกรณีนี้

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

ตัวอย่างที่ 2:

ในตัวอย่างนี้เราจะสร้างการตรวจสอบความถูกต้องสำหรับค่าเฉพาะในวัตถุโดยใช้วิธีการตั้งค่า

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

รองรับเบราว์เซอร์

Proxy ทำงานได้ดีสำหรับเบราว์เซอร์หลักทั้งหมดดังที่คุณเห็นด้านล่าง:

ตั้งค่า () วัตถุ

Set object เป็นคุณสมบัติใหม่ใน JavaScript ช่วยให้เราสามารถจัดเก็บค่าที่ไม่ซ้ำกัน มีหลายวิธีที่คุณสามารถเล่นได้ วิธี Object.add ช่วยให้คุณสามารถเพิ่มคุณสมบัติใหม่ให้กับวัตถุได้ Object.delete ลบคุณสมบัติออกจากวัตถุ Object.clear ล้างคุณสมบัติทั้งหมดออกจากวัตถุ ตัวอย่างด้านล่างอธิบายวิธีการของวัตถุ

เรียนรู้เพิ่มเติมเกี่ยวกับ Set () object ที่นี่

ห่อ

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

คุณสามารถตรวจสอบบทความของฉันเกี่ยวกับไวยากรณ์ ES6 ใหม่ได้เช่นกันเพื่อรีเฟรชทักษะของคุณใน JavaScript

คุณสามารถค้นหาฉันได้ทาง Twitter และ Instagram

บทความก่อนหน้า:

  • JavaScript ES6 - เขียนน้อยลงทำมากขึ้น
  • เรียนรู้ Bootstrap 4 ใน 30 นาทีโดยการสร้าง Landing a Website
  • Angular 6 และเป็นคุณสมบัติใหม่ทั้งหมดนี้อธิบายได้ภายในสามนาที
  • วิธีใช้การกำหนดเส้นทางใน Vue.js เพื่อสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น
  • วิธีที่ได้รับความนิยมมากที่สุดในการส่งคำขอ HTTP ใน JavaScript มีดังนี้
  • เรียนรู้วิธีสร้างแอป Angular ตัวแรกใน 20 นาที