ผู้ประกอบการที่สามใน JavaScript โดยไม่ต้อง "อื่น"

ฉันมักจะต้องใส่nullในเงื่อนไขอื่นที่ไม่มีอะไรเลย มีอยู่รอบ ๆ มันไหม? เช่น

condition ? x = true : null;

โดยพื้นฐานแล้วมีวิธีทำอย่างไร:

condition ? x = true;

ตอนนี้มันปรากฏขึ้นเป็นข้อผิดพลาดทางไวยากรณ์

FYI นี่คือตัวอย่างโค้ดจริงบางส่วน:

!defaults.slideshowWidth ? defaults.slideshowWidth = obj.find('img').width()+'px' : null;

ก่อนอื่นนิพจน์ประกอบไปด้วยการแทนที่ไม่ใช่สำหรับการสร้าง if / else มันเทียบเท่ากับการสร้าง if / else ที่ส่งคืนค่า นั่นคือประโยค if / else คือรหัสนิพจน์ประกอบไปด้วยคือนิพจน์ซึ่งหมายความว่าจะส่งคืนค่า

นี่หมายถึงหลายสิ่ง:

• ใช้นิพจน์ประกอบไปด้วยก็ต่อเมื่อคุณมีตัวแปรทางด้านซ้ายของค่า=นั้นเพื่อกำหนดค่าส่งคืน
• ใช้นิพจน์ประกอบไปด้วยก็ต่อเมื่อค่าที่ส่งคืนเป็นหนึ่งในสองค่า (หรือใช้นิพจน์ที่ซ้อนกันหากเหมาะสม)
• เป็นส่วนหนึ่งของการแสดงออก (หลังและหลัง?) แต่ละคนควรกลับค่าไม่มีผลข้างเคียง (การแสดงออกx = trueผลตอบแทนที่แท้จริงเป็นนิพจน์ทั้งหมดกลับค่าที่ผ่านมา แต่ยังมีการเปลี่ยนแปลงโดยไม่ต้อง x x มีผลกระทบใด ๆ กับค่าส่งกลับ)

ในระยะสั้น - การใช้ 'ถูกต้อง' ของนิพจน์ประกอบไปด้วยคือ

var resultofexpression = conditionasboolean ? truepart: falsepart;

แทนที่จะเป็นตัวอย่างของคุณcondition ? x=true : null ;ซึ่งคุณใช้นิพจน์ประกอบไปด้วยเพื่อตั้งค่าxคุณสามารถใช้สิ่งนี้:

 condition && (x = true);

นี่ยังคงเป็นนิพจน์และอาจไม่ผ่านการตรวจสอบดังนั้นวิธีการที่ดียิ่งขึ้นก็คือ

 void(condition && x = true);

อันสุดท้ายจะผ่านการตรวจสอบ

แต่จากนั้นอีกครั้งหากค่าที่คาดหวังคือบูลีนให้ใช้ผลลัพธ์ของนิพจน์เงื่อนไขในตัวเอง

var x = (condition); // var x = (foo == "bar");

ปรับปรุง ในส่วนที่เกี่ยวข้องกับตัวอย่างของคุณนี้น่าจะเหมาะสมกว่า:

defaults.slideshowWidth = defaults.slideshowWidth || obj.find('img').width()+'px';

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

อย่างไรก็ตามสำหรับสิ่งที่คุณมีเป็นตัวอย่างของคุณคุณสามารถทำได้:

if(condition) x = true;

แม้ว่าการจัดฟันจะปลอดภัยกว่าหากคุณต้องการเพิ่มคำสั่งมากกว่าหนึ่งคำในอนาคต:

if(condition) { x = true; }

แก้ไข:ตอนนี้คุณพูดถึงรหัสจริงที่ใช้กับคำถามของคุณ:

if(!defaults.slideshowWidth)
    { defaults.slideshowWidth = obj.find('img').width()+'px'; }

บ่อยครั้งที่ผู้คนใช้ประโยชน์จากตัวดำเนินการเชิงตรรกะเพื่อย่นไวยากรณ์คำสั่งให้สั้นลง:

!defaults.slideshowWidth &&
  (defaults.slideshowWidth = obj.find('img').width()+'px');

แต่ในกรณีของคุณไวยากรณ์อาจง่ายกว่านี้

defaults.slideshowWidth = defaults.slideshowWidth || obj.find('img').width()+'px';

รหัสนี้จะส่งคืนdefaults.slideshowWidthค่าถ้าdefaults.slideshowWidthประเมินเป็นจริงและobj.find('img').width()+'px'คุ้มค่าเป็นอย่างอื่น

ดูการประเมินการลัดวงจรของตัวดำเนินการเชิงตรรกะสำหรับรายละเอียด

var x = condition || null;

คุณสามารถเขียน

x = condition ? true : x;

ดังนั้น x จะไม่ถูกแก้ไขเมื่อเงื่อนไขเป็นเท็จ

สิ่งนี้จะเทียบเท่ากับ

if (condition) x = true

แก้ไข:

!defaults.slideshowWidth 
      ? defaults.slideshowWidth = obj.find('img').width()+'px' 
      : null 

มีทางเลือกสองทางคือ - ฉันไม่ได้บอกว่าสิ่งเหล่านี้ดีกว่าหรือแย่กว่า - ทางเลือกอื่น

การส่งผ่านค่า null เนื่องจากพารามิเตอร์ที่สามทำงานเนื่องจากค่าที่มีอยู่เป็นค่าว่าง หากคุณปรับโครงสร้างใหม่และเปลี่ยนแปลงเงื่อนไขนั่นอาจเป็นอันตรายได้ว่านี่ไม่เป็นความจริงอีกต่อไป การส่งผ่านค่าที่มีอยู่เป็นตัวเลือกที่ 2 ในยามประกอบไปด้วย:

!defaults.slideshowWidth = 
      ? defaults.slideshowWidth = obj.find('img').width()+'px' 
      : defaults.slideshowwidth 

ปลอดภัยกว่า แต่อาจดูไม่ดีและพิมพ์ได้มากกว่านี้ ในทางปฏิบัติฉันอาจจะเขียน

defaults.slideshowWidth = defaults.slideshowWidth 
               || obj.find('img').width()+'px'

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

!defaults.slideshowWidth ? defaults.slideshowWidth = obj.find('img').width()+'px' : null ;

จะกลายเป็น :

defaults.slideshowWidth = defaults.slideshowWidth || obj.find('img').width()+'px';

ชัดเจนยิ่งขึ้นเป็นสไตล์ "javascript" มากขึ้น

เกี่ยวกับอะไร

    if (condition) { code if condition = true };

ในการใช้ผู้ประกอบการ Ternary โดยไม่มีอย่างอื่นในอาร์เรย์หรือการประกาศวัตถุคุณสามารถใช้ตัวดำเนินการแพร่กระจาย ES6 ...()

const cond = false;
const arr = [
  ...(cond ? ['a'] : []),
  'b',
];
    // ['b']

และสำหรับวัตถุ:

const cond = false;
const obj = {
  ...(cond ? {a: 1} : {}),
  b: 2,
};
    // {b: 2}

แหล่งต้นฉบับ