จะเขียนคำสั่ง IF แบบอินไลน์ใน JavaScript ได้อย่างไร

ฉันจะใช้ifคำสั่งinline ใน JavaScript ได้อย่างไร มีelseคำสั่งแบบอินไลน์ด้วยหรือไม่

บางสิ่งเช่นนี้

var a = 2;
var b = 3;

if(a < b) {
    // do something
}

คุณไม่จำเป็นต้องมี jQuery JavaScript เพียงอย่างเดียวจะทำสิ่งนี้

var a = 2;
var b = 3;    
var c = ((a < b) ? 'minor' : 'major');

cตัวแปรจะเป็นminorถ้าค่าtrueและถ้ามีค่าเป็นmajorfalse

เรื่องนี้เป็นที่รู้จักในฐานะผู้ประกอบการเงื่อนไข (ประกอบ)

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator

สำหรับการเขียนifข้อความสั่งแบบอินไลน์โค้ดที่อยู่ภายในควรเป็นเพียงหนึ่งข้อความ:

if ( a < b ) // code to be executed without curly braces;

มีผู้ประกอบการที่ประกอบไปด้วยเช่นนี้:

var c = (a < b) ? "a is less than b"  : "a is not less than b";

คุณสามารถประมาณถ้า / อื่นโดยใช้ตัวดำเนินการทางตรรกะเท่านั้น

(a && b) || c

ด้านบนเป็นคร่าวๆเช่นเดียวกับการพูด:

a ? b : c

และแน่นอนประมาณเช่นเดียวกับ:

if ( a ) { b } else { c }

ฉันพูดประมาณเพราะมีหนึ่งความแตกต่างด้วยวิธีนี้ในการที่คุณจะต้องรู้ว่าค่าของจะประเมินเป็นจริงมิฉะนั้นคุณก็จะได้รับb cโดยพื้นฐานแล้วคุณต้องตระหนักว่าส่วนที่จะปรากฏif () { here }นั้นเป็นส่วนหนึ่งของเงื่อนไขที่คุณวางif ( here ) { }ไว้

ด้านบนเป็นไปได้เนื่องจากพฤติกรรม JavaScript ของการส่ง / ส่งกลับหนึ่งในค่าดั้งเดิมที่เกิดขึ้นในการแสดงออกทางตรรกะซึ่งหนึ่งขึ้นอยู่กับประเภทของผู้ประกอบการ บางภาษาอื่น ๆ เช่น PHP ดำเนินการกับผลลัพธ์ที่แท้จริงของการดำเนินการเช่นจริงหรือเท็จหมายถึงผลลัพธ์ที่ได้จริงหรือเท็จเสมอ เช่น:

14 && 0          /// results as 0,  not false
14 || 0          /// results as 14, not true
1 && 2 && 3 && 4 /// results as 4,  not true
true && ''       /// results as ''
{} || '0'        /// results as {}

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

d = (a && b) || c;
d = a ? b : c;

if `a == true` then `d = b` else `d = c`

วิธีเดียวที่จะทำให้สิ่งนี้บรรลุผลสำเร็จด้วยมาตรฐานหากคำสั่งนั้นเป็นการทำซ้ำการกำหนด:

if ( a ) { d = b } else { d = c }

คุณอาจถามว่าทำไมใช้แค่Logical Operatorsแทนที่จะเป็นTernary Operatorสำหรับกรณีง่ายๆที่คุณอาจจะทำไม่ได้เว้นแต่คุณต้องการให้แน่ใจaและbเป็นจริงทั้งคู่ นอกจากนี้คุณยังสามารถบรรลุเงื่อนไขที่ซับซ้อนที่ซับซ้อนยิ่งขึ้นด้วยตัวดำเนินการ Logical ซึ่งอาจยุ่งเหยิงโดยใช้การดำเนินการที่ซ้อนกัน ... จากนั้นอีกครั้งถ้าคุณต้องการให้โค้ดของคุณสามารถอ่านได้ง่ายไม่ว่าจะเป็นสัญชาตญาณจริงๆ

ในภาษาอังกฤษธรรมดาไวยากรณ์อธิบาย:

if(condition){
    do_something_if_condition_is_met;
}
else{
    do_something_else_if_condition_is_not_met;
}

สามารถเขียนเป็น:

condition ? do_something_if_condition_is_met : do_something_else_if_condition_is_not_met;

<div id="ABLAHALAHOO">8008</div>
<div id="WABOOLAWADO">1110</div>

parseInt( $( '#ABLAHALAHOO' ).text()) > parseInt( $( '#WABOOLAWADO ).text()) ? alert( 'Eat potato' ) : alert( 'You starve' );

หากคุณต้องการอินไลน์ IF (ไม่มี ELSE) คุณสามารถใช้ตัวดำเนินการตรรกะและตัวดำเนินการ:

(a < b) && /*your code*/;

หากคุณต้องการ ELSE ให้ใช้การดำเนินการแบบไตรภาคที่บุคคลอื่นแนะนำ

คุณสามารถทำเช่นนี้ใน JavaScript:

a < b ? passed() : failed();

FYI คุณสามารถเขียนโอเปอเรเตอร์ที่มีเงื่อนไข

var a = (truthy) ? 1 : (falsy) ? 2 : 3;

หากตรรกะของคุณซับซ้อนเพียงพอคุณอาจพิจารณาใช้IIFE

var a = (function () {
  if (truthy) return 1;
  else if (falsy) return 2;
  return 3;
})();

แน่นอนถ้าคุณวางแผนที่จะใช้ตรรกะนี้มากกว่าหนึ่งครั้งคุณควรใส่ในฟังก์ชันเพื่อให้สิ่งที่ดีและแห้ง

ฉันมักจะต้องเรียกใช้รหัสเพิ่มเติมตามเงื่อนไขโดยใช้: ( , , )องค์ประกอบของรหัสหลาย ๆ สามารถเรียกใช้:

var a = 2;
var b = 3;
var c = 0;

( a < b ?  ( alert('hi'), a=3, b=2, c=a*b ) : ( alert('by'), a=4, b=10, c=a/b ) );

หากต้องการเพิ่มในส่วนนี้คุณสามารถใช้แบบอินไลน์ได้หากเงื่อนไขกับ && และ || ผู้ประกอบการ แบบนี้

var a = 2;
var b = 0;

var c = (a > b || b == 0)? "do something" : "do something else";

ไม่ใช่คำถามหลัก: ฉันสามารถเขียนต่อไปนี้?

if (foo)
  console.log(bar)
else
  console.log(foo + bar)

คำตอบคือใช่ข้างต้นจะแปล

อย่างไรก็ตามระวังการทำดังต่อไปนี้

if (foo)
  if (bar)
    console.log(foo)
  else 
    console.log(bar)
else 
  console.log(foobar)

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

อินไลน์หาก:

(('hypothesis') ? 'truthy conclusion' : 'falsey conclusion')

ข้อสรุปจริง: งบดำเนินการเมื่อสมมติฐานเป็นจริง

ข้อสรุปเท็จ: งบดำเนินการเมื่อสมมติฐานเป็นเท็จ

ตัวอย่างของคุณ:

var c = ((a < b) ? 'a<b statements' : '!(a<b) statements');