动态键的用法
2017-10-22 本文已影响0人
自由落体_4deb
通过document.location
可以将URL解析为不同的片段,比如document.location.search
可以解析出URL中的查询参数,如果查询参数只有一个的话,那这个参数的值很容易得到,但是如果查询参数有很多个的话,上面的方法是没办法知道各个参数的值的。
下面写了一个方法,可以解决上面所说的问题。
function getSearchQuery () {
let str = document.location.search;
let qs = str.length > 0 ? str.substring(1) : "";
let items = qs.length > 0 ? qs.split('&') : [];
let obj = {};
let name = null;
let value = null;
for (let i = 0; i < items.length; i++) {
let val = items[i].split('=');
name = decodeURIComponent(val[0]);
value = decodeURIComponent(val[1]);
obj[name] = value
}
return obj;
}
let s = getSearchQuery();
s['query'];
这里面有个知识点我知道——构建动态的键,把值存在obj对象中,但是用得非常不熟练。而且这个例子中,值也是动态访问的。
对于上面这段代码,我还有个问题,调用函数的时候,只能把函数赋值给一个变量,通过变量访问键,而不能直接通过函数来访问,getSearchQuery(['query'])
,这是什么原因呢?过了一个月之后,再回过头来看,这个问题已经解决了。
上面的这种写法,['query']
表示函数的参数;而在这个例子当中,我们需要的是通过查找对象的属性,来返回属性值。
在我做过的需求当中,还有一个地方也用到了这个知识点。当时要呈现一张表格,但是表格中的数据来自两个接口,而且HTML中只能绑定一个接口的数据,
碰到这样的问题,我最后是如何解决的?
因为这两个接口有一个共同的字段userID,就用userID做关联。假设A接口取到的数据都在data里面,B接口取到的数据都在result里面,这张表里面一共要用到8个数据,其中6个来自data,2个来自result,result中用到的字段是signUpDueTime
和deadLine
,
let obj = {};
obj[result.userID] = result;
把result里面的数据存到result.userID
这个动态的键里面,在HTML中就这样访问:
obj[userID].signUpDueTime
obj[userID].deadLine
动态键就像一座数据库,可以存任何类型的数据。把数据存在动态键中的过程和定义对象的过程刚好是相反的。