JavaScript 遍历对象查找指定的值并返回路径
问:JavaScript 如何查找对象中某个 value 并返回路径上所有的 key?
let obj = {
key1: 'str1',
key2: {
key3: 'str3'
},
key4: {
key5: {
key6: 'str6',
key7: 'str7'
},
key8: 'str8'
},
key9: 'str9'
};
有例如上面这样一个对象,要求封装一个函数,传入对象和某个 value,返回该 value 路径上的 key。比如:searchKeys(obj, "str3"),得到 "key3, key2"。—— 来源于 @zanetti 的一篇 「博问」
我本想在该「博问」下作答,但是「博客园」提示我注册尚且不满 24 小时,不允许我回答「博问」栏目的问题。好吧,我确实是 3 月 16 日晚上刚刚注册的「博客园」账号,既然无法回答那就干脆写第一篇博客。博客的申请在 3 月 17 日早上刚刚审核通过。
言归正传,这题要求遍历对象,而本质其实就是对一个多叉树进行递归。
- 封装函数并遍历对象
第一步是最简单的,不必多说。
function search(object, value) {
for (var key in object) {
// ...
}
}
- 必须先有结果
既然知道这里需要递归,那么最重要一点就是必须找到结果,因为没有最终结果的递归操作肯定会「无法自拔」。此题,当 key 对应的值等于 value 时,递归就将结束,代码如下。
if (object[key] == value) {
return [key];
} else {
}
- 然后思考递归
现在需要分析一下,如果没有找到 value,object[key] 的值有哪些情况?
1、一个不等于 value 字符串;2、一个对象。
如果是一个字符串,那么肯定是不需要任何操作,继续下一次 for ... in 循环即可。如果是一个对象,那么继续对这个对象重复刚刚的遍历操作,此处即递归。
if (typeof(object[key]) == "object") {
var temp = search(object[key], value);
}
继续分析(理论上脑子里面可以假设这是倒数第二步即可)。
假如递归的操作并没有找到 value,那么返回值是什么?我用一个 temp 变量来接收返回值,而没有找到 value 肯定就没有返回值,所以 temp 应该是 undefined。
假如递归的操作找到了 value,那么返回值是什么?对,是 key(这里我为了输出方便,使用了数组存放所有的 key)。既然得到了最后一步的 key,把他与当前的 key 放在一起即可。
if (temp == undefined) {
} else {
return [key, temp].flat();
}
这里我是用了 flat() 方法,这个方法可以抹平一个数组。不管嵌套了多少的数组,都会展开成为一个无嵌套数组。
举个例子:array = ["a", "b", ["c", "d"], ["e", ["f"]]] => array = array.flat() => array = ["a", "b", "c", "d", "e", "f"];
- 最终函数
function search(object, value) {
for (var key in object) {
if (object[key] == value) {
return [key];
} else if (typeof(object[key]) == "object") {
var temp = search(object[key], value);
if (temp == undefined) {
} else {
return [key, temp].flat();
}
} else {
}
}
}
再稍微修改一下。
function search(object, value) {
for (var key in object) {
if (object[key] == value) return [key];
if (typeof(object[key]) == "object") {
var temp = search(object[key], value);
if (temp) return [key, temp].flat();
}
}
}
至此,第一篇博客写完。我接触 JavaScript 的时间不长,也是个新手,好在这题主要是递归算法,如有错误请在评论中指出,不胜感激!
JavaScript 遍历对象查找指定的值并返回路径的更多相关文章
- javaScript遍历对象、数组总结(转载)
javaScript遍历对象.数组总结 转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...
- JS遍历对象的属性和值
对于需要动态获取对象的某些属性和对应的值的时候,就需要遍历对象的属性和值. const user = { name: '张三', age: 20, addr: '湖北武汉', sex: '男' } / ...
- JavaScript 遍历对象、数组总结
在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用! javaScript遍历对象总结 1.使用Objec ...
- JavaScript遍历对象-总结一
原生JavaScript 遍历 1.for 循环遍历 let array1 = ['a','b','c']; for (let i = 0;i < array1.length;i++){ con ...
- javascript遍历对象的属性
不同类型的循环 JavaScript 支持不同类型的循环: for - 多次遍历代码块 for/in - 遍历对象属性 while - 当指定条件为 true 时循环一段代码块 do/while - ...
- javaScript遍历对象、数组总结
javaScript遍历对象总结 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). var obj = {'0':'a ...
- 关于javascript遍历对象
1:遍历对象属性var obj={a:'aa',b:'bb'} for(var i in obj) { alert(i); //输出 a b } var obj={'a':'aa','b':'bb'} ...
- js中遍历对象的属性和值的方法
鉴于循环目标是个对象,length是为undefined,用map等对数组的循环方法不行,对象就用此下方法 for(var key in _this.lists.medicines){ medicin ...
- JavaScript遍历对象4种方法和遍历数组的3种方式 代码
//遍历对象 4种方法 //Object.keys(obj).forEach() console.log("keys...遍历</br>") var obj1 = { ...
随机推荐
- linux 文件权限除了r、w、x外还有s、t、i、a权限说明
linux 文件权限除了r.w.x外还有s.t.i.a权限 s: 文件属主和组设置SUID和GUID,文件在被设置了s权限后将以root身份执行.在设置s权限时文件属主.属组必须先设置相应的x权限,否 ...
- little w and Sum(思维)
链接:https://ac.nowcoder.com/acm/contest/297/B 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...
- Selenium WebDriver原理(二):Selenium是如何操纵浏览器的?
前言 上一篇文章<selenium webdriver 是怎么运行的>用了一个简单的例子--搭出租车,形象地讲解selenium webdriver 是如何运行的,而这一篇文章可以理解为深 ...
- jquery——幻灯片(只动一屏)
制作天天生鲜的幻灯片部分 贴了全部代码: main.html: <!DOCTYPE html> <html lang="en"> <head> ...
- 025 Reverse Nodes in k-Group 每k个一组翻转链表
给出一个链表,一次翻转 k 个指针节点,并返回修改后的链表.k 是一个正整数,并且小于等于链表的长度.如果指针节点的数量不是 k 的整数倍,那么最后剩余的节点应当保持原来的样子.你不应该改变节点的值, ...
- druid监控sql
我这里是以运维的角度查看sql, 前面的配置需要开发配合,参考:https://blog.csdn.net/u010391342/article/details/80606482 1.首先在注册中心( ...
- MongoDB Linux 安装配置 后台运行
介绍安装的文档很多,可以参考这篇: http://www.mkyong.com/mongodb/how-to-install-mongodb-on-mac-os-x/ 安装完后你可能会碰到的2个问题. ...
- js中===、==、!=、!===的区别
结论 ===:先比较两个变量的类型,然后再比较值 !==:上面的值取非 ==:如果变量类型相同,比较值是否相同:类型不同,先转成相同类型,再比较值 !=:上面的值取非 代码 var num = 1; ...
- TemplateBinding与Binding区别,以及WPF自定义控件开发的遭遇
在上一次的文章WPF OnApplyTemplate 不执行 或者执行滞后的疑惑谈到怎么正确的开发自定义控件,我们控件的样式中,属性的绑定一般都是用TemplateBinding来完成,如下一个基本的 ...
- Java 编码规范有感
应小组要求,开发测试都需要考阿里编码规范,因此,相当于是突击了一下关于编码规范方面的知识,目前做的项目后期需要进行项目迁移,数据迁移,功能迁移... 各种迁移... 阿里巴巴编码规范(Java)考试地 ...