2024-08-29 RN基础语法知识之函数的命名参数和位置参数

位置参数:
位置参数按定义顺序传递给函数。

function greet(name, greeting) {
  console.log(`${greeting}, ${name}!`);
}

greet('Alice', 'Hello'); // 输出: Hello, Alice!

命名参数:

JavaScript 没有原生的命名参数支持,但可以通过使用对象来实现类似的效果。

function greet({ name, greeting }) {
  console.log(`${greeting}, ${name}!`);
}

greet({ name: 'Alice', greeting: 'Hello' }); // 输出: Hello, Alice!

命名参数带默认值:

function greet({ name = 'Guest', greeting = 'Hi' } = {}) {
  console.log(`${greeting}, ${name}!`);
}

greet({ name: 'Alice' }); // 输出: Hi, Alice!
greet({}); // 输出: Hi, Guest!

此外 以上位置参数和命名参数(通过对象传递),JavaScript 均不强制类型检查,也没有类型限制,任何类型的数据都可以传递。

使用手动类型检查

function greet({ name, greeting }) {
  if (typeof name !== 'string' || typeof greeting !== 'string') {
    throw new Error('Invalid type: name and greeting should be strings.');
  }
  console.log(`${greeting}, ${name}!`);
}

或者使用ts
TypeScript 是 JavaScript 的超集,增加了类型检查功能。使用 TypeScript,你可以在函数定义时指定参数类型,类似于 Dart。

function greet(name: string, greeting: string): void {
 console.log(`${greeting}, ${name}!`);
}

greet('Alice', 'Hello'); // 正常
// greet(123, 456); // 错误: Argument of type 'number' is not assignable to parameter of type 'string'.

使用 JSDoc:
许你在 JavaScript 中通过注释来指定类型。这不会强制类型检查,但可以提供更好的开发者体验和文档。

/**
 * @param {string} name
 * @param {string} greeting
 */
function greet(name, greeting) {
  console.log(`${greeting}, ${name}!`);
}

下面对fltuter dart语法做一个对比
位置参数:
Dart 中的位置参数与 JavaScript 中的类似,按顺序传递。

void greet(String  name,   String greeting) {
  print('$greeting, $name!');
}

greet('Alice', 'Hello'); // 输出: Hello, Alice!

命名参数:
Dart 明确支持使用大括号 {} 的命名参数。

void greet({required String name, String greeting = 'Hi'}) {
  print('$greeting, $name!');
}

greet(name: 'Alice'); // 输出: Hi, Alice!
greet(name: 'Alice', greeting: 'Hello'); // 输出: Hello, Alice!

React Native (JavaScript): 命名参数通过对象来模拟,位置参数按顺序传递。
Flutter (Dart): 提供了内建的命名参数支持,使用大括号 {} 包围,并可以通过 required 关键字来指定必需参数。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容