ตัวหนอนจะทำอย่างไรเมื่อมันนำหน้าการแสดงออก

var attr = ~'input,textarea'.indexOf( target.tagName.toLowerCase() )
           ? 'value'
           : 'innerHTML'

ฉันเห็นมันในคำตอบและฉันไม่เคยเห็นมันมาก่อน

มันหมายความว่าอะไร?

~เป็นตัวดำเนินการระดับบิตที่พลิกบิตทั้งหมดในตัวถูกดำเนินการ

ตัวอย่างเช่นหากหมายเลขของคุณคือ1การแสดงเลขฐานสองของโฟลว์ IEEE 754 (วิธีที่จาวาสคริปต์จัดการกับตัวเลข) จะเป็น ...

0011 1111 1111 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000

ดังนั้น~แปลงตัวถูกดำเนินการเป็นจำนวนเต็ม 32 บิต (ตัวดำเนินการ bitwise ใน JavaScript ทำอย่างนั้น) ...

0000 0000 0000 0000 0000 0000 0000 0001

^{ถ้ามันเป็นจำนวนลบมันจะถูกเก็บไว้ในส่วนเติมเต็มของ 2: สลับบิตทั้งหมดและเพิ่ม 1}

... จากนั้นจึงพลิกบิตทั้งหมด ...

1111 1111 1111 1111 1111 1111 1111 1110

แล้วการใช้งานของมันคืออะไร? เมื่อใดบ้างที่ผู้ใช้อาจใช้

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

นอกจากนี้ยังเป็น (โดยทั่วไป) ไม่ชัดเจนเคล็ดลับที่จะเปิดindexOf()'s พบค่าตอบแทนเข้าtruthy (ในขณะที่ทำให้ไม่พบเป็น falsy ) และผู้คนมักจะใช้มันสำหรับผลข้างเคียงของการตัดทอนหมายเลขที่ 32 บิต (และลดลงทศนิยมตำแหน่งของตนโดยการเพิ่มมัน ได้ผลเช่นเดียวกับMath.floor()ตัวเลขบวก)

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

นอกจากนี้ยังมีความเกี่ยวข้องน้อยในขณะนี้ว่ามี JavaScript และArray.prototype.includes() String.prototype.includes()สิ่งเหล่านี้คืนค่าบูลีน หากแพลตฟอร์มเป้าหมายของคุณสนับสนุนคุณควรใช้วิธีนี้ในการทดสอบการมีอยู่ของค่าในสตริงหรืออาร์เรย์

ใช้มันก่อน indexOf()แสดงออกอย่างมีประสิทธิภาพจะช่วยให้คุณได้ผลลัพธ์ที่เป็นจริง / เป็นเท็จแทนดัชนีตัวเลขที่ส่งคืนโดยตรง

หากค่าส่งคืนเป็น-1เช่นนั้น~-1เป็น0เพราะ-1สตริงของ 1 บิตทั้งหมด ค่าใด ๆ ที่มากกว่าหรือเท่ากับศูนย์จะให้ผลลัพธ์ที่ไม่เป็นศูนย์ ดังนั้น

if (~someString.indexOf(something)) {
}

จะทำให้ifรหัสทำงานเมื่อ "บางอย่าง" อยู่ใน "someString" ถ้าคุณลองใช้.indexOf()เป็นบูลีนโดยตรงสิ่งนั้นจะไม่ทำงานเพราะบางครั้งมันกลับเป็นศูนย์ (เมื่อ "บางสิ่ง" อยู่ที่จุดเริ่มต้นของสตริง)

แน่นอนว่ามันก็ใช้ได้เช่นกัน:

if (someString.indexOf(something) >= 0) {
}

และมันลึกลับน้อยกว่ามาก

บางครั้งคุณจะเห็นสิ่งนี้ด้วย:

var i = ~~something;

การใช้ตัว~ดำเนินการสองครั้งเช่นนี้เป็นวิธีที่รวดเร็วในการแปลงสตริงเป็นจำนวนเต็ม 32 บิต อย่างแรก~คือการแปลงและครั้งที่สองก็~พลิกบิตกลับ แน่นอนว่าถ้าโอเปอเรเตอร์ถูกนำไปใช้กับบางสิ่งที่ไม่สามารถแปลงเป็นตัวเลขได้คุณจะได้NaNผลลัพธ์ ( แก้ไข - อันที่จริงมันเป็นตัวที่สอง~ที่ใช้ก่อน แต่คุณจะได้แนวคิด)

~เป็นBitwise ไม่ Operator , เป็นประมาณเช่นเดียวกับ~x -(x+1)ง่ายต่อการเข้าใจเรียงลำดับจาก ดังนั้น:

~2;    // -(2+1) ==> -3

-(x+1)พิจารณา สามารถดำเนินการดังกล่าวในการผลิต-10

กล่าวอีกนัยหนึ่งการ~ใช้กับช่วงของค่าตัวเลขจะสร้างค่า falsy (coerce to falsefrom 0) เฉพาะ-1ค่าอินพุตเท่านั้นมิฉะนั้นค่าจริงอื่น ๆ

อย่างที่เรารู้ -1เป็นเรื่องปกติที่เรียกว่าค่าแมวมอง มันจะใช้สำหรับฟังก์ชั่นมากมายที่กลับ>= 0ค่าสำหรับความสำเร็จและ-1สำหรับความล้มเหลวในภาษา C ซึ่งมีกฎการคืนค่าเหมือนกันindexOf()ใน JavaScript

มันเป็นเรื่องธรรมดาที่จะตรวจสอบว่ามี / ไม่มีซับสตริงในสตริงอื่นด้วยวิธีนี้

var a = "Hello Baby";

if (a.indexOf("Ba") >= 0) {
    // found it
}
if (a.indexOf("Ba") != -1) { 
    // found it
}

if (a.indexOf("aB") < 0) { 
    // not found
}
if (a.indexOf( "aB" ) == -1) { 
    // not found
}

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

var a = "Hello Baby";

~a.indexOf("Ba");         // -7   -> truthy
if (~a.indexOf("Ba")) {   // true
    // found it
}

~a.indexOf("aB");         // 0    -> falsy
!~a.indexOf("aB");        // true
if (!~a.indexOf( "aB" )) {  // true
    // not found
}

คุณไม่รู้ JS: ประเภทและไวยากรณ์โดย Kyle Simpson

~indexOf(item) เกิดขึ้นบ่อยครั้งและคำตอบที่นี่ยอดเยี่ยม แต่บางทีบางคนก็ต้องรู้วิธีใช้และ "ข้าม" ทฤษฎี:

   if (~list.indexOf(item)) {
     // item in list
   } else {
     // item *not* in list
   }

สำหรับการพิจารณาการใช้เคล็ดลับตัวหนอนเพื่อสร้างtruthyค่าจากindexOfผลก็เป็นที่ชัดเจนมากขึ้นและมีความวิเศษน้อยแทนที่จะใช้วิธีการในการincludesString

'hello world'.includes('hello') //=> true
'hello world'.includes('kittens') //=> false

โปรดทราบว่านี่เป็นวิธีมาตรฐานใหม่ของ ES 2015 ดังนั้นจึงไม่สามารถใช้กับเบราว์เซอร์รุ่นเก่าได้ ในกรณีที่สำคัญให้พิจารณาใช้String.prototype.includes polyfill polyfill

คุณลักษณะนี้มีให้สำหรับอาร์เรย์ที่ใช้ไวยากรณ์เดียวกัน :

['apples', 'oranges', 'cherries'].includes('apples') //=> true
['apples', 'oranges', 'cherries'].includes('unicorns') //=> false

นี่คือArray.prototype.includes polyfillหากคุณต้องการการสนับสนุนเบราว์เซอร์รุ่นเก่า