【基础】前端数据处理

前端数据处理系列文章目录🐲

提示：日常笔记，主要记录一些常用的数据处理方式，与人方便与己方便
例如：前端常用的数据处理方法

---

提示：如果你也有更好的处理方式，也可以在文章后面留言

---

前言

提示：本文章主要记录前端常用的数据处理方式：

例如：随着前端的不断发展，数据处理对于前端也越来越重要，本文就介绍了前端JS的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、数据处理

1.只筛选出数组中的某一个属性，形成新的数据

代码如下（示例）：
在JavaScript中，你可以使用数组的map()方法来处理一个数组中的元素，并将它们放入一个新的集合中。下面是一个示例代码：

// 原始数组
const originalArray = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Alice' },
  { id: 3, name: 'Bob' }
];

// 用map()方法提取id并放入新集合
const idCollection = originalArray.map(item => item.id);

// 输出新集合
console.log(idCollection); // [1, 2, 3]

上述代码中，我们定义了一个名为originalArray的原始数组，其中包含了一些对象，每个对象都有一个id属性。然后，我们使用map()方法遍历原始数组的每个元素，并返回一个新的集合，其中只包含每个元素的id属性。最后，我们将新集合打印到控制台上。

运行上述代码，你会得到以下输出：

[1, 2, 3]

2.如何保留数组中两个及以上的属性

// 原始数组
const originalArray = [
  { id: 1, name: 'John', age: 18 },
  { id: 2, name: 'Alice', age: 19 },
  { id: 3, name: 'Bob', age: 20 }
];

// 使用map()方法提取id和name，并放入新集合
const idNameCollection = originalArray.map(item => {
  return {
    id: item.id,
    name: item.name
  };
});

// 输出新集合
console.log(idNameCollection);

运行上述代码，你会得到以下输出，这就是将原始数组中的id和name属性提取出来并放入新集合的结果。你可以根据需要调整代码，适应不同的数据结构和要求。

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Alice' },
  { id: 3, name: 'Bob' }
]

3.将数组转化为字符串

// 原始数据
const arr = [2, 4, 6, 8, 10];
// 使用JavaScript中的join()方法将数组转换为字符串
const str = arr.join(', ');
// 输出处理后的数据
console.log(str); // 输出: "2, 4, 6, 8, 10"

4.判断该数据中某个值是否存在

示例：下面是判断给定数组中是否存在名为 "Bob" 的数据的示例代码
如果存在至少一个元素满足条件，some()方法将返回 true，否则返回 false。

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Alice' },
  { id: 3, name: 'Bob' }
];

const hasBob = data.some(item => item.name === 'Bob');

console.log(hasBob); // 输出: true

5.使用Object.keys()返回一个新的数组，这个对象包含该对象中所有的key

// 原始数据
const a = { a: 1, b: 2, c: 3 };
// 把key先搞出来
const list = Object.keys(a) // ['a', 'b', 'c']
// 返回一个新的数组
// 方式1
const result = list.map(key => ({ name: key }));
// 方式2
const result = list.map(key => return {name:key})

console.log(result); // 输出: [ {name:'a'},{name:'b'},{name:'c'}]

6.使用Object.values() 返回一个数组，这个数组包含obj对象中的所有value

const obj = { a: 1, b: 2, c: 3 };

const values = Object.values(obj);

console.log(values); // 输出: [1, 2, 3]

7.将对象 obj 的键和值分别归类在一起

const obj = { a: 1, b: 2, c: 3 };

const keys = [];
const values = [];

for (let key in obj) {
  keys.push(key);
  values.push(obj[key]);
}

console.log(keys);   // 输出: ['a', 'b', 'c']
console.log(values); // 输出: [1, 2, 3]

8.使用 filter() 方法从数组中过滤出符合条件的元素

const array = [1, 2, 3, 4, 5];

const filteredArray = array.filter((element) => {
  return element >= 2;
});

console.log(filteredArray); // 输出: [2, 3, 4, 5]

在回调函数中，我们使用条件 element >= 2 来判断元素是否大于等于 2。如果条件成立，则返回 true，该元素将被保留在过滤后的数组中；如果条件不成立，则返回 false，该元素将被过滤掉。

9.使用indexOf()方法从数组中查询符合条件的元素

const array = [1, 2, 3, 4, 5];

const index = array.indexOf(3);

console.log(index); // 输出: 2

indexOf()方法接收一个参数，表示要查询的元素。如果数组中存在该元素，则返回该元素的索引；如果数组中不存在该元素，则返回 -1。在示例中，我们使用array.indexOf(3)查询值为 3 的元素，并将结果存储在变量 index 中。由于值为 3 的元素位于数组索引 2 处（数组索引从 0 开始），所以最后打印输出的 index 值为 2。

9.使用concat()拼接多个数组

const r = [1, 10, 5, 8, 3];
const r1 = [2, 4, 6];
const r2 = [2, 0, 6];

const concatenatedArray = r.concat(r1, r2);
// 如果是4个，为const concatenatedArray = r.concat(r1, r2, r3);
console.log(concatenatedArray); // 输出: [1, 10, 5, 8, 3, 2, 4, 6, 2, 0, 6]

concat() 方法可以接收多个参数，每个参数都是要拼接的数组。在示例中，我们使用 r.concat(r1, r2) 将数组 r、r1 和 r2 进行拼接，并将结果存储在 concatenatedArray 变量中。
最后，我们通过打印输出 concatenatedArray 数组，可以看到拼接后的结果，即包含所有数组元素的新数组。
使用 concat() 方法可以方便地拼接多个数组，无需修改原始数组，而是返回一个新的拼接后的数组。你可以根据需要传入任意数量的数组作为参数来进行拼接。

10.将数据中的字段为null的全部改为""

在开发过程中，遇到了后端返回的字段，返回结果是null，在编辑的时候，直接将该结果传递给后端，变成了{}，直接接口报错，原因暂不清楚。于是需要在前端，将结果是null的，处理成空字符串，再传递给后端。

// 假设你已经获取到了后端返回的数据，存储在response变量中
const response = {
  data: [
    {
      field1: "value1",
      field2: null,
      field3: "value3",
      field4: null
    },
    {
      field1: "value4",
      field2: null,
      field3: null,
      field4: "value5"
    }
  ]
};

// 将null值转换为空字符串
const processedData = response.data.map(item => {
  const processedItem = {};
  for (const key in item) {
    processedItem[key] = item[key] === null ? '' : item[key];
  }
  return processedItem;
});

// 将处理后的数据传递给后端
// 使用Axios或其他HTTP库发送POST请求，并将数据转换为JSON字符串进行传递
axios.post('/api/endpoint', JSON.stringify(processedData))
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    // 处理错误
  });

在上述示例中，我们使用了map方法遍历每个数据项，并使用一个循环将null值转换为空字符串。然后，我们将处理后的数据传递给后端，使用Axios库发送POST请求，并将数据转换为JSON字符串进行传递。

11、通过id去除重复的数据

const data = [  
    {  
        inspectTowerList: [],  
        operatorGuid: "3F02764384B14ABA9B3BDA0F45BDD800",  
        operatorName: "唐林超",  
        typeName: "班组成员"  
    },  
    {  
        inspectTowerList: [],  
        operatorGuid: "BCA5F0CAEBD946CD84AAA2FBC94D9F2E",  
        operatorName: "陈司阳",  
        typeName: "班组成员"  
    },  
    {  
        inspectTowerList: [],  
        operatorGuid: "BCA5F0CAEBD946CD84AAA2FBC94D9F2E",  
        operatorName: "陈司阳",  
        typeName: "负责人"  
    }  
];  
  
const uniqueData = data.reduce((accumulator, currentValue) => {  
    // 检查当前的operatorGuid是否已经在accumulator中  
    const existingItem = accumulator.find(item => item.operatorGuid === currentValue.operatorGuid);  
      
    // 如果已经存在，则不添加，否则添加当前项  
    if (!existingItem) {  
        accumulator.push(currentValue);  
    } else {  
        // 如果存在，则替换为当前项（即保留最后一个遇到的项）  
        const index = accumulator.indexOf(existingItem);  
        accumulator[index] = currentValue;  
    }  
      
    return accumulator;  
}, []); // 初始化为空数组  
  
console.log(uniqueData);

---

总结

提示：这里对文章进行总结：

如果你有更好的处理方式，可以在评论区留言。