ฉันได้รวบรวมรายการ shorthands / snippet ที่เจ๋งที่สุดและมีประโยชน์ที่สุดสำหรับโปรแกรมเมอร์ JavaScript ทั้งหมดไว้ที่นั่น ใช้สิ่งเหล่านี้เพื่อทำให้โค้ดของคุณดูเป็นมืออาชีพมากขึ้น

1. คำสั่ง One-Liner If-Else

คุณน่าจะคุ้นเคยกับif-elseข้อความปกติเช่นนี้:

if (10 < 100) {
  console.log("True");
} else {
  console.log("False");
}

True

10 < 100 ? console.log("True") : console.log("False");

True

condition ? trueExpression : falseExpression

2. ตัวดำเนินการกระจาย

คุณสามารถใช้ตัวดำเนินการกระจาย ( ...) เพื่อขยายองค์ประกอบของอาร์เรย์ไปยังอาร์เรย์อื่นตัวอย่างเช่น:

const numbers = [10, 20, 30, 40];
const allNumbers = [...numbers, 50, 60, 70, 80];
console.log(allNumbers);

[10, 20, 30, 40, 50, 60, 70, 80]

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers);

[1, 20, 3, 9]

นอกเหนือไปtrueและfalseประเภทถือว่า JavaScript อื่น ๆ เช่นtruthyหรือfalsy

• 0, "", null, undefined, NaNและfalseมักจะ falsy
• ทุกสิ่งทุกอย่างเป็นความจริง

const bool1 = !0;        // true
const bool2 = !100;      // false
const bool3 = !"test";   // false
const bool4 = !!"test";  // true
console.log(bool1, bool2, bool3, bool4);

true false false true

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y);

2 1

const num = 1 + "";
console.log(typeof num);
console.log(num);

string
1

const numStr = "124";
const num = +numStr;
console.log(typeof num);
console.log(num);

number 
84

ฝังตัวแปรระหว่างสตริงอย่างเรียบร้อยโดยใช้ backticks ( `) เพื่อใส่สตริงและแทรกตัวแปรระหว่าง${}:

const age = 41;
const sentence = `I'm ${age} years old`;
console.log(sentence);

I'm 41 years old

ในการแยกสตริงออกเป็นอาร์เรย์คุณสามารถใช้ตัวดำเนินการกระจาย ( ...):

const str = "Test"
const strAsArr = [...str]
console.log(strAsArr)

["T", "e", "s", "t"]

“ ตัวดำเนินการโซ่ที่เป็นทางเลือก ( ?.) อนุญาตให้อ่านค่าของคุณสมบัติที่อยู่ลึกเข้าไปในห่วงโซ่ของวัตถุที่เชื่อมต่อโดยไม่ต้องตรวจสอบอย่างชัดแจ้งว่าการอ้างอิงแต่ละรายการในห่วงโซ่นั้นถูกต้อง” - เอกสารเว็บ MDN

สมมติว่าคุณมีวัตถุและคุณต้องการได้อย่างปลอดภัยการเข้าถึงdata data.test.valueขั้นแรกคุณต้องตรวจสอบว่า:

• data ถูกกำหนด
• data.test ถูกกำหนด

const data = {test: {value: 1}}
if(data && data.test){
  console.log(data.test.value);
}

1

const value = data?.test?.value;
console.log(value)

1

console.log(data?.this?.does?.not?.exist?.for?.sure)

undefined

ฉันแน่ใจว่าคุณเคยใช้มาJSON.stringify()ก่อน วิธีหนึ่งที่คุณอาจไม่เคยใช้คือการเยื้องข้อมูล JSON ของคุณอย่างเรียบร้อย

มาดูกันว่าคุณทำสิ่งนี้ได้อย่างไร JSON.stringify()วิธีการรับสองพารามิเตอร์ดังนี้

• ฟังก์ชันตัวเปลี่ยนที่กรอง JSON ที่แสดง ในกรณีนี้อาจเป็นได้nullโดยที่เราไม่จำเป็นต้องใช้
• ค่าช่องว่างที่เป็นจำนวนช่องว่างที่ต้องการหรือสตริง ในกรณีนี้ให้ใช้แท็บ ( '\t') เพื่อเยื้องวัตถุ JSON เพื่อให้ดูดี:

const readableJSON = JSON.stringify({ a: 'A', b: 'B' }, null, '\t');
console.log(readableJSON);

{
      "a": "A",
      "b": "B"
}

ทรัพยากร