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

This topic created in 2355 days ago, the information mentioned may be changed or developed.

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

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

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

创建

const

null

字面

16 replies • 2020-06-03 11:32:22 +08:00

onfuns

Jun 2, 2020 via iPhone

用 eval

Mutoo

Jun 2, 2020

字面量的话没办法。但是事后去掉 null/undefined 还是比较简单的。例如用 lodash 的 pickBy
const isNotNull = value=>value!==null;
const o = _.pickBy({ name: v }, isNotNull);

hronro

Jun 2, 2020

const o = { ...(v == null ? {} : {name: v}) }

meteor957

Jun 2, 2020

@hronro 如果有多个属性，并且判断条件不一致 ....

meteor957

Jun 2, 2020

@Mutoo 如果不是所有属性都是判断 null 呢，属性 a 为 null 时不存在，属性 b 为 5 时才存在

noe132

Jun 2, 2020

判断方法不一致就老老实实写判断，不管是 if 还是三元
多不了几行代码的

题外一句，这种数据结构不太符合直觉，通常会有更好的处理方式

meteor957

Jun 2, 2020

@noe132 常用于 url 的 query 对象，打个比方，排序字段：升序 1 、降序 2，*不传不排序*

optional

Jun 2, 2020

在用的时候去掉 null/undefined 是最好的。
另外后端比如 java，很难区分没传还是 null 。

otakustay

Jun 2, 2020

用的时候剔除+1，可以用 lodash 的 omitBy 或者 pickBy 实现
你这样子动态的对象结构，对强类型的工具不友好，对运行性能也不友好，实在没有太多必要

robinlovemaggie

Jun 2, 2020

axios 的内部 param 处理就是按你这个思路走的，可以去看源码实现

Mutoo

Jun 2, 2020

@meteor957 pickBy 的 callback 传入 (value, key) 返回 true 表示保留，false 表示忽略。逻辑自己组装，非常灵活。

Cbdy

Jun 2, 2020 via Android

https://github.com/cbdyzj/lib17/blob/master/code/assign.js

Marstin

Jun 2, 2020

手写一个_create 来赋值？

Object.prototype_create(d){
return d.removeNull();
}

yaphets666

Jun 2, 2020

先判断 v 的值再创建对象 o

autoxbc

Jun 3, 2020

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

Jun 3, 2020

@meteor957 #4

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