【JavaScript】 Objectの配列から一部の要素(key&value)を抽出・取り出す方法 | mapメソッドとforEachメソッド

// Object-Array から 一部の key & value のみを抽出した、Object-Array を新規作成する方法

const projectList = [
    { value: 'ロボ玉試作1号機', group_name: 'ロボ玉組', from: 'グンマー帝国', like: 'ひまたね', age: 1 },
    { value: '白桃', group_name: null, from: 'グンマー帝国', like: 'ひまたね', age: 1  },
    { value: 'ロボ玉試作2号機', group_name: 'ロボ玉組', from: 'グンマー帝国', like: 'ひまたね', age: 1  },
    { value: 'ももちゃん', group_name: 'ロボ玉組', from: 'グンマー帝国', like: 'ひまたね', age: 1  },
    { value: 'ロボ玉試作3号機', group_name: null, from: 'グンマー帝国', like: 'ひまたね', age: 1  },
];

// map で新しい配列を作成する！

// 1. 抽出する key & value の数が少ないのなら、これでいい！
const extractList = projectList.map(project => ({ value: project.value, from: project.from }));

console.log({extractList});
// < 出力結果 >
// extractList: Array(5)
    // 0: {value: 'ロボ玉試作1号機', from: 'グンマー帝国'}
    // 1: {value: '白桃', from: 'グンマー帝国'}
    // 2: {value: 'ロボ玉試作2号機', from: 'グンマー帝国'}
    // 3: {value: 'ももちゃん', from: 'グンマー帝国'}
    // 4: {value: 'ロボ玉試作3号機', from: 'グンマー帝国'}
    // length: 5


// 2. 抽出する key & value の数が多い場合、別で Target-Key-Array を作成する Ver. forEach

const extractKeyList = ['value', 'group_name', 'from'];

const extractList2 = [];
projectList.forEach(project => {
    let proj = {}; // Init

    extractKeyList.forEach(key => {
        const targetVal = project[key];
        proj[key] = targetVal;
    });
    extractList2.push(proj);
});

console.log({extractList2});
// < 出力結果 >
// extractList2: Array(5)
    // 0: {value: 'ロボ玉試作1号機', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 1: {value: '白桃', group_name: null, from: 'グンマー帝国'}
    // 2: {value: 'ロボ玉試作2号機', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 3: {value: 'ももちゃん', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 4: {value: 'ロボ玉試作3号機', group_name: null, from: 'グンマー帝国'}
    // length: 5


// 3. 抽出する key & value の数が多い場合、別で Target-Key-Array を作成する Ver. map

const extractKeyArray = ['value', 'group_name', 'from', 'age'];

const extractList3 = projectList.map(project => {
    let proj = {}; // Init

    extractKeyList.forEach(key => {
        const targetVal = project[key];
        proj[key] = targetVal;
    });
    return proj;
});

console.log({extractList3});
// < 出力結果 >
// extractList3: Array(5)
    // 0: {value: 'ロボ玉試作1号機', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 1: {value: '白桃', group_name: null, from: 'グンマー帝国'}
    // 2: {value: 'ロボ玉試作2号機', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 3: {value: 'ももちゃん', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 4: {value: 'ロボ玉試作3号機', group_name: null, from: 'グンマー帝国'}
    // length: 5