ES6 解构预处理

Question

问题

函数参数解构是 ES6 中一个了不起的特性。 假设我们想要一个名为f 的function 接受一个Object，它有一个a 键

function f({ a }) {
    return a;
}

对于未向函数提供参数的情况，我们有默认值以避免Type Error

function f({ a } = {}) {
    return a;
}

这将有助于以下情况

const a = f(); // undefined

虽然会失败

const a = f(null); // TypeError: Cannot match against 'undefined' or 'null'.

你可以看到 Babel 如何将函数转译为 ES5 here。

可能的解决方案

可以通过参数验证和预处理来避免。在Python 中我可以使用装饰器，但是在 JS 中我们没有将它们标准化，所以使用它们还不是一个好主意。 不过，假设我们有一个装饰器checkInputObject，它使用给定的项目列表（或嵌套解构情况下的树）进行必要的检查并提供默认值。 我们可以在没有@ 符号的情况下按以下方式使用它

const f = checkInputObject(['a'])(({ a }) => a);

使用@ 表示法可能看起来像这样

@checkInputObject(['a'])
function f({ a }) {
    return a;
}

我也可以在函数本身中进行所有需要的操作，然后才使用解构，但在这种情况下，我失去了函数参数解构的所有优点（我根本不会使用它）

function f(param) {
    if (!param) {
        return;
    }
    const { a } = param;
    return a;
}

我什至可以实现一些常见的函数，比如checkInputObject，以便在函数内部使用它

const fChecker = checkInputObject(['a']);
function f(param) {
    const { a } = fChecker(param);
    return a;
}

不过，使用附加代码对我来说并不优雅。我希望不存在的实体被分解为undefined。 假设我们有

function f({a: [, c]) {
    return c;
}

在f() 的情况下获得undefined 会很好。

问题

您知道任何优雅且方便的方法可以使 [嵌套] 解构抵抗不存在的嵌套键吗？

我担心的是：似乎这个功能在公共方法中使用是不安全的，我需要在使用它之前自己进行验证。这就是为什么在私有方法中使用之前它似乎没用。

Answer 1

您可以使用 try...catch 并在通用装饰器函数中使用它：

function safe(f) {
   return function (...args) {
       try {
           return f(...args);
       } catch (e) {}; // return undefined
   };
}

function f({ a } = {}) {
    return a;
}

f = safe(f);
console.log(f(null)); // -> undefined
console.log(f( { a:3 } )); // -> 3

Answer 2

在 ES6 中处理这个问题的正确方法是尊重语言和形状 API 处理参数的方式以更好地适应它，而不是相反。

fn(undefined) 中解构参数背后的语义是参数将被替换为默认值，在 fn(null) 的情况下意味着 nully 参数不会被替换为默认值。

如果数据来自外部并且应该被调节/预处理/验证，则应该明确处理，而不是通过解构：

function fn({ foo, bar}) { ... }

fn(processData(data));

或

function fn(data) {
  const { foo, bar } = processData(data);
  ...
}

fn(data);

应该调用processData 的位置完全由开发人员自行决定。

由于提议的 ECMAScript 装饰器只是具有特定签名的辅助函数，因此相同的辅助函数可以用于 @ 语法和通常的函数调用，具体取决于项目。

function processDataDecorator(target, key) {
  const origFn = target[key];
  return target[key] = (...args) => origFn.apply(target, processData(...args));
}

class Foo {
  constructor() {
    this.method = processDataDecorator(this, 'method');
  }

  method(data) {...}
}

class Bar {
  @processDataDecorator
  method(data) {...}
}

自 ES5 以来该语言为默认属性值提供的方式是 Object.assign。 data 是 undefined、null 还是其他原语都没有关系，结果始终是一个对象：

function processData(data) {
  return Object.assign({ foo: ..., bar: ...}, data);
}

Answer 3

我相信我可以通过向您展示一种不同的方式来帮助您解决这个问题。

您面临的问题与解构无关，因为您将在任何向其发送预期的不同类型的函数中遇到它。

解决此类问题，例如。解构，您可以使用类型检查解决方案，例如Flow，它静态检查类型，因此只要您向函数发送错误的内容，它就会在构建时失败。

javascript的本质是它是一种动态类型语言，因此您可能希望该函数能够处理发送给它的任何参数，在这种情况下，您可以使用动态类型检查，解决方案很多。

函数参数更像是你如何使用函数的“协议”，而不是访问它的参数（毕竟你可以使用arguments来访问它们），因此通过发送不同的东西你违反了这个协议，这无论如何都不是一个好习惯，最好有 1 个函数来做 1 件事，并且接受尽可能少的复杂参数。

Answer 4

你不是刚刚回答了你自己提出的问题吗？

我认为默认参数是更优雅的方式。

function f({a: [,c]}={a:[undefined,undefined]}) {
    return c;
}

f();