處理集合_對映陣列_5
阿新 • • 發佈：2020-12-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>提取weapon陣列的粗略方法</title> <script src="../unitl/test.js"></script> <style> #results li.pass {color:green;} #results li.fail {color:red;} </style> </head> <body> <ul id="results"></ul> </body> <script> const ninjas = [ {name:"Yagyu",weapon:"shuriken"}, {name:"Yoshi",weapon:"katana"}, {name:"Kuma",weapon:"wakizashi"} ]; const weapons = []; ninjas.forEach(ninja =>{ weapons.push(ninja.weapon); }); assert(weapons[0] === "shuriken" && weapons[1] === "katana" && weapons[2] === "wakizashi" && weapons.length === 3,"The new Array contains all weapons" ); </script> </html>
首先建立一個空陣列，使用forEach方法遍歷ninjas陣列。然後，將每個ninja物件的weapon屬性新增到weapons陣列中。可以想象，基於已有陣列的元素建立陣列是非常常見的，
因此它具有一個特殊的名稱：對映陣列。主要思想是將陣列中的每個元素屬性對映到新陣列的元素上。javascript的map函式可以實現便捷操作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>對映陣列</title> <script src="../unitl/test.js"></script> <style> #results li.pass {color:green;} #results li.fail {color:red;} </style> </head> <body> <ul id="results"></ul> </body> <script> const ninjas = [ {name:"Yagyu",weapon:"shuriken"}, {name:"Yoshi",weapon:"katana"}, {name:"Kuma",weapon:"wakizashi"} ]; const weapons = ninjas.map(ninja=>ninja.weapon); assert(weapons[0] === "shuriken" && weapons[1] === "katana" && weapons[2] === "wakizashi" && weapons.length ===3, "The new Array contains all weapons!" ); </script> </html>
本例子中引入的js： test.js
內建的map方法建立了一個全新的陣列，然後遍歷輸入的陣列。對輸入陣列的每個元素，在新建的陣列上，都會基於回掉函式的執行結果建立一個對應的元素。