JavaScript位置参数实现原理及过程解析

greet函数接受两个参数：firstName和lastName。调用者必须确保firstName是第一个参数，lastName是第二个参数。这里重要的一点是，参数的名称没有任何意义，唯一重要的是参数传递的顺序。

这种熟悉的方法称为位置参数。通常，在你传递一个或两个参数的情况下，这很好，因为它很难弄乱参数的顺序。但是如果你必须调用一个需要6个参数的函数，那就很难记住传递参数的顺序。你不希望传递密码来代替用户名参数。

2. 位置参数问题

位置参数很简单，但是你将面临一些挑战。

(1) 不能跳过中间参数 /

假设你已经更改了greet函数，使其现在需要3个参数：firstName、middleName和lastName。由于许多人没有中间名，因此你希望将MiddleName设为可选参数，仅使用firstName和lastName调用greet函数的唯一方法是此方法。

greet('Aditya', null, 'Agarwal'); 
// Correct 
greet('Aditya', 'Agarwal'); 
// Incorrect 

你不能只提供firstName和lastName。当可选参数的数量增加到5个时，这个问题变得更加明显。现在，你必须提供5个null才能在这些参数之后提供参数。

(2) 将类型添加到位置参数不那么干净

如今，为你的实用程序添加类型变得非常普遍。使用位置参数，你别无选择，只能将类型与函数定义一起内联。这可能会使代码有点模糊，如果我们可以在一个块中声明所有参数的类型定义，那就更好了。

(3) 引起细微的错误

位置参数包装了很多隐性行为，这可能是造成微妙bug的原因。我们来看一个常见的JS技巧问题

const numbers = ['1', '4', '8', '10'];
console.log(numbers.map(parseInt));

// 你可能会认为结果将是：
[1, 4, 8, 10]

// 这是实际的输出：
[ 1, NaN, NaN, 3 ]

惊讶吗"htmlcode">

// 实现 
function myCustomParseInt(objArgs) { 
 return parseInt(objArgs.item, objArgs.radix); 
} 

// 使用 
const num = myCustomParseInt({ item: '100', radix: 10 }); 

myCustomParseInt仅接受一个参数，它是一个对象。这个对象可以有两个键：item 和 radix。让我们使用我们的自定义函数与map。必须有一个中间步骤，将回调收到的args发送到myCustomParseInt。

const numbers = ['1', '4', '8', '10'];

const result = numbers.map((item, index) => myCustomParseInt({ item, index }));

console.log(result); // [ 1, 4, 8, 10 ]

请注意，即使我们将索引传递给myCustomParseInt也不会造成任何问题。那是因为myCustomParseInt只会忽略它。将对象传递给函数的这种模式称为命名参数，它比位置参数更明确。

要更改基数，我们必须显式传递基数键。这意味着如果要解析以2为底的字符串，则必须转到文档并查看参数(基数)的确切名称。如果我们盲目地传递任何其他键，它将无济于事。这对我们来说很棒，因为它避免了意外行为。

(1) 具有解构的命名参数

不久前，JavaScript获得了称为解构的功能，让我们在myCustomParseInt实现中使用它。

// 位置参数 
function myCustomParseInt(item, radix) { 
 return parseInt(item, radix); 
} 

// 命名参数旧的实现 
function myCustomParseInt(objArgs) { 
 return parseInt(objArgs.item, objArgs.radix); 
} 

// 命名参数解构 
function myCustomParseInt({ item, radix }) { 
 return parseInt(item, radix); 
} 

你会注意到，只需添加两个花括号，我们就可以得到命名args的好处，你可以将解构视为执行 const item = objArgs.item;。

如果使用 undefined 调用myCustomParseInt，则JS将引发错误。那是因为不允许 undefined.item。为了避免这种情况，我们可以在解构结束时添加 = {}。这样，当我们传递undefined时，它将执行 {}.item 这是有效的JS。这是最终的实现：

function myCustomParseInt({ item, radix } = {}) { 
 return parseInt(item, radix); 
} 

通过命名参数模式，我们也可以跳过我们不想提供的参数，因为函数不再依赖于传递参数的顺序。

// 对于位置参数，我们必须在之间添加一个null
function greetPos(firstName, middleName, lastName) {}
greetPos('Aditya', null, 'Agarwal');

// 使用命名参数，你只需提供firstName和lastName。
function greetNamed({ firstName, middleName, lastName } = {}) {}
greetNamed({ firstName: 'Aditya', lastName 'Agarwal' });

总而言之，我要说的是命名参数是一种强大的模式，如今它已变得非常普遍，但是你不必总是使用它们。有时你甚至可以将两者结合在一起。浏览器中的fetch API的用法如下：

// 以url作为位置参数的请求，以及以args做命名参数的选项。 
fetch('https://google.com', { 
 method: 'POST', 
 headers: { 
  'Content-Type': 'application/json', 
 }, 
}); 

// basic GET requests with just positional args 
fetch('https://google.com'); 

这里的强制参数(API路径)是一个位置参数，然后通过命名参数接受可选的参数。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。