【对象数组】

本文介绍了如何使用JavaScript处理数组对象,包括使用Array.map()和Array.join()将数组对象的属性值拼接成字符串,利用Object.assign()向数组对象追加新属性,以及运用Array.find()查找具有特定属性的对象。这些技巧在处理复杂数据结构时非常实用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

运用 JS 对数组对象处理总结


文章目录

1. 将数组对象某个属性值拼接成字符串

引用的方法:

Array.map():按照原始数组元素顺序依次处理元素,返回一个新数组
        注意:方法不会改变原始数组 不会对空数组进行检测
Array.join():将数组作为字符串返回,元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。
        注意:方法不会改变原始数组

实例代码:

	var sharedUsers = [
		{id: 1, name: 'g'},
		{id: 2, name: 'b'},
		{id: 3, name: 'h'}
	]
	
	// 拼接被分享人名
	var sharedUserNames = sharedUsers.map(function(sharedUser, index){
	         return sharedUser.name
	     }).join(", ")

	// sharedUserNames: 'g, b, h'

Array.map()
Array.join()

2. 向数组对象中对象追加新属性

引用的方法:

Object.assign(target, …sources):用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
        注意:目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。
        注意:不会在那些source对象值为 null 或 undefined 的时候抛出错误。

实例代码:

	//背景: el-table 懒加载回调,向子级数据添加父级数据中的公共属性
	...
	let childrenItems = []
	if (response.items.length > 0) {
	    // 向子记录中添加父记录内容
	    response.items.map((item) => {
	        childrenItems.push(Object.assign({}, item, {
	            'shareUser': tree.shareUser, 
	            'planCount': 1,
	            'sharedAtUtc': tree.sharedAtUtc,
	            'sharedUsers': tree.sharedUsers,
	            'sharedUserNames': tree.sharedUserNames,
	            'comment': tree.comment,
	            'isChildren': true
	        }))
	    })
	}
	resolve(childrenItems)
	...

Object.assign()

3.对象数组中查找特定属性的对象

引用的方法:

Array find():返回数组中第一个(不检查剩余值)通过测试(测试由函数提供)的元素的值,否则返回 undefined
注意:不对空数组执行该函数 不会改变原始数组
语法:array.find(function(currentValue, index, arr), thisValue)
           参数:function(currentValue, index, arr)
                            描述:必需。为数组中的每个元素运行的函数。
                            参数:currentValue 必需。当前元素的值。
                                       index 可选。当前元素的数组索引。
                                       arr 可选。当前元素所属的数组对象
                       thisValue
                            描述:可选。要传递给函数以用作其 “this” 值的值。

实例代码:


	var findObject;
	var findObject = arr.find((item) => { return  findObject.id === item.id })
	

参数 thisValue 实例:
在这里插入图片描述
Array find()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值