Có cách nào để cung cấp các tham số được đặt tên trong lệnh gọi hàm trong JavaScript không?

Tôi thấy tính năng tham số được đặt tên trong C # khá hữu ích trong một số trường hợp.

calculateBMI(70, height: 175);

Tôi có thể sử dụng cái gì nếu tôi muốn cái này trong JavaScript?

Điều tôi không muốn là đây:

myFunction({ param1: 70, param2: 175 });

function myFunction(params){
  // Check if params is an object
  // Check if the parameters I need are non-null
  // Blah blah
}

Cách tiếp cận đó tôi đã sử dụng. Có cách nào khác không?

Tôi ổn khi sử dụng bất kỳ thư viện để làm điều này.

ES2015 trở lên

Trong ES2015, phá hủy tham số có thể được sử dụng để mô phỏng các tham số được đặt tên. Nó sẽ yêu cầu người gọi vượt qua một đối tượng, nhưng bạn có thể tránh tất cả các kiểm tra bên trong hàm nếu bạn cũng sử dụng các tham số mặc định:

myFunction({ param1 : 70, param2 : 175});

function myFunction({param1, param2}={}){
  // ...function body...
}

// Or with defaults, 
function myFunc({
  name = 'Default user',
  age = 'N/A'
}={}) {
  // ...function body...
}

ES5

Có một cách để đến gần với những gì bạn muốn, nhưng nó dựa trên đầu ra của Function.prototype.toString ^[ES5] , đó là việc triển khai phụ thuộc ở một mức độ nào đó, vì vậy nó có thể không tương thích với nhiều trình duyệt.

Ý tưởng là phân tích các tên tham số từ biểu diễn chuỗi của hàm để bạn có thể liên kết các thuộc tính của một đối tượng với tham số tương ứng.

Một cuộc gọi chức năng sau đó có thể trông giống như

func(a, b, {someArg: ..., someOtherArg: ...});

trong đó avà blà các đối số vị trí và đối số cuối cùng là một đối tượng với các đối số được đặt tên.

Ví dụ:

var parameterfy = (function() {
    var pattern = /function[^(]*\(([^)]*)\)/;

    return function(func) {
        // fails horribly for parameterless functions ;)
        var args = func.toString().match(pattern)[1].split(/,\s*/);

        return function() {
            var named_params = arguments[arguments.length - 1];
            if (typeof named_params === 'object') {
                var params = [].slice.call(arguments, 0, -1);
                if (params.length < args.length) {
                    for (var i = params.length, l = args.length; i < l; i++) {
                        params.push(named_params[args[i]]);
                    }
                    return func.apply(this, params);
                }
            }
            return func.apply(null, arguments);
        };
    };
}());

Mà bạn sẽ sử dụng như:

var foo = parameterfy(function(a, b, c) {
    console.log('a is ' + a, ' | b is ' + b, ' | c is ' + c);     
});

foo(1, 2, 3); // a is 1  | b is 2  | c is 3
foo(1, {b:2, c:3}); // a is 1  | b is 2  | c is 3
foo(1, {c:3}); // a is 1  | b is undefined  | c is 3
foo({a: 1, c:3}); // a is 1  | b is undefined  | c is 3 

BẢN GIỚI THIỆU

Có một số nhược điểm đối với phương pháp này (bạn đã được cảnh báo!):

• Nếu đối số cuối cùng là một đối tượng, nó được coi là "đối tượng đối số được đặt tên"
• Bạn sẽ luôn nhận được nhiều đối số như bạn đã xác định trong hàm, nhưng một số trong số chúng có thể có giá trị undefined(khác với không có giá trị nào cả). Điều đó có nghĩa là bạn không thể sử dụng arguments.lengthđể kiểm tra có bao nhiêu đối số đã được thông qua.

Thay vì có một hàm tạo trình bao bọc, bạn cũng có thể có một hàm chấp nhận một hàm và các giá trị khác nhau làm đối số, chẳng hạn như

call(func, a, b, {posArg: ... });

hoặc thậm chí mở rộng Function.prototypeđể bạn có thể làm:

foo.execute(a, b, {posArg: ...});

Không - cách tiếp cận đối tượng là câu trả lời của JavaScript cho vấn đề này. Không có vấn đề gì với điều này với điều kiện là chức năng của bạn mong đợi một đối tượng hơn là các thông số riêng biệt.

Vấn đề này đã được một peeve vật nuôi của tôi trong một thời gian. Tôi là một lập trình viên dày dạn kinh nghiệm với nhiều ngôn ngữ. Một trong những ngôn ngữ yêu thích của tôi mà tôi rất vui khi sử dụng là Python. Python hỗ trợ các tham số được đặt tên mà không có bất kỳ mánh khóe nào .... Kể từ khi tôi bắt đầu sử dụng Python (một thời gian trước đây), mọi thứ trở nên dễ dàng hơn. Tôi tin rằng mọi ngôn ngữ nên hỗ trợ các tham số có tên, nhưng thực tế không phải vậy.

Nhiều người nói chỉ cần sử dụng thủ thuật "Truyền đối tượng" để bạn có tên tham số.

/**
 * My Function
 *
 * @param {Object} arg1 Named arguments
 */
function myFunc(arg1) { }

myFunc({ param1 : 70, param2 : 175});

Và nó hoạt động rất tốt, ngoại trừ ..... khi nói đến hầu hết các IDE ngoài kia, rất nhiều nhà phát triển của chúng tôi dựa vào gợi ý loại / đối số trong IDE của chúng tôi. Cá nhân tôi sử dụng PHP Storm (Cùng với các IDE JetBrains khác như PyCharm cho python và AppCode cho Objective C)

Và vấn đề lớn nhất khi sử dụng thủ thuật "Truyền đối tượng" là khi bạn gọi hàm, IDE cung cấp cho bạn một gợi ý loại duy nhất và đó là ... Làm thế nào chúng ta phải biết các tham số và loại nào sẽ đi vào đối tượng arg1?

Vì vậy, ... mẹo "Truyền đối tượng" không hiệu quả với tôi ... Nó thực sự gây ra nhiều đau đầu hơn khi phải xem tài liệu của từng hàm trước khi tôi biết tham số nào mà hàm mong đợi .... Chắc chắn, nó rất tuyệt cho khi bạn đang duy trì mã hiện có, nhưng thật kinh khủng khi viết mã mới.

Chà, đây là kỹ thuật tôi sử dụng .... Bây giờ, có thể có một số vấn đề với nó, và một số nhà phát triển có thể nói với tôi rằng tôi đang làm sai, và tôi có một suy nghĩ cởi mở khi nói về những điều này ... Tôi luôn sẵn sàng xem xét các cách tốt hơn để hoàn thành một nhiệm vụ ... Vì vậy, nếu có vấn đề với kỹ thuật này, thì các bình luận đều được chào đón.

/**
 * My Function
 *
 * @param {string} arg1 Argument 1
 * @param {string} arg2 Argument 2
 */
function myFunc(arg1, arg2) { }

var arg1, arg2;
myFunc(arg1='Param1', arg2='Param2');

Bằng cách này, tôi có cả hai thế giới tốt nhất ... mã mới rất dễ viết vì IDE của tôi cung cấp cho tôi tất cả các gợi ý đối số phù hợp ... Và, trong khi duy trì mã sau này, tôi có thể thấy trong nháy mắt, không chỉ giá trị được truyền cho hàm, nhưng cũng là tên của đối số. Chi phí duy nhất tôi thấy là khai báo tên đối số của bạn dưới dạng các biến cục bộ để tránh gây ô nhiễm không gian tên toàn cầu. Chắc chắn, đó là một chút gõ thêm, nhưng tầm thường so với thời gian cần thiết để tìm kiếm các tài liệu trong khi viết mã mới hoặc duy trì mã hiện có.

Nếu bạn muốn làm rõ từng tham số là gì, thay vì chỉ gọi

someFunction(70, 115);

tại sao không làm như sau

var width = 70, height = 115;
someFunction(width, height);

chắc chắn, đó là một dòng mã bổ sung, nhưng nó chiến thắng về khả năng đọc.

Một cách khác là sử dụng các thuộc tính của một đối tượng phù hợp, ví dụ như vậy:

function plus(a,b) { return a+b; };

Plus = { a: function(x) { return { b: function(y) { return plus(x,y) }}}, 
         b: function(y) { return { a: function(x) { return plus(x,y) }}}};

sum = Plus.a(3).b(5);

Tất nhiên đối với ví dụ này, nó có phần vô nghĩa. Nhưng trong trường hợp hàm trông như

do_something(some_connection_handle, some_context_parameter, some_value)

nó có thể hữu ích hơn Nó cũng có thể được kết hợp với ý tưởng "tham số" để tạo ra một đối tượng như vậy từ một hàm hiện có theo cách chung. Đó là với mỗi tham số, nó sẽ tạo ra một thành viên có thể đánh giá thành phiên bản được đánh giá một phần của hàm.

Ý tưởng này tất nhiên có liên quan đến Schönfinkeling aka Currying.

Có một cách khác. Nếu bạn truyền đối tượng bằng tham chiếu, thuộc tính của đối tượng đó sẽ xuất hiện trong phạm vi cục bộ của hàm. Tôi biết điều này hoạt động với Safari (chưa kiểm tra các trình duyệt khác) và tôi không biết tính năng này có tên hay không, nhưng ví dụ dưới đây minh họa việc sử dụng nó.

Mặc dù trong thực tế tôi không nghĩ rằng điều này mang lại bất kỳ giá trị chức năng nào ngoài kỹ thuật bạn đang sử dụng, nó sẽ sạch hơn một chút về mặt ngữ nghĩa. Và nó vẫn yêu cầu chuyển một tham chiếu đối tượng hoặc một đối tượng theo nghĩa đen.

function sum({ a:a, b:b}) {
    console.log(a+'+'+b);
    if(a==undefined) a=0;
    if(b==undefined) b=0;
    return (a+b);
}

// will work (returns 9 and 3 respectively)
console.log(sum({a:4,b:5}));
console.log(sum({a:3}));

// will not work (returns 0)
console.log(sum(4,5));
console.log(sum(4));

Dùng thử Node-6.4.0 (process.versions.v8 = '5.0.71.60') và Node Chakracore-v7.0.0-pre8 và sau đó là Chrome-52 (V8 = 5.2.361,49), tôi nhận thấy rằng các tham số được đặt tên gần như thực hiện, nhưng trật tự đó vẫn được ưu tiên. Tôi không thể tìm thấy những gì tiêu chuẩn ECMA nói.

>function f(a=1, b=2){ console.log(`a=${a} + b=${b} = ${a+b}`) }

> f()
a=1 + b=2 = 3
> f(a=5)
a=5 + b=2 = 7
> f(a=7, b=10)
a=7 + b=10 = 17

Nhưng yêu cầu đặt hàng !! Đó có phải là hành vi tiêu chuẩn?

> f(b=10)
a=10 + b=2 = 12

Hàm gọi fvới các tham số được đặt tên được truyền làm đối tượng

o = {height: 1, width: 5, ...}

về cơ bản là gọi thành phần của nó f(...g(o))trong đó tôi đang sử dụng cú pháp trải rộng và glà một bản đồ "ràng buộc" kết nối các giá trị đối tượng với các vị trí tham số của chúng.

Bản đồ liên kết chính xác là thành phần còn thiếu, có thể được biểu thị bằng mảng các khóa của nó:

// map 'height' to the first and 'width' to the second param
binding = ['height', 'width']

// take binding and arg object and return aray of args
withNamed = (bnd, o) => bnd.map(param => o[param])

// call f with named args via binding
f(...withNamed(binding, {hight: 1, width: 5}))

Lưu ý ba thành phần tách rời: hàm, đối tượng với các đối số được đặt tên và ràng buộc. Việc tách rời này cho phép rất linh hoạt để sử dụng cấu trúc này, trong đó ràng buộc có thể được tùy chỉnh tùy ý theo định nghĩa của hàm và được mở rộng tùy ý tại thời điểm gọi hàm.

Ví dụ, bạn có thể muốn viết tắt heightvà widthnhư hvà wbên trong định nghĩa của chức năng của bạn, để làm cho nó ngắn hơn và sạch hơn, trong khi bạn vẫn muốn gọi nó với tên đầy đủ cho rõ ràng:

// use short params
f = (h, w) => ...

// modify f to be called with named args
ff = o => f(...withNamed(['height', 'width'], o))

// now call with real more descriptive names
ff({height: 1, width: 5})

Tính linh hoạt này cũng hữu ích hơn cho lập trình chức năng, trong đó các chức năng có thể được chuyển đổi tùy ý với tên param gốc của chúng bị mất.

Đến từ Python này đã làm phiền tôi. Tôi đã viết một trình bao bọc / Proxy đơn giản cho nút sẽ chấp nhận cả các đối tượng từ khóa và vị trí.

https://github.com/vinces1979/node-def/blob/master/README.md

Trái với những gì thường được tin, các tham số được đặt tên có thể được triển khai trong JavaScript trường học cũ (chỉ dành cho tham số boolean) bằng cách sử dụng quy ước mã hóa đơn giản, gọn gàng, như được hiển thị bên dưới.

function f(p1=true, p2=false) {
    ...
}

f(!!"p1"==false, !!"p2"==true); // call f(p1=false, p2=true)

Hãy cẩn thận:

• Thứ tự của các đối số phải được giữ nguyên - nhưng mẫu vẫn hữu ích, vì nó làm rõ ràng đối số thực tế có nghĩa là tham số chính thức nào mà không phải grep cho chữ ký hàm hoặc sử dụng IDE.

• Điều này chỉ hoạt động cho booleans. Tuy nhiên, tôi chắc chắn một mô hình tương tự có thể được phát triển cho các loại khác bằng cách sử dụng ngữ nghĩa cưỡng chế kiểu duy nhất của JavaScript.