【基础】前端数据处理

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

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


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


前言

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

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

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

[
  {
    id: 1, name: 
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值