JS 根据key查找对象数组中符合的一项 返回对象(递归)

news/2024/7/10 2:34:55 标签: js, vue, 前端

在一个复杂的数组对象数据中(嵌套多层),通过key值返回对应的对象,在网上搜到的,感觉挺好用的,也没有多深入研究,直接拿来用了(捂脸)

1、代码

function parseJson(jsonObj, key, value) {
      // 循环所有键
      let array = []
      for (let v in jsonObj) {
        let element = jsonObj[v]
        // 1.判断是对象或者数组
        if (typeof (element) == 'object') {
          let result =  parseJson(element, key, value)
          if(result) return result
        } else {
          if (v == key) {
            if (element == value) return jsonObj
          }
        }
      }
    }

2、方法使用
举个例子:

let arr = [
	{
		key: 1,
		value: 'a',
		children: null
	},
	{
		key: 2,
		value: 'b',
		children: null
	},
	{
		key: 3,
		value: 'c',
		children: [
			{
				key: 4,
				value: 'c-1',
				children: null
			},
			{
				key: 5,
				value: 'c-2',
				children: null
			},
			{
				key: 6,
				value: 'c-1',
				children: [
					{
						key: 7,
						value: 'c-1-1',
						children: null
					},
					{
						key: 8,
						value: 'c-1-2',
						children: null
					},
				]
			}
		]
	}
]

直接调用传相对应的参数即可:
parseJson(arr,‘key’,6);
在这里插入图片描述在这里插入图片描述


http://www.niftyadmin.cn/n/1770333.html

相关文章

JS 时间戳转标准时间

function timeFilter (time new Date()) {const date new Date(time 8 * 3600 * 1000);return date.toJSON().substr(0, 19).replace(T, ); }方法使用 直接调用方法 timeFilter()不传参,则直接返回当前时间 调用方法并传入时间戳 timeFilter(1606892418855)&a…

JS 获取url地址栏中的参数

废话不多说&#xff0c;直接上代码&#xff0c;常用的几种方法 方法①、 function getQueryVariable(variable){let query window.location.search.substring(1);let vars query.split("&");for (var i0;i<vars.length;i) {var pair vars[i].split("…

JS 简单的一维数组去重

1、先定义一个数组a const a [1, 2, 3, 4, 1, 6, 7, 1, 2, 8];2、数组去重&#xff0c;Set方法得到一个对象b; const b new Set(a);3、使用Array.from() 方法将类数组对象转化为数组c; const c Array.from(b);如下图&#xff1a;

JS 数组对象中过滤重复数组

在一个复杂的数组对象数据中&#xff0c;有时候去过滤掉重复的数组&#xff0c;在网上搜到的&#xff0c;感觉挺好用的&#xff0c;也没有多深入研究&#xff0c;直接拿来用了(捂脸) function deteleObject(obj) {var uniques [];var stringify {};for (var i 0; i < ob…

VueCli2 中Vant定制主题的配置

1、首先安装依赖 npm install -D less3 less-loader5注意这里less和less-loader的版本不能太高&#xff0c;太高会报错 2、在main.js中引入vant的less文件 import vant/lib/index.less;3、创建自定义主题变量文件less 如下比如&#xff0c;resetui.less: red: #07c160; blu…

cli4配置vue.config.js文件时常见的问题

问题一&#xff1a; 执行npm run build的时候 导致以上报错的原因是compression-webpack-plugin这个插件的版本过高&#xff1b; 解决方法是卸载掉高版本安装低版本&#xff0c;执行命令如下&#xff1a; npm uninstall compression-webpack-plugin npm install compression-…

vue 中h5页面自适应的实现

有时候我们为了前端页面可以匹配不同分辨率的屏幕&#xff0c;会使用rem来对页面进行布局&#xff0c;无论基础px值设置得多么好计算&#xff0c;在写rem数值的时候&#xff0c;都需要对设计图原始的px值进行一番换算。 当当当当&#xff0c;来介绍一下两个好朋友&#xff0c;…

vue 路径@

1、是webpack定义的别名&#xff0c;在js中可以使用&#xff0c;如下&#xff1a; import util from /assets/js/util注&#xff1a;import xxxxx是js语法&#xff0c;所以可以使用别名 2、这个是在webpack.base.config.js中配置的&#xff0c;如下&#xff1a; resolve: {e…