angular - การเปรียบเทียบตัวดำเนินการ Ternary, ตัวดำเนินการ Elvis, ตัวดำเนินการนำทางปลอดภัย และตัวดำเนินการ OR ทางตรรกะ

การเปรียบเทียบระหว่างตัวดำเนินการแบบสามทางกับตัวดำเนินการเอลวิสกับตัวดำเนินการนำทางอย่างปลอดภัยกับตัวดำเนินการหรือเชิงตรรกะในแองกูลาร์

ตัวดำเนินการสามทาง (statement ? obj : obj)

let gender = user.male ? "male" : "female";

โอเปอเรเตอร์เอลวิส (?: )

let displayName = user.name ?: "";

ตัวดำเนินการนำทางปลอดภัย (?.)

let displayName = user.name ?. "";

ตัวดำเนินการหรือแบบตรรกะ

let displayName = user.name || "";

ตัวดำเนินการข้างต้นทั้งหมดทำกระบวนการเดียวกัน เหตุผลที่แตกต่างกันมีอะไรบ้างและอันไหนดีที่สุดและแย่ที่สุด?

คำตอบ #1

อัปเดต

ด้วย TypeScript 3.7 พวกเขาได้ใช้งาน Optional Chaining ซึ่งเหมือนกับตัวดำเนินการนำทางอย่างปลอดภัย แต่ดีกว่า นอกจากนี้ Nullish Coalescing ก็ได้ปรากฏขึ้นในฉากนี้เช่นกัน

หากคุณกำลังใช้เวอร์ชันนี้ คำตอบด้านล่างถือว่าเก่าแล้ว

บางทีฉันอาจพลาดเวอร์ชันไปสองสามเวอร์ชัน แต่ตามที่ฉันรู้ TypeScript ไม่มีตัวดำเนินการเอลวิสหรือโอเปอเรเตอร์นำทางอย่างปลอดภัย สิ่งเพิ่มเติมเพียงอย่างเดียวที่พวกเขามีก็คือโอเปอเรเตอร์ยืนยันไม่เป็นค่า null !. แต่สิ่งนี้มีไว้สำหรับคอมไพเลอร์เท่านั้น และใน js ที่คอมไพล์แล้ว ! จะถูกลบออก อย่างไรก็ตาม Angular มีโอเปอเรเตอร์นำทางอย่างปลอดภัยภายในเทมเพลตของพวกเขา แต่ภายใต้ฝากระตุ้นนี้จะถูกแปลงเป็นหรือเชิงตรรกะ || ข้อดีที่นี่คือทำให้ตัวโค้ดอ่านง่ายขึ้นและเทมเพลตมีขนาดเล็กลง

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

ซึ่งทำให้เราหลงเหลือเพียงตัวดำเนินการแบบ ternary กับ logical or คุณจะใช้ตัวแรกหากมี 3 ค่า คือ คำถาม ผลลัพธ์ 'ใช่' และผลลัพธ์ 'ไม่ใช่' ของคำถามนั้น

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

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

สรุปสั้น ๆ;

• ตัวดำเนินการสามทาง

ทำ if else ให้เรียบง่าย ใช้งานได้ทุกที่

• โอเปอเรเตอร์เอลวิส ?:

ไม่สามารถใช้ได้ใน typescript/javascript/angular และโดยพื้นฐานเหมือนกับ ||

• โอเปอเรเตอร์การนำทางอย่างปลอดภัย ?.

ใช้ได้เฉพาะในการสร้างแม่แบบแบบแองกูลาร์ ใช้เพื่อป้องกันการชี้ไปยังค่า null ในการเข้าถึงพารามิเตอร์ของวัตถุ

• ตรรกะ หรือ ||

ถ้าไม่ใช่มือซ้าย ก็มือขวา ยิ่งง่ายขึ้นด้วย if else ใช้ได้ใน typescript/javascript/angular

คำตอบ #2

ตัวดำเนินการนำทางอย่างปลอดภัย (?.) ซึ่งบางครั้งถูกเรียกผิดว่า ตัวดำเนินการ Elvis ใน Angular2 เท่านั้น

นี่คือสิ่งของการผูกเทมเพลตของ Angular2 มันไม่สามารถใช้ได้ในจาวาสคริปต์

ตัวดำเนินการสามทาง (statement ? obj : obj)

นี่คือเมื่อคุณต้องการตรวจสอบเงื่อนไข และถ้าเงื่อนไขนั้นเป็นจริง ให้ส่งค่าหนึ่ง หรือถ้าเป็นเท็จ ให้ส่งค่าอีกค่าหนึ่ง

ตัวดำเนินการหรือแบบตรรกะ

นี่คือเมื่อคุณต้องการส่งค่ากลับตามการมีอยู่ของมันเองหรือความเป็นจริง (ดังนั้นจะไม่มีข้อกำหนดอื่นเกี่ยวข้อง) ซึ่งมันแตกต่างจาก Ternery อย่างมาก

let displayName = user.name || "";

ในตัวอย่างข้างต้น คุณกำลังพูดว่าถ้าเงื่อนไขใด ๆ ของนิพจน์เหล่านั้นเป็นจริง ให้ส่งมันกลับมา ซึ่งอยู่ด้านล่าง:

let gender = user.male ? "male" : "female";

สิ่งที่คุณกำลังพูดคือ: ถ้าสภาวะของฉันเป็นจริง ให้คืนค่า "ชาย" มิฉะนั้นให้คืนค่า "หญิง"

โอเปอเรเตอร์เอลวิส (?: )

สิ่งนี้ไม่สามารถใช้ได้ใน JavaScript แต่คุณสามารถพบในภาษาอื่น ๆ เช่น PHP และมันโดยพื้นฐานแล้วเหมือนกับตัวดำเนินการ Ternary แต่ถูกทำให้เรียบง่ายลง ในกรณีที่ด้านซ้ายของการเปรียบเทียบ (ด้านความจริง) สามารถใช้เป็นค่าที่คืนค่าได้:

ดังนั้น :

let m = something ?: somethingElse // if in case of truthiness of `something` you want to return `something` , you can do this

เท่ากับ :

let m = something ? something : somethingElse 

EDIt: มันไม่สมเหตุสมผลที่จะเปรียบเทียบพวกเขาเลย เพราะพวกเขาไม่ได้ทำสิ่งเดียวกันเลย