ホームページ > 記事 > ウェブフロントエンド > JSでネイティブマップを実装する方法
JS ネイティブ メソッド マップの実装、コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="author" content="杨欣"> <title>map</title> </head> <body> <script> Array.prototype.my_map = function (callback) { if (!Array.isArray(this) || !this.length || typeof callback !== 'function') { return [] } else { let result = []; for (let index = 0; index < this.length; index++) { const element = this[index]; result.push(callback(element, index, this)) } return result } } let arr = [1, 2, 3, 4, 5] let res = arr.my_map((ele, i) => { return ele + 10 }) console.log(res) </script> </body> </html>
(推奨チュートリアル: js チュートリアル)
補足知識:
通常、マップをカプセル化する方法を使用しますが、マップを自分でカプセル化する場合、どのように実装すればよいでしょうか。
基本原則は変更されておらず、実際、配列の走査の中核は for ループです。したがって、map メソッドは以下にカプセル化されます。
##注※3 callメソッドで渡されるパラメータは、カプセル化されたmapメソッドのパラメータと同じです。
Array.prototype.fakeMap = function(fn,context) { let arr = this; let temp = []; for(let i=0;i<arr.length;i++){ let result = fn.call(context,arr[i],i,arr); temp.push(result); } return temp; }
推奨ビデオ チュートリアル:
JavaScript ビデオ チュートリアル以上がJSでネイティブマップを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。