对象的处理（遍历、加工）

伯延_web

已于 2024-03-05 15:49:43 修改

阅读量337

点赞数 6

文章标签：前端 javascript react

于 2024-02-28 13:52:07 首次发布

本文链接：https://blog.csdn.net/weixin_45121432/article/details/136337816

版权

文章介绍了JavaScript中的四个数组方法：Object.entries()和Object.keys()用于对象键值对操作，reduce()用于累加或聚合数据，map()用于创建新数组，filter()用于筛选符合条件的元素。通过实例展示了如何使用这些方法处理数据转换。

摘要由CSDN通过智能技术生成

例1: Object.entries() & Object.keys()

// 原始数据
const test = {baiyan: 'web'};

// 加工后数据
['baiyan_web']


//代码
const data1 = Object.entries(test || {}).map(([key, value]) => {
    return `${key}_${value}`
})
console.log(data1);
//['baiyan_web']

// 或者
const data2 = Object.keys(test || {}).map((key) => {
    return `${key}_${test[key]}`
})
console.log(data2);
//['baiyan_web']

例2: reduce()

// 原始数据
 const test = [
    {
        "id": "001",
        "name": "小豪",
        "carName": "跃动冲锋"
    },
    {
        "id": "002",
        "name": "小烈",
        "carName": "强棒音速"
    },
];

// 加工后数据
 {小豪: "跃动冲锋", 小烈: "强棒音速"};


// 代码
const data = test.reduce((res, cur) => {
    res[cur.name] = cur.carName;
    return res;
}, {});

console.log(data);
// {小豪: '跃动冲锋', 小烈: '强棒音速'}

例3: map()

// 原始数据
 const test = [
    {
        "id": "001",
        "name": "小豪",
        "carName": "跃动冲锋"
    },
    {
        "id": "002",
        "name": "小烈",
        "carName": "强棒音速"
    },
];

// 加工后数据
const data = ["001","002"];


// 代码
var data = test.map((item) => {
    return item.id;
});

console.log(data);
// ["001","002"]

例4: filter()

这段代码首先定义了原始数据和要过滤的 id 列表。然后使用 filter() 方法遍历原始数据，并通过 includes() 检查每个对象的 id 是否存在于给定的 id 列表中。如果存在，则将该对象包含在过滤后的结果中。最后输出过滤后的数组。

// 原始数据test1和test2
 const test1 = [
    {
        "id": "001",
        "name": "小豪",
        "carName": "跃动冲锋"
    },
    {
        "id": "002",
        "name": "小烈",
        "carName": "强棒音速"
    },
    {
        "id": "003",
        "name": "冲田海",
        "carName": "蜘蛛王"
    },
];

const test2 = ['001', '002'];

// 过滤后数据
const data = [
    {
        "id": "001",
        "name": "小豪",
        "carName": "跃动冲锋"
    },
    {
        "id": "002",
        "name": "小烈",
        "carName": "强棒音速"
    }
];

// 代码
const data = test1.filter(item => test2.includes(item.id));

console.log(data);
// [
    {
        "id": "001",
        "name": "小豪",
        "carName": "跃动冲锋"
    },
    {
        "id": "002",
        "name": "小烈",
        "carName": "强棒音速"
    }
]