Cách tốt nhất để xác định xem một đối số không được gửi đến hàm JavaScript

Bây giờ tôi đã thấy 2 phương thức để xác định xem một đối số đã được truyền cho hàm JavaScript chưa. Tôi đang tự hỏi liệu một phương pháp tốt hơn phương pháp kia hay liệu phương pháp này có tệ không?

 function Test(argument1, argument2) {
      if (Test.arguments.length == 1) argument2 = 'blah';

      alert(argument2);
 }

 Test('test');

Hoặc là

 function Test(argument1, argument2) {
      argument2 = argument2 || 'blah';

      alert(argument2);
 }

 Test('test');

Theo như tôi có thể nói, cả hai đều có kết quả giống nhau, nhưng tôi chỉ sử dụng cái đầu tiên trước khi sản xuất.

Một lựa chọn khác như Tom đã đề cập :

function Test(argument1, argument2) {
    if(argument2 === null) {
        argument2 = 'blah';
    }

    alert(argument2);
}

Theo nhận xét của Juan, sẽ tốt hơn nếu thay đổi đề xuất của Tom thành:

function Test(argument1, argument2) {
    if(argument2 === undefined) {
        argument2 = 'blah';
    }

    alert(argument2);
}

Có một số cách khác nhau để kiểm tra xem một đối số có được truyền cho hàm không. Ngoài hai câu hỏi bạn đã đề cập trong câu hỏi (bản gốc) của bạn - kiểm tra arguments.lengthhoặc sử dụng ||toán tử để cung cấp các giá trị mặc định - người ta cũng có thể kiểm tra rõ ràng các đối số undefinedthông qua argument2 === undefinedhoặc typeof argument2 === 'undefined'nếu một trong số đó là hoang tưởng (xem bình luận).

Sử dụng ||toán tử đã trở thành tiêu chuẩn thực hiện - tất cả những đứa trẻ mát mẻ làm điều đó - nhưng hãy cẩn thận: Giá trị mặc định sẽ được kích hoạt nếu đánh giá lại lập luận để false, mà có nghĩa là nó thực sự có thể undefined, null, false, 0, ''(hoặc bất cứ điều gì khác mà Boolean(...)lợi nhuận false).

Vì vậy, câu hỏi là khi nào nên sử dụng kiểm tra nào, vì tất cả chúng đều mang lại kết quả hơi khác nhau.

Kiểm tra arguments.lengththể hiện hành vi 'đúng nhất', nhưng có thể không khả thi nếu có nhiều hơn một đối số tùy chọn.

Thử nghiệm cho undefinedlần tiếp theo là 'tốt nhất' - chỉ 'thất bại' nếu hàm được gọi rõ ràng bằng một undefinedgiá trị, trong mọi trường hợp có thể được xử lý giống như cách bỏ qua đối số.

Việc sử dụng ||toán tử có thể kích hoạt việc sử dụng giá trị mặc định ngay cả khi một đối số hợp lệ được cung cấp. Mặt khác, hành vi của nó thực sự có thể được mong muốn.

Tóm lại: Chỉ sử dụng nó nếu bạn biết bạn đang làm gì!

Theo tôi, sử dụng ||cũng là cách để đi nếu có nhiều hơn một đối số tùy chọn và người ta không muốn truyền một đối tượng theo nghĩa đen như một cách giải quyết cho các tham số được đặt tên.

Một cách hay khác để cung cấp các giá trị mặc định arguments.lengthcó thể sử dụng bằng cách rơi vào nhãn của câu lệnh chuyển đổi:

function test(requiredArg, optionalArg1, optionalArg2, optionalArg3) {
    switch(arguments.length) {
        case 1: optionalArg1 = 'default1';
        case 2: optionalArg2 = 'default2';
        case 3: optionalArg3 = 'default3';
        case 4: break;
        default: throw new Error('illegal argument count')
    }
    // do stuff
}

Điều này có nhược điểm là ý định của lập trình viên không rõ ràng (trực quan) và sử dụng 'số ma thuật'; do đó nó có thể dễ bị lỗi.

Nếu bạn đang sử dụng jQuery, một tùy chọn tốt (đặc biệt đối với các tình huống phức tạp) là sử dụng phương thức mở rộng của jQuery .

function foo(options) {

    default_options = {
        timeout : 1000,
        callback : function(){},
        some_number : 50,
        some_text : "hello world"
    };

    options = $.extend({}, default_options, options);
}

Nếu bạn gọi hàm thì như thế này:

foo({timeout : 500});

Biến tùy chọn sau đó sẽ là:

{
    timeout : 500,
    callback : function(){},
    some_number : 50,
    some_text : "hello world"
};

Đây là một trong số ít trường hợp tôi tìm thấy bài kiểm tra:

if(! argument2) {  

}

hoạt động khá độc đáo và mang hàm ý chính xác về mặt cú pháp.

(Với hạn chế đồng thời rằng tôi sẽ không cho phép giá trị null hợp pháp argument2có ý nghĩa khác; nhưng điều đó thực sự khó hiểu.)

BIÊN TẬP:

Đây là một ví dụ thực sự tốt về sự khác biệt về phong cách giữa các ngôn ngữ được đánh máy lỏng lẻo và đánh máy mạnh; và một tùy chọn phong cách mà javascript dành cho spades.

Sở thích cá nhân của tôi (không có ý chỉ trích dành cho các sở thích khác) là sự tối giản. Mã càng ít phải nói, miễn là tôi nhất quán và súc tích, thì càng ít người khác phải hiểu để suy luận chính xác ý nghĩa của tôi.

Một ý nghĩa của sở thích đó là tôi không muốn - không thấy nó hữu ích - chồng chất một loạt các bài kiểm tra phụ thuộc loại. Thay vào đó, tôi cố gắng làm cho mã có nghĩa là nó trông như thế nào; và chỉ kiểm tra những gì tôi thực sự sẽ cần kiểm tra.

Một trong những tình tiết tăng nặng mà tôi tìm thấy trong mã của một số người khác là cần phải tìm hiểu xem họ có mong đợi hay không, trong bối cảnh lớn hơn, có thực sự gặp phải các trường hợp mà họ đang thử nghiệm hay không. Hoặc nếu họ đang cố gắng kiểm tra mọi thứ có thể, thì có khả năng họ không lường trước được bối cảnh hoàn toàn đủ. Điều đó có nghĩa là tôi cuối cùng cần phải theo dõi chúng một cách triệt để theo cả hai hướng trước khi tôi có thể tự tin tái cấu trúc hoặc sửa đổi bất cứ điều gì. Tôi cho rằng có một cơ hội tốt mà họ có thể đã thực hiện các thử nghiệm khác nhau đó bởi vì họ thấy trước các trường hợp cần thiết (và điều này thường không rõ ràng đối với tôi).

(Tôi cho rằng một nhược điểm nghiêm trọng trong cách những người này sử dụng ngôn ngữ động. Thông thường mọi người không muốn từ bỏ tất cả các bài kiểm tra tĩnh, và cuối cùng giả mạo nó.)

Tôi đã thấy điều này rõ ràng nhất khi so sánh mã ActionScript 3 toàn diện với mã javascript thanh lịch. AS3 có thể gấp 3 hoặc 4 lần số lượng js và độ tin cậy mà tôi nghi ngờ ít nhất là không tốt hơn, chỉ vì số lượng (3-4X) của các quyết định mã hóa đã được đưa ra.

Như bạn nói, Shog9, YMMV. : D

Có sự khác biệt đáng kể. Hãy thiết lập một số trường hợp thử nghiệm:

var unused; // value will be undefined
Test("test1", "some value");
Test("test2");
Test("test3", unused);
Test("test4", null);
Test("test5", 0);
Test("test6", "");

Với phương pháp đầu tiên bạn mô tả, chỉ có thử nghiệm thứ hai sẽ sử dụng giá trị mặc định. Phương pháp thứ hai sẽ mặc định tất cả nhưng người đầu tiên (như JS sẽ chuyển đổi undefined, null, 0, và ""vào boolean false. Và nếu bạn đã sử dụng phương pháp của Tom, chỉ có thử nghiệm thứ tư sẽ sử dụng mặc định!

Phương pháp bạn chọn thực sự phụ thuộc vào hành vi dự định của bạn. Nếu các giá trị khác ngoài mức undefinedcho phép argument2, thì có thể bạn sẽ muốn một số biến thể ở lần đầu tiên; nếu muốn một giá trị khác không, không rỗng, không rỗng, thì phương thức thứ hai là lý tưởng - thực sự, nó thường được sử dụng để nhanh chóng loại bỏ một loạt các giá trị như vậy khỏi xem xét.

url = url === undefined ? location.href : url;

Trong ES6 (ES2015), bạn có thể sử dụng các tham số mặc định

function Test(arg1 = 'Hello', arg2 = 'World!'){
  alert(arg1 + ' ' +arg2);
}

Test('Hello', 'World!'); // Hello World!
Test('Hello'); // Hello World!
Test(); // Hello World!

Tôi xin lỗi, tôi vẫn chưa thể bình luận, vì vậy để trả lời câu trả lời của Tom ... Trong javascript (không xác định! = Null) == false Trên thực tế chức năng đó không hoạt động với "null", bạn nên sử dụng "không xác định"

Tại sao không sử dụng !!toán tử? Toán tử này, được đặt trước biến, biến nó thành boolean (nếu tôi đã hiểu rõ), !!undefinedvà !!null(và thậm chí !!NaN, có thể khá thú vị) sẽ trở lại false.

Đây là một ví dụ:

function foo(bar){
    console.log(!!bar);
}

foo("hey") //=> will log true

foo() //=> will log false

Có thể thuận tiện để tiếp cận phát hiện đối số bằng cách gợi lên chức năng của bạn với Đối tượng thuộc tính tùy chọn:

function foo(options) {
    var config = { // defaults
        list: 'string value',
        of: [a, b, c],
        optional: {x: y},
        objects: function(param){
           // do stuff here
        }
    }; 
    if(options !== undefined){
        for (i in config) {
            if (config.hasOwnProperty(i)){
                if (options[i] !== undefined) { config[i] = options[i]; }
            }
        }
    }
}

Cũng có một cách khó để tìm, cho dù một tham số có được truyền cho hàm hay không . Hãy xem ví dụ dưới đây:

this.setCurrent = function(value) {
  this.current = value || 0;
};

Điều này cần thiết có nghĩa là nếu giá trị của valuekhông có / được thông qua - đặt nó thành 0.

Khá tuyệt nhỉ!

Đôi khi bạn cũng có thể muốn kiểm tra loại, đặc biệt nếu bạn đang sử dụng chức năng như getter và setter. Mã sau đây là ES6 (sẽ không chạy trong EcmaScript 5 trở lên):

class PrivateTest {
    constructor(aNumber) {
        let _aNumber = aNumber;

        //Privileged setter/getter with access to private _number:
        this.aNumber = function(value) {
            if (value !== undefined && (typeof value === typeof _aNumber)) {
                _aNumber = value;
            }
            else {
                return _aNumber;
            }
        }
    }
}

function example(arg) {
  var argumentID = '0'; //1,2,3,4...whatever
  if (argumentID in arguments === false) {
    console.log(`the argument with id ${argumentID} was not passed to the function`);
  }
}

Bởi vì mảng kế thừa từ Object.prototype. Xem xét để làm cho thế giới tốt hơn.

fnCalledFunction (Param1, Param2, window.YourOptionalParameter)

Nếu hàm trên được gọi từ nhiều nơi và bạn chắc chắn 2 tham số đầu tiên được truyền từ mọi nơi nhưng không chắc chắn về tham số thứ 3 thì bạn có thể sử dụng cửa sổ.

window.param3 sẽ xử lý nếu nó không được xác định từ phương thức người gọi.