格式转换

数据格式转换技巧

最新推荐文章于 2025-09-07 21:17:08 发布

原创最新推荐文章于 2025-09-07 21:17:08 发布 · 置顶 · 460 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数组中的对象进行合并 #前端 #数据格式转换 #数组 #对象遍历

本文详细介绍如何将复杂的数组和对象数据格式转换为所需结构，包括数组的合并与遍历，对象的多种遍历方法，适用于前端开发人员提升数据处理效率。

格式转换

本文旨在将数组、对象中常见的数据格式进行转换为自己所需要的

1.数组

1）.数组合并对象里相同属性值

后台给数据的时候不一定会给出我们所需要的，因此涉及到格式转换，例如下面的形式：

skuList: [
          {
            name: 'test03',
            storeIds: [
              48,
              46,
              47,
            ],
            paySkuDetailVOs: [
              {
                feeType: 1,
                classType: 2,
                periodType: 120,
                price: 48791,
              },
              {
                feeType: 1,
                classType: 2,
                periodType: 130,
                price: 48791,
              },
              {
                feeType: 23,
                classType: 43,
                periodType: 140,
                price: 46545,
              },
              {
                feeType: 23,
                classType: 43,
                periodType: 150,
                price: 46545,
              },
              {
                feeType: 23,
                classType: 564,
                periodType: 160,
                price: 4514,
              },
              {
                feeType: 1,
                classType: 2,
                periodType: 2,
                price: 48791,
              },
              {
                feeType: 1,
                classType: 2,
                periodType: 170,
                price: 48791,
              },
              {
                feeType: 23,
                classType: 43,
                periodType: 180,
                price: 46545,
              },
              {
                feeType: 23,
                classType: 43,
                periodType: 190,
                price: 46545,
              },
              {
                feeType: 23,
                classType: 564,
                periodType: 200,
                price: 4514,
              },
              {
                feeType: 1,
                classType: 2,
                periodType: 210,
                price: 48791,
              },
              {
                feeType: 1,
                classType: 2,
                periodType: 220,
                price: 48791,
              },
              {
                feeType: 23,
                classType: 43,
                periodType: 230,
                price: 46545,
              },
              {
                feeType: 23,
                classType: 43,
                periodType: 240,
                price: 46545,
              },
              {
                feeType: 23,
                classType: 564,
                periodType: 250,
                price: 4514,
              },
            ],
          },
          {
            name: 'test012',
            storeIds: [
              48,
              46,
              47,
            ],
            paySkuDetailVOs: [
              {
                feeType: 1,
                classType: 2,
                periodType: 120,
                price: 15611,
              },
              {
                feeType: 2,
                classType: 23,
                periodType: 130,
                price: 4854,
              },
              {
                feeType: 1,
                classType: 2,
                periodType: 140,
                price: 'sad',
              },
              {
                feeType: 2,
                classType: 23,
                periodType: 150,
                price: 4854,
              },
              {
                feeType: 1,
                classType: 2,
                periodType: 160,
                price: 15611,
              },
              {
                feeType: 2,
                classType: 23,
                periodType: 170,
                price: 4854,
              },
            ],
          },
        ],

而需要的数据结构为：

[
	{
		classType: 2
		feeType: 1
		listInfo: [
  			{
					periodType: 120
					price: 48791
  			},
  			{
					periodType: 120
					price: 48791
  			},
 			{
					periodType: 120
					price: 48791
  			},
  			{
					periodType: 120
					price: 48791
  			},
  			{
					periodType: 120
					price: 48791
  			},
			]
	}
]

将storeIds和name放入数组中很简单

this.skuList.forEach((sku) => {
        sku.paySkuDetailVOs.forEach((item) => {
          item.name = sku.name;
          item.storeIds = sku.storeIds;
        });
      });

将多个对象中的paySkuDetailVOs属性（属性值为数组）合并为一个数组【{}，{}，{}…】

const newData = [];
      this.skuList.forEach((sku) => {
        sku.paySkuDetailVOs.forEach((item) => {
          newData.push(item);
        });
      });

接下来将数组中的对象中的相同的属性值进行合并

const listArr = [];
      newData.forEach((el) => {
        for (let i = 0; i < listArr.length; i += 1) {
          if (listArr[i].feeType === el.feeType && listArr[i].classType === el.classType &&
            listArr[i].name === el.name) {
            listArr[i].listInfo.push({
              periodType: el.periodType,
              price: el.price,
            });
            return;
          }
        }
        listArr.push({
          feeType: el.feeType,
          classType: el.classType,
          name: el.name,
          storeIds: el.storeIds,
          listInfo: [{
            periodType: el.periodType,
            price: el.price,
          }],
        });
      });
      console.log(listArr);

ok成功

2)foreach遍历数组

var arr=[1,2,3,4];

arr.forEach(function(val, index) {

console.log(val, index);
});

3) for…in遍历

var arr=["张三","李四","王五","赵六"];

for (var i in arr){

console.log(i,":",arr[i]);

}

5) for…of遍历

不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象.
也支持字符串遍历，它将字符串视为一系列的Unicode字符来进行遍历

var arr=["张三","李四","王五","赵六"];

for (var value of arr){

    console.log(value);

}

2. 对象

1) object.keys遍历

返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

var obj = {'0':'a','1':'b','2':'c'};

Object.keys(obj).forEach(function(key){

     console.log(key,obj[key]);

});

2). for…in 遍历

 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).
 var obj = {'0':'a','1':'b','2':'c'};

for(var i in obj) {

     console.log(i,":",obj[i]);

}

3).使用Object.getOwnPropertyNames(obj)遍历

返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).
var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key,obj[key]);
});

4).使用Reflect.ownKeys(obj)遍历

返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.
var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){
console.log(key,obj[key]);
});