js获取数组嵌套对象的某一个值

更新日期: 2023-02-03阅读: 1.1k标签: 数组

数组对象嵌套的数组对象查找某一个属性的值,并返回一个新数组。比如多级评论列表,我们需要在页面中显示某个ID的数据


示例如下:

var arr=[
{
id: 1,
text: "hello word!",
child: [
{id: 2,text: "你好呀!",child: []},
{id: 3,text: "感谢评论",child: []},
],
},
{
id: 2,
text: "回来看看,感谢使用fly63前端网",
child: [],
},
];

需要获取:

[
{id: 2, text: '你好呀!', child: []},
{id: 2, text: '回来看看,感谢使用fly63前端网', child: []},
]


方式一:利用reduce方法和递归

function find(data, id) {
const result = data.reduce((re, obj) => {
if(obj.id === id) {
re.push(obj);
} else if(obj.child.length) {
const found = find(obj.child, id);
if(found.length) re.push(found);
}
return re;
}, []);
return result.flat();
}
var results = find(arr,2)


方式二:JSON.stringify方式

function find(data, fn) {
let found = []
JSON.stringify(data, (key, val) => {
if (fn(val))
found.push(val)
return val
})
return found
}
var results = find(arr, x => x.id === 2)

使用该方法更优雅。

JSON.stringify第二参数

它的第二个参数用于过滤、格式化。参数说明:

1、没有或者是null,则所有属性被序列化。
2、为数组,则属性名在该数组内的属性被序列化。
3、为函数,则该函数会遍历属性,return undefined的属性会被忽略。

JSON.stringify第三参数

它的第三个参数用于缩进、美化:

1、没有或者是null,则正常打印。
2、为数字,则代表缩进多少个空格,最大为10,小于1则没有空格。
3、为字符串,则作为缩进使用。


链接: https://www.fly63.com/article/detial/12351

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

JavaScript 数组方法

数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

JS数组的几个经典api

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!