ชีตสรุป JavaScript
ข้อมูลอ้างอิงที่ค้นหาและพิมพ์ได้ของ JavaScript สมัยใหม่ — ไวยากรณ์ อาร์เรย์ สตริง ออบเจกต์ async/await DOM และฟีเจอร์ ES2022+ ฟรี
ตัวแปรและชนิดข้อมูล
10let x = 1;
ตัวแปรขอบเขตบล็อก กำหนดค่าใหม่ได้
const PI = 3.14;
การผูกค่าคงที่ขอบเขตบล็อก
typeof value
คืนค่าชนิดข้อมูลเป็นสตริง
Number('42')
แปลงสตริงเป็นตัวเลข
String(42)
แปลงค่าเป็นสตริง
parseInt('42px', 10)
แยกจำนวนเต็มนำหน้า (ฐาน 10)
Boolean(0)
บังคับค่าเป็น true/false
value ?? 'default'
Nullish coalescing (เฉพาะ null/undefined)
a?.b?.c
Optional chaining, ลัดวงจรเมื่อเป็น null
Array.isArray(x)
ตรวจว่าค่าเป็น array หรือไม่
ฟังก์ชัน
9function add(a, b) { return a + b; }
การประกาศฟังก์ชันแบบมีชื่อ
const add = (a, b) => a + b;
Arrow function ที่คืนค่าโดยปริยาย
const f = (a = 1) => a;
ค่าพารามิเตอร์เริ่มต้น
function f(...args) {}
Rest parameters รวมเป็น array
f(...arr)
กระจาย array เป็นอาร์กิวเมนต์
const { a, b } = obj;
การแยกโครงสร้าง object
const [x, y] = arr;
การแยกโครงสร้าง array
(function(){})()
ฟังก์ชันที่เรียกทันที (IIFE)
fn.bind(this)
ผูกบริบท this แบบตายตัว
สตริง
10`Hello ${name}`
การแทรกค่าใน template literal
str.length
จำนวนอักขระ
str.includes('a')
ตรวจว่ามีสตริงย่อยหรือไม่
str.slice(0, 3)
ดึงส่วนหนึ่งของสตริง
str.replace(/a/g, 'b')
แทนที่ส่วนที่ตรงกัน (regex)
str.split(',')
แยกเป็น array
str.trim()
ตัดช่องว่างรอบข้าง
str.toUpperCase()
แปลงเป็นตัวพิมพ์ใหญ่
str.padStart(3, '0')
เติมด้านหน้าให้ครบความยาว
str.at(-1)
อักขระที่ตำแหน่ง (รองรับค่าลบ)
อาร์เรย์
11arr.map(x => x * 2)
แปลงแต่ละสมาชิก
arr.filter(x => x > 0)
เก็บสมาชิกที่ตรงเงื่อนไข
arr.reduce((a, b) => a + b, 0)
ลดเหลือค่าเดียว
arr.find(x => x.id === 1)
สมาชิกตัวแรกที่ตรงเงื่อนไข
arr.some(x => x > 0)
true ถ้ามีสมาชิกตรงเงื่อนไข
arr.every(x => x > 0)
true ถ้าทุกสมาชิกตรงเงื่อนไข
arr.includes(3)
ตรวจหาค่า
arr.sort((a, b) => a - b)
เรียงตัวเลขจากน้อยไปมาก
[...new Set(arr)]
ลบค่าที่ซ้ำกัน
arr.flat(Infinity)
แผ่ array ซ้อนให้ราบทั้งหมด
arr.at(-1)
สมาชิกตัวสุดท้าย (ดัชนีลบ)
ออบเจกต์
9Object.keys(obj)
array ของคีย์ที่นับได้ของตัวเอง
Object.values(obj)
array ของค่าของตัวเอง
Object.entries(obj)
array ของคู่ [key, value]
{ ...a, ...b }
รวม object (spread)
Object.assign({}, a, b)
คัดลอก/รวมเข้าเป้าหมาย
Object.freeze(obj)
ทำให้ object เปลี่ยนแปลงไม่ได้
{ [key]: value }
ชื่อพร็อพเพอร์ตีที่คำนวณได้
obj.hasOwnProperty('x')
ตรวจหาพร็อพเพอร์ตีของตัวเอง
structuredClone(obj)
โคลน object แบบลึก
Async และ promises
9async function f() {}
ประกาศฟังก์ชัน async
await fetch(url)
หยุดรอจน promise สำเร็จ
Promise.all([p1, p2])
รอให้ทั้งหมดสำเร็จ
Promise.allSettled([p1, p2])
รอให้ทั้งหมดเสร็จสิ้น
Promise.race([p1, p2])
คืนค่าจากตัวที่เสร็จก่อน
new Promise((res, rej) => {})
สร้าง promise เอง
try { await f(); } catch (e) {}
จัดการข้อผิดพลาด async
setTimeout(fn, 1000)
ทำงานหลังหน่วงเวลา (ms)
queueMicrotask(fn)
จัดคิว microtask
การควบคุมการทำงาน
9if (a) {} else if (b) {} else {}
การแยกตามเงื่อนไข
a ? b : c
นิพจน์ ternary
switch (x) { case 1: break; }
การแยกหลายทาง
for (const x of arr) {}
วนค่า (iterables)
for (const k in obj) {}
วนคีย์ของ object
while (cond) {}
วนซ้ำขณะเงื่อนไขเป็นจริง
arr.forEach((x, i) => {})
เรียก callback ต่อสมาชิก
break / continue
ออกหรือข้ามรอบวนซ้ำ
label: for (...) { break label; }
ออกจากลูปซ้อน
DOM และอีเวนต์
10document.querySelector('.x')
สมาชิกตัวแรกที่ตรงเงื่อนไข
document.querySelectorAll('.x')
ทุกอิลิเมนต์ที่ตรงกัน (NodeList)
el.addEventListener('click', fn)
ผูก event listener
el.classList.toggle('active')
สลับคลาส CSS
el.dataset.id
อ่านแอตทริบิวต์ data-id
el.textContent = 'hi'
กำหนดข้อความอย่างปลอดภัย (ไม่มี HTML)
el.setAttribute('aria-hidden', true)
กำหนดแอตทริบิวต์
e.preventDefault()
ยกเลิกการกระทำเริ่มต้น
el.closest('.parent')
บรรพบุรุษที่ตรงกันใกล้สุด
document.createElement('div')
สร้างอิลิเมนต์ใหม่
คลาสและโมดูล
9class A extends B {}
คลาสที่มีการสืบทอด
constructor() { super(); }
เริ่มต้นและเรียกคลาสแม่
#private = 1;
ฟิลด์ private ของคลาส
static create() {}
เมธอด static ของคลาส
get value() {}
ตัวเข้าถึงแบบ getter
export default fn;
การ export โมดูลแบบ default
export { a, b };
การ export โมดูลแบบมีชื่อ
import x, { y } from './m.js'
การ import แบบ default + มีชื่อ
const m = await import('./m.js')
การ import แบบไดนามิก
ไม่มีรายการที่ตรงกับ “:q”
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา