この記事は、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- 部分の内容のみを変更できます。
asyncAdd を通じて実行されます。 - 最適化
sum メソッドの計算時間 隠れた検査ポイント - setTimeout & cb// 异步加法
function asyncAdd(a, b, cb){
setTimeout(() => {
cb(null, a + b)
}, Math.random() * 1000)
}ログイン後にコピー
setTimeout
と
cb
ですが、実際、setTimeout は asyncAdd で使用されるため、これを理解するのは難しくありません。これは設定のみ可能です。コールバック関数 cb を使用して計算結果が返されるとき、最初のパラメータ null は何を表しますか? node について詳しく知っていれば、
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>上記の部分から、
sum
メソッドの戻り値は
promise
Type である必要があります。なぜなら、形式 await sum(...) が明らかに先頭で使用されているからです。 total 関数全体が ## として定義されているため、
total
関数の戻り値も promise 型である必要があります。 #async 非同期関数。詳細を表示するには、ここをクリックしてください。 一文: sum は promise
型の値を返す必要があります。つまり、
sum は必ず promise## を使用します。 # および sum(1,2,3,4,5,6,4) から、sum は任意の長さのパラメーターを受け取ることができることがわかります。
外部パラメータの長さが固定されていないことを考慮して、次を使用します。すべての送信を受信する残りのオペレーター 入力パラメーター
は、
asyncAdd
の非同期操作を考慮し、それを
Promise- の実装、つまり ## としてカプセル化します。 #caculate
関数 が実際に計算のために一度に受け取れる数値は 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
function
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 回目に計算されるとき、結果は非同期に計算されるのではなく、キャッシュから直接フェッチされることを思い出させることが目的です。
<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>
以下は単純なキャッシュ ソリューションの単なる実装です。あまり心配しないでください。具体的な実装は次のとおりです:
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
