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 关键字来指定必需参数。