นี่คือภาพรวมโดยย่อ:

• [ ] ใช้การต่อสตริงหรือการเริ่มต้นวัตถุเพื่อให้console.log()ข้อมูลเพิ่มเติม
• [ ] ใช้การเชื่อมโยงทางเลือกกับ?ตัวดำเนินการเพื่อป้องกันข้อผิดพลาดเมื่อเข้าถึงคุณสมบัติของวัตถุที่ไม่ได้กำหนด
• [ ] ใช้การทำลายวัตถุในพารามิเตอร์เพื่อเขียนโค้ดที่กระชับยิ่งขึ้น
• [ ] ใช้ไวยากรณ์สเปรดเพื่อเพิ่มองค์ประกอบในอาร์เรย์หรือสตริง
• [ ] ใช้วิธีการอาร์เรย์แทนการวนซ้ำเพื่อให้โค้ดกระชับขึ้น แต่ให้สังเกตว่าเมธอดนั้นทำให้อาร์เรย์กลายพันธุ์หรือไม่

console.log()อาจเป็นหนึ่งในสิ่งแรกๆ ที่ผู้พัฒนา JavaScript ทุกคนได้เรียนรู้ เป็นวิธีที่ดีในการดูว่าเกิดอะไรขึ้นในโค้ด และมีประโยชน์เมื่อเราดีบักโค้ด นอกจากพื้นฐานแล้วconsole.log(something)ยังมีวิธีอื่นๆ อีกสองสามวิธีที่จะทำให้คุณconsole.log()ได้รับข้อมูลมากขึ้น

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

มีประสิทธิภาพมากกว่าวิธีนี้ คุณยังสามารถเริ่มต้นออบเจกต์ได้ด้วยการ ใส่ตัวแปรไว้ในวงเล็บปีกกา{ }แล้วส่งต่อไปยัง console.log()สิ่งนี้จะบันทึกทั้งชื่อตัวแปรและค่า

สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อเราต้องการบันทึกหลายตัวแปรพร้อมกัน

วัตถุconsoleมีวิธีการ serval เพื่อส่งออกข้อความในคอนโซล นอกเหนือจากconsole.log()ฉันใช้console.error()เพื่อบันทึกข้อความแสดงข้อผิดพลาดในรหัส มันใช้งานได้เหมือนconsole.log()แต่มันถูกเน้นในคอนโซลอย่างที่คุณเห็นในตัวอย่างแรก

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

consoleยังอนุญาตให้คุณจัด รูปแบบเอาต์พุต และยังมีวิธีอื่นๆ อีกสองสามวิธีที่มีประโยชน์ เช่นconsole.time(), console.group()คุณสามารถค้นหาเพิ่มเติมได้ที่หน้านี้

2. การผูกมัดเพิ่มเติมกับ? ตัวดำเนินการ

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

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

นี่เป็นตัวอย่างที่งี่เง่า แต่ในโครงการจริง มีการใช้การโยงทางเลือกบ่อยครั้ง

3. ใช้การทำลายวัตถุในพารามิเตอร์

ลองนึกภาพเรามีวัตถุข้อมูลที่เราดึงมาจากฐานข้อมูล

data:{
  "count": 1281,
  "next": "<https://pokeapi.co/api/v2/pokemon/?offset=4&limit=2>",
  "previous": "<https://pokeapi.co/api/v2/pokemon/?offset=0&limit=2>",
  "results": [
    {
      "name": "venusaur",
      "url": "<https://pokeapi.co/api/v2/pokemon/3/>"
    },
    {
      "name": "charmander",
      "url": "<https://pokeapi.co/api/v2/pokemon/4/>"
    }
  ]
}

const DisplayPokemon=(data)=>{
	const count=data.count
	const results=data.results
	results.map(// do some cool things with it)
}

const DisplayPokemon=({count,results})=>{
	results.map(// do some cool things with it)
}

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

เรามีอาร์เรย์ของวันธรรมดา และเราต้องการเพิ่มอีกสององค์ประกอบ เราสามารถทำได้ง่ายๆ ในบรรทัดเดียวด้วยไวยากรณ์ของสเปรด

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

5. ใช้วิธีการอาร์เรย์แทนการวนซ้ำ

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

const climbers=[
	{name:"Ben Moon",age:56},
	{name:"Jerry Moffatt",age:59},
	{name:"Alex Megos",age:29},
	{name:"Adam Ondra",age:30}
]
// Use a for loop
const ageOver50=(climbers)=>{
	const result=[] 
	for (let i=0, i<climbers.length;i++){
		if(climbers[i].age>50){
			result.push(climbers[i])
		}
	}
	return result
}

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

ตรวจสอบหน้านี้เพื่อเรียนรู้เพิ่มเติม

บทสรุป

นี่คือเคล็ดลับ JavaScript ห้าข้อที่ฉันพบว่ามีประโยชน์และอาจไม่เป็นที่รู้จักในหมู่นักพัฒนาใหม่ๆ คุณคิดว่าอะไรที่เป็นประโยชน์? แบ่งปันเคล็ดลับของคุณในความคิดเห็นด้านล่าง