จะตรวจสอบตัวแปรที่ไม่ได้กำหนดหรือเป็นโมฆะใน JavaScript ได้อย่างไร?

เรามักจะใช้รูปแบบรหัสต่อไปนี้ในรหัส JavaScript ของเรา

if (typeof(some_variable) != 'undefined' && some_variable != null)
{
    // Do something with some_variable
}

มีวิธีตรวจสอบที่ละเอียดน้อยลงซึ่งมีผลเหมือนกันหรือไม่?

ตามฟอรัมและวรรณคดีบางเรื่องที่บอกว่าสิ่งต่อไปนี้ควรมีผลเช่นเดียวกัน

if (some_variable)
{
    // Do something with some_variable
}

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

คุณต้องแยกความแตกต่างระหว่างกรณี:

1. ตัวแปรที่สามารถเป็นundefinedหรือไม่ได้ประกาศ คุณจะได้รับข้อผิดพลาดถ้าคุณเข้าถึงตัวแปรที่ไม่ได้ประกาศในบริบทอื่น ๆ typeofกว่าใด

if(typeof someUndeclaredVar == whatever) // works
if(someUndeclaredVar) // throws error

ตัวแปรที่ได้รับการประกาศ undefinedแต่ไม่ได้เริ่มต้นคือ

let foo;
if (foo) //evaluates to false because foo === undefined

2. ไม่ได้กำหนดคุณสมบัติsomeExistingObj.someUndefPropertyเช่น สถานที่ให้บริการที่ไม่ได้กำหนดไม่ได้ให้ข้อผิดพลาดและก็ผลตอบแทนundefinedซึ่งเมื่อแปลงเป็นแบบบูล, falseประเมิน ดังนั้นหากคุณไม่สนใจ 0และfalseใช้งานif(obj.undefProp)ก็โอเค มันมีสำนวนที่เหมือนกันโดยมีพื้นฐานจากข้อเท็จจริงนี้:

   value = obj.prop || defaultValue

   ซึ่งหมายความว่า "หากobjมีคุณสมบัติpropกำหนดให้valueมิฉะนั้นกำหนดค่าเริ่มต้นdefautValue"

   บางคนคิดว่าพฤติกรรมนี้ทำให้สับสนทำให้เกิดข้อผิดพลาดที่หายากและแนะนำให้ใช้ตัวinดำเนินการแทน

   value = ('prop' in obj) ? obj.prop : defaultValue

ฉันคิดว่าวิธีที่มีประสิทธิภาพที่สุดในการทดสอบ "คุณค่าคือnullหรือundefined" คือ

if ( some_variable == null ){
  // some_variable is either null or undefined
}

ดังนั้นทั้งสองเส้นจึงเท่ากัน:

if ( typeof(some_variable) !== "undefined" && some_variable !== null ) {}
if ( some_variable != null ) {}

หมายเหตุ 1

ตามที่กล่าวถึงในคำถามชุดย่อยแบบสั้นนั้นจำเป็นต้องsome_variableมีการประกาศมิฉะนั้น ReferenceError จะถูกส่งออกไป อย่างไรก็ตามในหลายกรณีคุณสามารถสันนิษฐานได้ว่าสิ่งนี้ปลอดภัย:

ตรวจสอบข้อโต้แย้งเพิ่มเติม:

function(foo){
    if( foo == null ) {...}

ตรวจสอบคุณสมบัติบนวัตถุที่มีอยู่

if(my_obj.foo == null) {...}

ในทางตรงกันข้ามtypeofสามารถจัดการกับตัวแปรทั่วโลกที่ไม่ได้ประกาศ (เพียงแค่ส่งกลับundefined) แต่กรณีเหล่านี้ควรลดลงให้น้อยที่สุดด้วยเหตุผลที่ดีตามที่ Alsciende อธิบาย

โน้ต 2

สิ่งนี้ - สั้นกว่า - ตัวแปรไม่เท่ากัน:

if ( !some_variable ) {
  // some_variable is either null, undefined, 0, NaN, false, or an empty string
}

ดังนั้น

if ( some_variable ) {
  // we don't get here if some_variable is null, undefined, 0, NaN, false, or ""
}

หมายเหตุ 3

โดยทั่วไปก็จะแนะนำให้ใช้แทน=== ==การแก้ปัญหาที่เสนอเป็นข้อยกเว้นของกฎนี้ ตรวจสอบไวยากรณ์ JSHintแม้มีeqnullตัวเลือกด้วยเหตุผลนี้

จากคู่มือสไตล์ jQuery :

ควรใช้การตรวจสอบความเท่าเทียมกันอย่างเข้มงวด (===) == ข้อยกเว้นเพียงอย่างเดียวคือเมื่อตรวจสอบ undefined และ null โดยวิธี null

// Check for both undefined and null values, for some important reason. 
undefOrNull == null;

การตรวจสอบค่า Null ด้วยความเท่าเทียมปกติจะส่งคืนค่าจริงสำหรับค่าที่ไม่ได้กำหนด

if (window.variable == null) alert('variable is null or undefined');

ในมาตรฐาน JavaScript ที่ใหม่กว่าเช่น ES5 และ ES6 คุณสามารถพูดได้

> Boolean(0) //false
> Boolean(null)  //false
> Boolean(undefined) //false

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

if (Boolean(myvar)){
   // Do something
}

ที่นี่ "null" หรือ "สตริงว่าง" หรือ "undefined" จะได้รับการจัดการอย่างมีประสิทธิภาพ

หากคุณลองและอ้างอิงตัวแปรที่ไม่ได้ประกาศจะมีข้อผิดพลาดเกิดขึ้นในการใช้งาน JavaScript ทั้งหมด

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

 if (typeof(myObj.some_property) != "undefined" && myObj.some_property != null)

ถึง

if (myObj.some_property != null)

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

if (window.some_variable != null) {
    // Do something with some_variable
}

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

ประการแรกคุณต้องมีความชัดเจนมากเกี่ยวกับสิ่งที่คุณทดสอบ JavaScript มีทุกประเภทของการแปลงโดยปริยายที่จะเดินทางคุณขึ้นและทั้งสองประเภทที่แตกต่างกันของความเสมอภาคเปรียบเทียบ: และ=====

ฟังก์ชันtest(val)ที่ทดสอบnullหรือundefinedควรมีคุณสมบัติดังต่อไปนี้:

 test(null)         => true
 test(undefined)    => true
 test(0)            => false
 test(1)            => false
 test(true)         => false
 test(false)        => false
 test('s')          => false
 test([])           => false

เรามาดูกันว่าแนวคิดใดที่ผ่านการทดสอบจริงของเรา

งานเหล่านี้:

val == null
val === null || val === undefined
typeof(val) == 'undefined' || val == null
typeof(val) === 'undefined' || val === null

สิ่งเหล่านี้ใช้ไม่ได้:

typeof(val) === 'undefined'
!!val

ฉันสร้างรายการ jsperf เพื่อเปรียบเทียบความถูกต้องและประสิทธิภาพของวิธีการเหล่านี้ ผลลัพธ์ไม่สามารถสรุปได้ในขณะนี้เนื่องจากยังมีการรันในเบราว์เซอร์ / แพลตฟอร์มที่ต่างกันไม่เพียงพอ โปรดสละเวลาสักครู่เพื่อทดสอบคอมพิวเตอร์ของคุณ!

ในปัจจุบันดูเหมือนว่าการval == nullทดสอบอย่างง่าย ๆจะให้ประสิทธิภาพที่ดีที่สุด นอกจากนี้ยังสั้นมาก การทดสอบอาจไม่ได้ผลval != nullหากคุณต้องการส่วนประกอบที่สมบูรณ์

นี่เป็นกรณีเดียวที่==ควรใช้:

if (val == null) console.log('val is null or undefined')

เนื่องจากไม่มีคำตอบที่สมบูรณ์และถูกต้องฉันจะพยายามสรุป:

โดยทั่วไปการแสดงออก:

if (typeof(variable) != "undefined" && variable != null)

ไม่สามารถทำให้ง่ายขึ้นได้เนื่องจากvariableอาจถูกยกเลิกการประกาศดังนั้นการละเว้นtypeof(variable) != "undefined"จะส่งผลให้ ReferenceError แต่คุณสามารถทำให้การแสดงออกง่ายขึ้นตามบริบท :

หากvariableเป็นสากลคุณสามารถลดความซับซ้อนไปที่:

if (window.variable != null)

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

if (variable != null)

หากเป็นคุณสมบัติของวัตถุคุณไม่ต้องกังวลกับ ReferenceError:

if (obj.property != null)

คุณสามารถตรวจสอบว่าตัวแปรมีค่าหรือไม่ ความหมาย

if( myVariable ) {
//mayVariable is not :
//null
//undefined
//NaN
//empty string ("")
//0
//false

}

หากคุณไม่ทราบว่ามีตัวแปรอยู่หรือไม่ (นั่นหมายถึงถ้ามีการประกาศ) คุณควรตรวจสอบกับตัวดำเนินการ typeof เช่น

if( typeof myVariable !== 'undefined' ) {
    // myVariable will get resolved and it is defined
}

ฉันทำสิ่งนี้โดยใช้วิธีนี้

บันทึก id ในตัวแปรบางตัว

var someVariable = document.getElementById("someId");

จากนั้นใช้หากเงื่อนไข

if(someVariable === ""){
 //logic
} else if(someVariable !== ""){
 //logic
}

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

!!window['bleh'];

สิ่งนี้จะส่งคืนค่าเท็จในขณะที่ยังไม่ได้ประกาศ bleh และกำหนดค่า

นี่เป็นอีกวิธีในการใช้ Array include () method:

[undefined, null].includes(value)

นี่คือตัวอย่างของโอกาสที่หายากมากที่จะแนะนำให้ใช้แทน== ===การแสดงออกsomevar == nullจะกลับจริงundefinedและnullแต่เป็นเท็จสำหรับทุกอย่างอื่น (ข้อผิดพลาดหากตัวแปรไม่ได้ประกาศ)

การใช้!=จะพลิกผลลัพธ์ตามที่คาดไว้

บรรณาธิการสมัยใหม่จะไม่เตือนสำหรับการใช้งาน==หรือ!=ผู้ปฏิบัติงานด้วยnullเนื่องจากนี่เป็นพฤติกรรมที่ต้องการเกือบตลอดเวลา

การเปรียบเทียบที่พบบ่อยที่สุด:

undeffinedVar == null     // true
obj.undefinedProp == null // true
null == null              // true
0 == null                 // false
'0' == null               // false
'' == null                // false

ลองด้วยตัวคุณเอง:

let undefinedVar;
console.table([
    { test : undefinedVar,     result: undefinedVar     == null },
    { test : {}.undefinedProp, result: {}.undefinedProp == null },
    { test : null,             result: null             == null },
    { test : false,            result: false            == null },
    { test : 0,                result: 0                == null },
    { test : '',               result: ''               == null },
    { test : '0',              result: '0'              == null },
]);

อะไรก็ตามที่yyyไม่ได้นิยามหรือเป็นโมฆะมันจะกลับมาจริง

if (typeof yyy == 'undefined' || !yyy) {
    console.log('yes');
} else {
    console.log('no');
}

ใช่

if (!(typeof yyy == 'undefined' || !yyy)) {
    console.log('yes');
} else {
    console.log('no');
}

ไม่

เปิดเครื่องมือนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์ของคุณและลองรหัสที่แสดงในภาพด้านล่าง

เพื่อที่จะเข้าใจเรามาวิเคราะห์สิ่งที่จะเป็นค่าตอบแทนโดย Javascript Engine เมื่อทำการแปลงที่ไม่ได้กำหนดเป็นโมฆะและ '' (สตริงว่างเช่นกัน) คุณสามารถตรวจสอบโดยตรงในคอนโซลนักพัฒนาของคุณ

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

if (a === undefined || a === null || a==='') {
    console.log("Nothing");
} else {
    console.log("Something");
}

นอกจากนี้ฉันต้องการชี้ให้เห็นอีกสิ่งหนึ่ง

ผลลัพธ์ของ Boolean (0) คืออะไร

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

คล้ายกับสิ่งที่คุณมีคุณสามารถทำสิ่งที่ชอบ

if (some_variable === undefined || some_variable === null) { do stuff }

การทดสอบความไม่เป็นจริง ( if (value == null)) หรือไม่เป็นโมฆะ ( if (value != null)) นั้นน้อยกว่าการทดสอบสถานะคำจำกัดความของตัวแปร

นอกจากนี้การทดสอบif (value)(หรือ if( obj.property)) เพื่อให้แน่ใจว่าการมีอยู่ของตัวแปร (หรือคุณสมบัติของวัตถุ) ของคุณล้มเหลวหากมีการกำหนดด้วยfalseค่าบูลีน Caveat emptor :)

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

ตัวอย่างการทำงานที่:

http://www.thesstech.com/tryme?filename=nullandundefined

รหัสตัวอย่าง:

function compare(){
    var a = null; //variable assigned null value
    var b;  // undefined
    if (a === b){
        document.write("a and b have same datatype.");
    }
    else{
        document.write("a and b have different datatype.");
    }   
}

หากวัตถุประสงค์ของคำสั่ง if คือการตรวจสอบnullหรือundefinedค่าก่อนที่จะกำหนดค่าให้กับตัวแปรคุณสามารถใช้ประโยชน์จากNullish Coalescing Operatorในที่สุดก็พร้อมใช้งานบน JavaScript แม้ว่าการสนับสนุนเบราว์เซอร์จะถูก จำกัด จากข้อมูลจากcaniuse พบว่ารองรับเบราว์เซอร์เพียง 48.34% เท่านั้น (จนถึงเมษายน 2563)

const a = some_variable ?? '';

เพื่อให้มั่นใจว่าตัวแปรจะถูกกำหนดให้เป็นสตริงว่าง (หรือค่าเริ่มต้นอื่น ๆ ) ถ้าsome_variableเป็นหรือnullundefined

ผู้ประกอบการนี้เหมาะที่สุดสำหรับกรณีการใช้งานของคุณมันไม่ได้กลับค่าเริ่มต้นสำหรับประเภทอื่น ๆ ของมูลค่า falsy เช่นและ0''

คุณต้องกำหนดฟังก์ชั่นของแบบฟอร์มนี้:

validate = function(some_variable){
    return(typeof(some_variable) != 'undefined' && some_variable != null)
}

ใน ES5 หรือ ES6 หากคุณต้องการตรวจสอบหลาย ๆ ครั้งที่คุณทำ:

const excluded = [null, undefined, ''];

if (!exluded.includes(varToCheck) {
  // it will bee not null, not undefined and not void string
}

ด้วย Ramda คุณสามารถทำR.isNil(yourValue) Lodash และห้องสมุดผู้ช่วยเหลืออื่น ๆ ที่มีฟังก์ชั่นเดียวกันได้