【基础】前端数据处理

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

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

---

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

---

前言

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

例如：随着前端的不断发展，数据处理对于前端也越来越重要，本文就介绍了前端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: