JS的Map用法

该文章介绍了一个Chrome扩展的实现,它能从网页表格中提取STL查看器的相关信息,包括名称、支持的3D格式和操作系统等,并自动生成链接。扩展使用JavaScript创建了一个新的表格,将原始数据与预定义的STL查看器URL映射结合,使用户可以直接在浏览器中访问各个查看器。
摘要由CSDN通过智能技术生成

https://www.cnblogs.com/jaetyn/p/16406755.html

赋值:const map = new Map([["key1","val1"],["key2","val2"],["key3","val3"]]);

取值:map.get("key1");

实例

Chrome 扩展提取表格数据,重新生成表格,并替换链接。

Free STL Viewers: Best Sites, Software & Apps | All3DP


<html>
<head>
<meta charset="UTF-8">
<title>STL Viewer</title>
<style>
h1 { text-align:center; }
a { text-decoration:none; }
table { border-collapse:collapse; margin:0 auto; }
th, td { border:1px solid black; padding:10px; }
td:nth-child(1) { text-align:center; }
</style>
</head>
<body>
<h1>STL Viewer</h1>
<p align="center"><a href="https://all3dp.com/1/free-stl-viewer-mac-online-stl-file-viewer/" target="_blank">all3dp</a></p>
<table id="table">
<tr><th>ID</th><th>Name</th><th>Additional 3D Formats</th><th>System</th><th>Complexity</th></tr>
</table>
<script>
var table = document.getElementById("table");

const map = new Map([["ViewSTL","http://www.viewstl.com/"],["3DViewerOnline","https://www.3dvieweronline.com/"],["Autodesk Viewer","https://viewer.autodesk.com/"],["Online 3D Viewer","https://3dviewer.net/"],["JSCAD","https://www.openjscad.xyz/"],["Gmsh","http://gmsh.info/"],["Microsoft 3D Viewer","https://apps.microsoft.com/store/detail/3d-viewer/9NBLGGH42THS"],["3D-Tool Free Viewer","http://www.3d-tool.com/en_free-viewer-download.htm"],["	MiniMagics","https://www.materialise.com/en/industrial/software/minimagics"],["ADA 3D","http://www.ada.bg/pages.php?p=products&sp=stlviewer"],["Mac OS X Preview","https://en.wikipedia.org/wiki/Preview_(macOS)"],["Pleasant3D","https://github.com/zaggo/Pleasant3D"],["fstl","https://github.com/fstl-app/fstl"],["STLView","http://www.freestlview.com/"],["Fast STL Viewer","https://play.google.com/store/apps/details?id=com.performance.meshview&hl=de&gl=US"],["STL Simple Viewer","https://apps.apple.com/cn/app/stl-simple-viewer/id1493598400"]]);

var item = new Array();
item.push(["ViewSTL", "OBJ, 3MF", "Browser", "★"]);
item.push(["3DViewerOnline", "STEP, IGES, PLY, OBJ, 2D-DXF, 2D-DWG", "Browser", "★★"]);
item.push(["Autodesk Viewer", "DWG, DWF, RVT, Solidworks, STP, many more", "Browser", "★★"]);
item.push(["Online 3D Viewer", "obj, 3ds, ply, gltf, off, 3dm, fbx, dae, wrl, 3mf, stp, ifc", "Browser", "★"]);
item.push(["JSCAD", "AMF, X3D, JSCAD", "Browser", "★★★"]);
item.push(["Gmsh", "STEP, IGES, BREP", "Windows, Linux, macOS", "★★★"]);
item.push(["Microsoft 3D Viewer", "FBX, OBJ, GLB, GLTF, PLY, 3MF", "Windows", "★"]);
item.push(["3D-Tool Free Viewer", "OBJ, CATIA, X_T, STEP, IGES, VDA, SA, SAB", "Windows", "★★"]);
item.push(["MiniMagics", "MAGICS, MGX, 3MF", "Windows", "★★"]);
item.push(["ADA 3D", "OBJ", "Windows", "★"]);
item.push(["Mac OS X Preview", "OBJ, RAD, DAE", "macOS", "★"]);
item.push(["Pleasant3D", "G-code", "macOS", "★"]);
item.push(["fstl", "None", "Windows, macOS, Linux", "★"]);
item.push(["STLView", "None", "Windows, Android", "★"]);
item.push(["Fast STL Viewer", "None", "Android", "★"]);
item.push(["STL Simple Viewer", "PLY, OFF, OBJ", "iOS", "★"]);

for (var i=0; i<item.length; i++){
    var tr = document.createElement("tr");
        var td = document.createElement("td");
        td.textContent = (i+1);
        tr.append(td);
        for (var j=0; j<item[i].length; j++) {
            var td = document.createElement("td");
            if (j == 0){        
                td.innerHTML = "<a href='" + map.get(item[i][j]) + "' target='_blank'>" + item[i][j] + "</a>";
            } else {
                td.textContent = item[i][j];
            }
            tr.append(td);
            table.append(tr);
        }
}
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值