1.什么是位置参数"htmlcode">
greet函数接受两个参数:firstName和lastName。调用者必须确保firstName是第一个参数,lastName是第二个参数。这里重要的一点是,参数的名称没有任何意义,唯一重要的是参数传递的顺序。 这种熟悉的方法称为位置参数。通常,在你传递一个或两个参数的情况下,这很好,因为它很难弄乱参数的顺序。但是如果你必须调用一个需要6个参数的函数,那就很难记住传递参数的顺序。你不希望传递密码来代替用户名参数。 2. 位置参数问题 位置参数很简单,但是你将面临一些挑战。 (1) 不能跳过中间参数 / 假设你已经更改了greet函数,使其现在需要3个参数:firstName、middleName和lastName。由于许多人没有中间名,因此你希望将MiddleName设为可选参数,仅使用firstName和lastName调用greet函数的唯一方法是此方法。 你不能只提供firstName和lastName。当可选参数的数量增加到5个时,这个问题变得更加明显。现在,你必须提供5个null才能在这些参数之后提供参数。 (2) 将类型添加到位置参数不那么干净 如今,为你的实用程序添加类型变得非常普遍。使用位置参数,你别无选择,只能将类型与函数定义一起内联。这可能会使代码有点模糊,如果我们可以在一个块中声明所有参数的类型定义,那就更好了。 (3) 引起细微的错误 位置参数包装了很多隐性行为,这可能是造成微妙bug的原因。我们来看一个常见的JS技巧问题 const numbers = ['1', '4', '8', '10']; // 你可能会认为结果将是: // 这是实际的输出: 惊讶吗"htmlcode">
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实现中使用它。 你会注意到,只需添加两个花括号,我们就可以得到命名args的好处,你可以将解构视为执行 const item = objArgs.item;。 如果使用 undefined 调用myCustomParseInt,则JS将引发错误。那是因为不允许 undefined.item。为了避免这种情况,我们可以在解构结束时添加 = {}。这样,当我们传递undefined时,它将执行 {}.item 这是有效的JS。这是最终的实现: 通过命名参数模式,我们也可以跳过我们不想提供的参数,因为函数不再依赖于传递参数的顺序。 // 对于位置参数,我们必须在之间添加一个null // 使用命名参数,你只需提供firstName和lastName。 总而言之,我要说的是命名参数是一种强大的模式,如今它已变得非常普遍,但是你不必总是使用它们。有时你甚至可以将两者结合在一起。浏览器中的fetch API的用法如下: 这里的强制参数(API路径)是一个位置参数,然后通过命名参数接受可选的参数。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
function greet(firstName, lastName) {
console.log(`Hello ${firstName} ${lastName}`);
}
// 预期用法
greet('Michael', 'Scott');
const fName = 'Harry';
const lName = 'Potter';
greet(fName, lName);
// 错误用法
const firstName = 'Erlich';
const lastName = 'Bachman';
greet(lastName, firstName);
greet('Aditya', null, 'Agarwal');
// Correct
greet('Aditya', 'Agarwal');
// Incorrect
console.log(numbers.map(parseInt));
[1, 4, 8, 10]
[ 1, NaN, NaN, 3 ]
// 实现
function myCustomParseInt(objArgs) {
return parseInt(objArgs.item, objArgs.radix);
}
// 使用
const num = myCustomParseInt({ item: '100', radix: 10 });
// 位置参数
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);
}
function myCustomParseInt({ item, radix } = {}) {
return parseInt(item, radix);
}
function greetPos(firstName, middleName, lastName) {}
greetPos('Aditya', null, 'Agarwal');
function greetNamed({ firstName, middleName, lastName } = {}) {}
greetNamed({ firstName: 'Aditya', lastName 'Agarwal' });
// 以url作为位置参数的请求,以及以args做命名参数的选项。
fetch('https://google.com', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
// basic GET requests with just positional args
fetch('https://google.com');
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]