Làm cách nào để kiểm tra một biến không xác định hoặc null trong JavaScript?

Chúng tôi thường xuyên sử dụng mẫu mã sau trong mã JavaScript của mình

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

Có cách nào ít kiểm tra dài dòng có tác dụng tương tự không?

Theo một số diễn đàn và tài liệu nói đơn giản như sau nên có tác dụng tương tự.

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

Thật không may, Fireorms đánh giá một tuyên bố như lỗi trong thời gian chạy khi some_variablekhông được xác định, trong khi câu lệnh đầu tiên chỉ tốt cho nó. Đây chỉ là một hành vi (không mong muốn) của Fireorms hay thực sự có một số khác biệt giữa hai cách đó?

Bạn phải phân biệt giữa các trường hợp:

1. Các biến có thể undefinedhoặc không được khai báo . Bạn sẽ gặp lỗi nếu bạn truy cập vào một biến không được khai báo trong bất kỳ ngữ cảnh nào khác ngoài typeof.

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

Một biến đã được khai báo nhưng không được khởi tạo là undefined.

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

2. Thuộc tính không xác định , như someExistingObj.someUndefProperty. Một thuộc tính không xác định không mang lại lỗi và chỉ trả về undefined, khi được chuyển đổi thành boolean, ước tính thành false. Vì vậy, nếu bạn không quan tâm 0và false, sử dụng if(obj.undefProp)là ok. Có một thành ngữ chung dựa trên thực tế này:

   value = obj.prop || defaultValue

   có nghĩa là "nếu objcó thuộc tính prop, gán nó cho value, nếu không thì gán giá trị mặc định defautValue".

   Một số người cho rằng hành vi này gây nhầm lẫn, cho rằng nó dẫn đến các lỗi khó tìm và đề nghị sử dụng intoán tử thay thế

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

Tôi nghĩ rằng cách hiệu quả nhất để kiểm tra "giá trị là nullhoặc undefined" là

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

Vì vậy, hai dòng này là tương đương:

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

Lưu ý 1

Như đã đề cập trong câu hỏi, biến thể ngắn yêu cầu some_variableđã được khai báo, nếu không thì ReferenceError sẽ bị ném. Tuy nhiên, trong nhiều trường hợp sử dụng, bạn có thể cho rằng điều này là an toàn:

kiểm tra các đối số tùy chọn:

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

kiểm tra các thuộc tính trên một đối tượng hiện có

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

Mặt khác typeofcó thể đối phó với các biến toàn cầu không được khai báo (đơn giản là trả về undefined). Tuy nhiên, những trường hợp này nên được giảm đến mức tối thiểu vì những lý do chính đáng, như Alsciende giải thích.

Lưu ý 2

Biến thể này - thậm chí ngắn hơn - không tương đương:

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

vì thế

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

Lưu ý 3

Nói chung nên sử dụng ===thay vì ==. Giải pháp đề xuất là một ngoại lệ cho quy tắc này. Các kiểm tra cú pháp JSHint thậm chí cung cấp các eqnulltùy chọn vì lý do này.

Từ hướng dẫn kiểu jQuery :

Kiểm tra bình đẳng nghiêm ngặt (===) nên được sử dụng có lợi cho ==. Ngoại lệ duy nhất là khi kiểm tra không xác định và null bằng cách null.

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

Kiểm tra null với đẳng thức bình thường cũng sẽ trả về true cho không xác định.

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

Trong các tiêu chuẩn JavaScript mới hơn như ES5 và ES6, bạn chỉ có thể nói

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

tất cả trả về false, tương tự như kiểm tra các biến rỗng của Python. Vì vậy, nếu bạn muốn viết logic điều kiện xung quanh một biến, chỉ cần nói

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

ở đây "null" hoặc "chuỗi rỗng" hoặc "không xác định" sẽ được xử lý hiệu quả.

Nếu bạn thử và tham chiếu một biến không được khai báo, một lỗi sẽ được đưa ra trong tất cả các triển khai JavaScript.

Thuộc tính của các đối tượng không phải chịu các điều kiện tương tự. Nếu một thuộc tính đối tượng chưa được xác định, một lỗi sẽ không được đưa ra nếu bạn thử và truy cập nó. Vì vậy, trong tình huống này, bạn có thể rút ngắn:

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

đến

if (myObj.some_property != null)

Với suy nghĩ này và thực tế là các biến toàn cục có thể truy cập như các thuộc tính của đối tượng toàn cầu ( windowtrong trường hợp trình duyệt), bạn có thể sử dụng các biến sau cho các biến toàn cục:

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

Trong phạm vi cục bộ, luôn hữu ích để đảm bảo các biến được khai báo ở đầu khối mã của bạn, điều này sẽ tiết kiệm cho việc sử dụng định kỳ typeof.

Đầu tiên bạn phải rất rõ ràng về những gì bạn kiểm tra. JavaScript có tất cả các loại chuyển đổi ngầm định để giúp bạn vượt qua và hai loại so sánh đẳng thức khác nhau: ==và ===.

Một chức năng, test(val)kiểm tra nullhoặc undefinednên có các đặc điểm sau:

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

Hãy xem ý tưởng nào ở đây thực sự vượt qua bài kiểm tra của chúng tôi.

Những công việc này:

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

Những thứ này không hoạt động:

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

Tôi đã tạo một mục jsperf để so sánh tính chính xác và hiệu suất của các phương pháp này. Kết quả là không thuyết phục trong thời gian này vì không có đủ chạy trên các trình duyệt / nền tảng khác nhau. Hãy dành một phút để chạy thử nghiệm trên máy tính của bạn!

Hiện tại, có vẻ như val == nullthử nghiệm đơn giản cho hiệu suất tốt nhất. Nó cũng khá ngắn nhất. Bài kiểm tra có thể bị phủ định val != nullnếu bạn muốn bổ sung.

đây là trường hợp duy nhất ==nên được sử dụng:

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

Vì không có câu trả lời đúng và đầy đủ, tôi sẽ cố gắng tóm tắt:

Nói chung, biểu thức:

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

không thể được đơn giản hóa, vì variablecó thể không được khai báo nên việc bỏ qua typeof(variable) != "undefined"sẽ dẫn đến ReferenceError. Nhưng, bạn có thể đơn giản hóa biểu thức theo ngữ cảnh :

Nếu variablelà toàn cầu , bạn có thể đơn giản hóa để:

if (window.variable != null)

Nếu nó là cục bộ , có lẽ bạn có thể tránh các tình huống khi biến này không được khai báo và cũng đơn giản hóa thành:

if (variable != null)

Nếu đó là thuộc tính đối tượng , bạn không phải lo lắng về ReferenceError:

if (obj.property != null)

Bạn chỉ có thể kiểm tra xem biến có giá trị hay không. Ý nghĩa,

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

}

Nếu bạn không biết liệu một biến có tồn tại hay không (điều đó có nghĩa là, nếu nó được khai báo), bạn nên kiểm tra với toán tử typeof. ví dụ

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

Tôi đã làm điều này bằng phương pháp này

lưu id trong một số biến

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

sau đó sử dụng nếu có điều kiện

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

Như đã đề cập trong một trong những câu trả lời, bạn có thể gặp may nếu bạn đang nói về một biến có phạm vi toàn cầu. Như bạn có thể biết, các biến mà bạn xác định trên toàn cầu có xu hướng được thêm vào đối tượng windows. Bạn có thể tận dụng thực tế này để giả sử bạn đang truy cập vào một biến có tên là bleh, chỉ cần sử dụng toán tử đảo ngược kép (!!)

!!window['bleh'];

Điều này sẽ trả về sai trong khi bleh chưa được khai báo VÀ gán giá trị.

Đây là một cách khác bằng cách sử dụng phương thức Array gồm () :

[undefined, null].includes(value)

Đây là một ví dụ về một dịp rất hiếm khi được khuyến khích sử dụng ==thay vì ===. Biểu thức somevar == nullsẽ trả về true cho undefinedvà null, nhưng sai cho mọi thứ khác (một lỗi nếu biến không được khai báo).

Sử dụng !=sẽ lật kết quả, như mong đợi.

Các biên tập viên hiện đại sẽ không cảnh báo về việc sử dụng ==hoặc !=vận hành với null, vì điều này hầu như luôn luôn là hành vi mong muốn.

So sánh phổ biến nhất:

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

Hãy tự thử:

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 },
]);

bất cứ điều gì yyy không được xác định hoặc null, nó sẽ trả về đúng

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

Đúng

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

Không

Mở các công cụ dành cho nhà phát triển trong trình duyệt của bạn và chỉ cần thử mã được hiển thị trong hình dưới đây.

Để hiểu, chúng ta hãy phân tích giá trị trả về của Công cụ Javascript khi chuyển đổi không xác định, null và '' (Một chuỗi trống cũng vậy). Bạn có thể trực tiếp kiểm tra tương tự trên bảng điều khiển dành cho nhà phát triển của bạn.

Bạn có thể thấy tất cả đang chuyển đổi thành false, có nghĩa là cả ba đều giả định 'thiếu sự tồn tại' của javascript. Vì vậy, bạn không cần phải kiểm tra rõ ràng cả ba trong mã của bạn như dưới đây.

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

Ngoài ra tôi muốn chỉ ra một điều nữa.

Kết quả của Boolean (0) sẽ là gì?

Tất nhiên là sai. Điều này sẽ tạo ra một lỗi trong mã của bạn khi 0 là giá trị hợp lệ trong kết quả mong đợi của bạn. Vì vậy, hãy chắc chắn rằng bạn kiểm tra điều này khi bạn viết mã.

Tương tự như những gì bạn có, bạn có thể làm một cái gì đó như

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

Kiểm tra nullity ( if (value == null)) hoặc non-nullity ( if (value != null)) ít dài dòng hơn so với kiểm tra trạng thái định nghĩa của một biến.

Hơn nữa, việc kiểm tra if (value)(hoặc if( obj.property)) để đảm bảo sự tồn tại của biến (hoặc thuộc tính đối tượng) của bạn không thành công nếu nó được xác định bằng falsegiá trị boolean . Emptor caveat :)

Cả hai giá trị có thể được phân biệt dễ dàng bằng cách sử dụng toán tử so sánh nghiêm ngặt:

Ví dụ làm việc tại:

http://www.thesstech.com/tryme?filename=nullandund xác định

Mã mẫu:

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.");
    }   
}

Nếu mục đích của câu lệnh if là kiểm tra nullhoặc undefinedgiá trị trước khi gán giá trị cho biến, bạn có thể sử dụng Toán tử kết hợp Nullish , cuối cùng cũng có sẵn trên JavaScript, mặc dù hỗ trợ trình duyệt bị hạn chế. Theo dữ liệu từ caniuse , chỉ có 48,34% trình duyệt được hỗ trợ (tính đến tháng 4 năm 2020).

const a = some_variable ?? '';

Điều này sẽ đảm bảo rằng biến sẽ được gán cho một chuỗi trống (hoặc bất kỳ giá trị mặc định nào khác) nếu some_variablelà nullhoặc undefined.

Toán tử này phù hợp nhất cho trường hợp sử dụng của bạn, vì nó không trả về giá trị mặc định cho các loại giá trị giả khác như 0và ''.

Bạn phải xác định một chức năng của mẫu này:

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

Trong ES5 hoặc ES6 nếu bạn cần kiểm tra nhiều lần bạn sẽ làm:

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

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

Với Ramda, bạn có thể chỉ cần làm R.isNil(yourValue) Lodash và các thư viện trợ giúp khác có cùng chức năng.