JS 创建对象字面量时,能否动态决定 Key 是否应该存在

2020-06-02 11:13:10 +08:00
 meteor957

const v = null; const o = { name: v }

在创建字面量时,是否有优雅的语法达到:如果 v 是 null 则 o 没有 name 这个属性 的效果。

注意:是创建时,而不是创建对象后,再做一些判断。

1824 次点击
所在节点    问与答
16 条回复
onfuns
2020-06-02 11:24:03 +08:00
用 eval
Mutoo
2020-06-02 11:24:51 +08:00
字面量的话没办法。但是事后去掉 null/undefined 还是比较简单的。例如用 lodash 的 pickBy
const isNotNull = value=>value!==null;
const o = _.pickBy({ name: v }, isNotNull);
hronro
2020-06-02 11:26:51 +08:00
const o = { ...(v == null ? {} : {name: v}) }
meteor957
2020-06-02 11:29:52 +08:00
@hronro 如果有多个属性,并且判断条件不一致 ....
meteor957
2020-06-02 11:33:43 +08:00
@Mutoo 如果不是所有属性都是判断 null 呢,属性 a 为 null 时不存在,属性 b 为 5 时才存在
noe132
2020-06-02 11:47:17 +08:00
判断方法不一致就老老实实写判断,不管是 if 还是三元
多不了几行代码的

题外一句,这种数据结构不太符合直觉,通常会有更好的处理方式
meteor957
2020-06-02 11:56:07 +08:00
@noe132 常用于 url 的 query 对象,打个比方,排序字段:升序 1 、降序 2,*不传不排序*
optional
2020-06-02 11:59:28 +08:00
在用的时候去掉 null/undefined 是最好的。
另外后端比如 java,很难区分没传还是 null 。
otakustay
2020-06-02 12:07:12 +08:00
用的时候剔除+1,可以用 lodash 的 omitBy 或者 pickBy 实现
你这样子动态的对象结构,对强类型的工具不友好,对运行性能也不友好,实在没有太多必要
robinlovemaggie
2020-06-02 12:13:01 +08:00
axios 的内部 param 处理就是按你这个思路走的,可以去看源码实现
Mutoo
2020-06-02 12:29:00 +08:00
@meteor957 pickBy 的 callback 传入 (value, key) 返回 true 表示保留,false 表示忽略。逻辑自己组装,非常灵活。
Cbdy
2020-06-02 12:41:02 +08:00
Marstin
2020-06-02 14:15:15 +08:00
手写一个_create 来赋值?

Object.prototype_create(d){
return d.removeNull();
}
yaphets666
2020-06-02 14:29:13 +08:00
先判断 v 的值 再创建对象 o
autoxbc
2020-06-03 10:07:57 +08:00
URI.js 是个专门处理 url 对象的工具,其作者在 api 设计上造诣很深,刚好针对楼主这种需求

// remove multiple values with value filter
uri.search("?hello=world&hello=mars&foo=bar&mine=true&a=1&a=2&a=3");
uri.removeSearch({hello: "world", foo: undefined, a: ["1", "3"]});
// uri == "?hello=mars&mine=true&a=2"

这里 removeSearch 方法通过输入一个字面量对象一次性从 URI 对象中移除全部符合条件的参数,也就是楼主所谓的条件置空

这里有详细手册
https://medialize.github.io/URI.js/docs.html
dallaslu
2020-06-03 11:32:22 +08:00
@meteor957 #4

const o = { ...(v ? {name: v} : {}), ...(v2 ? {email:v2} : {}) }

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/677762

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX