JavaScript の概要: 手書きの非同期加算 asyncAdd メソッド

この記事は、javascript に関する関連知識を提供します。主に JavaScript の手書き非同期加算 asyncAdd メソッドの詳細な説明を紹介します。必要な友人は参考にしてください。見てみましょう。皆さんのお役に立てれば幸いです。 。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

序文

Nuggets でシンプルですが興味深い質問を見つけました。質問は次のとおりです:

// 异步加法
function asyncAdd(a,b,cb){
  setTimeout(() => {
    cb(null, a + b)
  }, Math.random() * 1000)
}
async function total(){
  const res1 = await sum(1,2,3,4,5,6,4)
  const res2 = await sum(1,2,3,4,5,6,4)
  return [res1, res2]
}
total()
// 实现下 sum 函数。注意不能使用加法，在 sum 中借助 asyncAdd 完成加法。尽可能的优化这个方法的时间。
function sum(){
}

それを直接実装して、自分の考え方と JavaScript の基本を調べてみてはいかがでしょうか知識のつながり? 社長、ちょっと寄り道してください!

一見すると、この質問が何についてなのかわからない人がほとんどだと思います (私が言わなければ誰も知りません) が、2 回目に読むと、ほぼ理解できると思います。どのような内容なのか一緒に分析してみましょう！ ！ ！

asyncAdd の分析

最終的な結論は次のとおりです:

• sum 部分の内容のみを変更できます。 sum
• sum には任意の長さのパラメータを受け取ることができます。加算計算は asyncAdd を通じてのみ実現できます。 #sum
, 非同期処理が必要です. ロジック,
• Promise#を使用する必要があります.sum メソッドの計算時間
• 以下は、コードのさまざまな部分の分析であり、取得された関連情報です。
直感的な基本要件

// 实现下 sum 函数。注意不能使用加法，在 sum 中借助 asyncAdd 完成加法。尽可能的优化这个方法的时间。 
function sum(){ }

最も直感的な方法は、上記のテキスト説明部分を介して、質問の具体的な要件を簡単に知ることができます:

sum

sum
• 部分の内容のみを変更できます。Addition () は直接使用できません。加算は、asyncAdd を通じて実行されます。
• 最適化 sum メソッドの計算時間
• 隠れた検査ポイント - setTimeout & cb

  // 异步加法
  function asyncAdd(a, b, cb){
    setTimeout(() => {
      cb(null, a + b)
    }, Math.random() * 1000)
  }

  ログイン後にコピー
上記の内容から、最もわかりやすいもの

と

ですが、実際、setTimeout は asyncAdd で使用されるため、これを理解するのは難しくありません。これは設定のみ可能です。コールバック関数 cb を使用して計算結果が返されるとき、最初のパラメータ null は何を表しますか? 実際には、これはエラー メッセージ オブジェクトと考えることができます。node について詳しく知っていれば、

の非同期処理コールバック関数が通常、最初の最初のパラメータはエラー オブジェクトで、エラーが発生したときに後続の実行ロジックをカスタマイズするために外部に渡すために使用されます。 一文: cb 関数はエラーオブジェクトと計算結果をパラメータとして受け取り、外部に渡します。

隠れた検査ポイント - async & await<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">async function total(){ const res1 = await sum(1,2,3,4,5,6,4) const res2 = await sum(1,2,3,4,5,6,4) return [res1, res2] }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>上記の部分から、

メソッドの戻り値は

Type である必要があります。なぜなら、形式 await sum(...) が明らかに先頭で使用されているからです。 さらに、total 関数全体が ## として定義されているため、

関数の戻り値も promise 型である必要があります。 #async 非同期関数。詳細を表示するには、ここをクリックしてください。 一文: sum は promise

sum は必ず promise## を使用します。 # および sum(1,2,3,4,5,6,4) から、sum は任意の長さのパラメーターを受け取ることができることがわかります。 asyncAdd の実装具体的な実装実装のアイデアは次のとおりです。

asyncAdd

Promise
• の実装、つまり ## としてカプセル化します。 #caculate
関数
• asyncAdd が実際に計算のために一度に受け取れる数値は 2 つだけであることを考慮すると、複数のパラメーターがループの形式で渡されます ループによる非同期操作の処理順序を考慮して、async/await
を使用して正しい実行シーケンスを確保し、
• async 関数の戻り値が sum## を正確に満たすようにします。
#Promise
• 型であるための要件具体的なコードは次のとおりです:

  // 通过 ES6 的剩余运算符（...） 接收外部传入长度不固定的参数
  async function sum(...nums: number[]) {
      // 封装 Promise 
      function caculate(num1: number, num2: number) {
          return new Promise((resolve, reject) => {
              // 调用 asyncAdd 实现加法
              asyncAdd(num1, num2, (err: any, rs: number) => {
                  // 处理错误逻辑
                  if (err) {
                      reject(err);
                      return;
                  }
                  // 向外部传递对应的计算结果
                  resolve(rs);
              });
          })
      }
      let res: any = 0;
      // 通过遍历将参数一个个进行计算
      for (const n of nums) {
          // 为了避免异步执行顺序问题，使用 await 等待执行结果 
          res = await caculate(res, n);
      }
      return res;
  }

  ログイン後にコピー
  Optimize内部関数の抽出

caculate

sum

asyncAdd
• の外層に抽出できます。抽出する必要はありません関数のコールバック関数は、あまりにも多くのパラメーターと外部メソッドに依存しているためです

  function caculate(num1: number, num2: number) {
      return new Promise((resolve, reject) => {
          asyncAdd(num1, num2, (err: any, rs: number) => {
              if (err) {
                  reject(err);
                  return;
              }
              resolve(rs);
          });
      })
  }
  async function sum(...nums: number[]) {
      let res: any = 0;
      for (const n of nums) {
          res = await caculate(res, n);
      }
      return res;
  }

  ログイン後にコピー
  キャッシュ計算結果
実際、
• total を注意深く観察すると、メソッドの sum
は 2 回呼び出され、パラメータはまったく同じです。同じ内容が 2 回目に計算されるとき、結果は非同期に計算されるのではなく、キャッシュから直接フェッチされることを思い出させることが目的です。

以下は単純なキャッシュ ソリューションの単なる実装です。あまり心配しないでください。具体的な実装は次のとおりです:

const cash: any = {};
function isUndefined(target: any) {
    return target === void 0;
}
async function sum(...nums: number[]) {
    let res: any = 0;
    const key = nums.join('+');
    if (!isUndefined(cash[key])) return cash[key];
    for (const n of nums) {
        res = await caculate(res, n);
    }
    cash[key] = res;
    return res;
}
function caculate(num1: number, num2: number) {
    return new Promise((resolve, reject) => {
        asyncAdd(num1, num2, (err: any, rs: number) => {
            if (err) {
                reject(err);
                return;
            }
            resolve(rs);
        });
    })
}

【相关推荐：javascript视频教程、web前端】

以上がJavaScript の概要: 手書きの非同期加算 asyncAdd メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。