如何以编程方式在 javascript 对象中运行函数？

Question

我正在尝试使用 Dexie 创建一个用户查询，用户可以自己查询数据库，但我无法让它工作。

<!-- html -->

<div class="window" style="padding-top: 1.5rem;">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-grid.min.css">
 <div class="window-content">
   <div class="pane-group">
       <div class="pane" style="padding:4rem;padding-top: 0 ">
           <h3 class="text-center"><u><span class="icon icon icon-code icon-text" style="color:#4e5851;padding-right:1rem "></span>Advanced Queries</u></h3>
           <table class="table-striped mb-2">
               <thead>
               <tr>
                   <th colspan="3"><input class="form-control" type="" name="query" id="query"></th>
                   <th style="width:4rem"><button class="btn btn-default" id="run">
                       <span class="icon icon-search"></span>
                   </button></th>
               </tr>
           </thead>
           </table>
           <div class ="row" style="display: flex" id='display_body'>

           </div>
       </div>
   </div>
</div>
</div>

//script

document.querySelector('#run').addEventListener("click", function(){
const { init_data} = require('../res/reusable');
var db = init_data(Dexie);
let torun = document.querySelector('#query').value; 
let mangoArray=torun.split('.')
//console.log('mangoArray');
if (mangoArray.length== '1') {
    db[mangoArray[0]].each(item=>{
        console.log(item);
});

}else if(mangoArray.length== '2'){
db[mangoArray[0]][mongoArray[1]].each(item=>{
console.log(item);
});
}
});

当我在输入中输入devices （dexie 数据库中的一个表它可以工作） 完全应该运行db.devices.each

但是我不能让函数在 dexie 类中工作。所以当我 输入devices.orderBy('name')我得到未定义的错误

//error
Uncaught TypeError: Cannot read property 'each' of undefined

我如何做到这一点？

Answer 1

首先，你尝试做的事情是相当危险的；使用户能够从应用程序的前端对数据库执行任意查询。我建议谨慎。

其次-错误说明了一切-您不能在undefined上调用方法each()。那么undefined 是什么？看，当你的查询看起来像这样：devices.orderBy('name')，代码执行如下：

let mangoArray=torun.split('.') // ["devices", "orderBy('name')"]
...
}else if(mangoArray.length== '2'){
db[mangoArray[0]][mongoArray[1]]
// ^ now pay attention: db["devices"]["orderBy('name')"]
.each(item=>{
  console.log(item);
});

所以，虽然db 对象有一个属性字段devices，但它肯定没有orderBy('name')。如果要调用这个对象的方法，有几种处理方法。最简单（但最危险的）是跳过拆分并使用eval 处理此问题：

const query = eval(`db.${torun}`)
query.each(...)

但这允许用户对您的数据做任何他想做的事情 - 删除、修改、损坏等。 更安全的方法是对输入使用一些相当复杂的正则表达式验证。

最安全且最受建议的方法是实际开发一个用户友好的界面，让用户可以完全控制访问您的数据。制作一些表格，让用户选择他想要获取的数据、如何排序、过滤它们，然后通过服务器发送这些数据并返回适当的响应。这称为“隐藏实现”——您的应用用户不需要知道您使用的是哪个数据库，更不用说这个数据库的 API！

希望这会有所帮助。