2

在 js 中为什么如下方式会找不到值?

 1 year ago
source link: https://www.v2ex.com/t/906438
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

V2EX  ›  JavaScript

在 js 中为什么如下方式会找不到值?

  qq309187341 · 14 小时 35 分钟前 · 2288 次点击
let a = {
b: {
c: {
d: 1
}
}
}

let z = 'c.d'
console.log(a.b[z]) // undefined
为什么?
如何才能正常找到
35 条回复    2023-01-04 20:52:44 +08:00
DingJZ

DingJZ      14 小时 33 分钟前

js 本来就不支持这种玩法,可以用第三方的库,lodash 之类的
qq309187341

qq309187341      14 小时 31 分钟前

@DingJZ 不借用第三方,有什么别的写法,如果 z 只有一层 z='c'这样是能找到 c 的,但是再加一层就找不到了
GressJoe

GressJoe      14 小时 30 分钟前

eval ,不过容易 boom
vagary

vagary      14 小时 27 分钟前   ❤️ 2

哈哈哈哈哈
a={b:{'c.d':1}}; z='c.d'; console.log(a.b[z])能找到
DOLLOR

DOLLOR      14 小时 26 分钟前

要么直接用 lodash ,要么自己参考 lodash 的源码自己实现一个 get 方法。
我倒是好奇有什么编程语言能这样来的?
thinkershare

thinkershare      14 小时 25 分钟前

因为 c.d 是一个合法的属性,JS 的对象本质是个 string|symbol-> any 的字典映射。
chenmobuys

chenmobuys      14 小时 24 分钟前

啥语言能这样写,这估计是第三方库的处理吧
wangtian2020

wangtian2020      14 小时 20 分钟前   ❤️ 1

let a = {
b: {
c: {
d: 1,
},
},
}

let z = 'c.d'
console.log(eval(`a.b.${z}`)) // 1
rongchuan

rongchuan      14 小时 20 分钟前   ❤️ 3

@qq309187341
你声明的'c.d'是一个 string 。a.b[z]是从 a 的 b 属性这个对象上,去找 key 值是 z 的 value ,也就是找 key 值是'c.d'的 value 。显然没有这个 value
这跟第三方库没关系,你没有理解 key 的概念,.不是随便就能.的
lower

lower      14 小时 19 分钟前

a.b['c']['d'] 能找着🤣
qq309187341

qq309187341      14 小时 18 分钟前

@rongchuan 哦。我明白了,c.d 是一个整体,而不是 c 下的 d 。所以合在一起就成了 a.b.'c.d'是这样对吧。哈哈哈哈
qq309187341

qq309187341      14 小时 17 分钟前

@lower 哈哈哈,你这个也行。我理解错了。确实要用你这样的写法才可以
heishu

heishu      13 小时 42 分钟前

#8 和 #10 是两种可行的方法,一个是处理字符串,一个是对象依次找值
pendulum

pendulum      13 小时 39 分钟前

有点想当然了,JS 根本没有这种特性
hervey0424

hervey0424      13 小时 35 分钟前

let a = { 'b.c': 123, b: { c: 456 } };
console.log(a.b.c); // 456
console.log(a['b.c']); //123
enchilada2020

enchilada2020      13 小时 32 分钟前 via Android

我居然看了好久才明白你的代码意图是什么。。。。所以反过来我想问的是 哪个语言能支持你这样的写法取值?
mynameislihua

mynameislihua      13 小时 30 分钟前

lodash get
webcape233

webcape233      13 小时 24 分钟前 via iPhone

什么样的需求这是...
zhouyg

zhouyg      13 小时 18 分钟前

根本原因 js 不知道你传入的 c.d 是一个整体的字符串 key 还是可以分割的访问 key ,这里是有歧义的。支持这个特性也很简单,那就是在语言层面新增一个语法来消除这个歧义
3000codes

3000codes      13 小时 17 分钟前

可以用 Object.defineProperty 劫持它的 key,然后把 c.d 转化一下
caocong

caocong      13 小时 7 分钟前   ❤️ 1

z.split('.').reduce((res, val)=>res[val],a.b)
venfiw

venfiw      12 小时 22 分钟前

let a = {
b: {
c: { d: 1}
}
}

let z = 'c.d';
console.log(a.b[z]) // undefined
console.log(Object.keys(a.b))

你可以通过这个可以看到 a.b 里只有一个键值:'c' 并没有'c.d'
如果你把 c 改为‘c.d' 那么 a.b[z]就可以正常输出
777777

777777      10 小时 41 分钟前

写 go 的,看见这种语法直接震惊
aust

aust      10 小时 31 分钟前

这种写法你要打印的写法等同于
{
"c.d": 1
} 而不是 {
c: {
d: 1
}
}
Arthit

Arthit      9 小时 1 分钟前

console.log(a.b["c"]["d"]);
libook

libook      8 小时 55 分钟前   ❤️ 1

题主提供了一个典型的 bug 案例。因为实际工程上,更多的情况是我们会预期给 z 传入单个字段名,但意外传入路径就 bug 了。所以通常这样用需要小心,如果 z 是用户输入的要做好校验。
weixiangzhe

weixiangzhe      8 小时 20 分钟前

那就是手写个 get
```js
function get(obj, path, def) {
var fullPath = path
.replace(/\[/g, '.')
.replace(/]/g, '')
.split('.')
.filter(Boolean);

return fullPath.every((step)=>{
return !(step && (obj = obj[step]) === undefined);
}) ? obj : def;
}

let a = {
b: {
c: {
d: 1
}
}
}

let z = 'c.d'
// console.log(a.b[z]) // undefined


console.log(get(a,'b.c.d'))


```
chenyu0532

chenyu0532      7 小时 6 分钟前

连续解构赋值吧。
你们玩的是真 high ,学习归学习,工作里我可不敢这么用,怕同事打我
z782297190

z782297190      6 小时 54 分钟前

字符串 . 和 属性访问器 . 是不同的,js 引擎不认字符串 .
enchilada2020

enchilada2020      6 小时 44 分钟前 via Android

@777777 小场面 莫慌莫慌 写 JS 的震惊。。
mwjz

mwjz      6 小时 35 分钟前

let a = {
b: {
c: {
d: 1
}
}
}

let z = 'c.d'

const c = z.split('.').reduce((pre, curr) => pre[curr], a.b);
imingyu

imingyu      6 小时 31 分钟前

为什么?
因为你语法写错了!
为什么语法是 a.b.c.d 而不是 a.b['c.d']?
因为规定!

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK