最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - TypeScript array.map() with dynamic keys - Stack Overflow

programmeradmin1浏览0评论

I have an array of Foo called fooArray, but I would like to map() the array to only contain the “key: value” pairs which are defined in arrayOfKeys.

class Foo {
  id: number;
  name: string;
  age: number;

  constructor(id: number, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age;
  }
}

let fooArray: Foo[] = [
  new Foo(1, 'Foo', 20), 
  new Foo(2, 'Bar', 21),
  new Foo(3, 'MyFoo', 20)
  ];


//The keys I would like to select from Foo.
const arrayOfKeys: (keyof Foo)[] = ['name', 'age'];  

I do not know what to do to get the desired result below:

// The result is a copy of 'fooArray', but the objects only 
// contain the keys (and their values) defined in 'arrayOfKeys'.
[
   { name: 'Foo', age: 20 },
   { name: 'Bar', age: 21 },
   { name: 'MyFoo', age: 20 }
]

I have an array of Foo called fooArray, but I would like to map() the array to only contain the “key: value” pairs which are defined in arrayOfKeys.

class Foo {
  id: number;
  name: string;
  age: number;

  constructor(id: number, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age;
  }
}

let fooArray: Foo[] = [
  new Foo(1, 'Foo', 20), 
  new Foo(2, 'Bar', 21),
  new Foo(3, 'MyFoo', 20)
  ];


//The keys I would like to select from Foo.
const arrayOfKeys: (keyof Foo)[] = ['name', 'age'];  

I do not know what to do to get the desired result below:

// The result is a copy of 'fooArray', but the objects only 
// contain the keys (and their values) defined in 'arrayOfKeys'.
[
   { name: 'Foo', age: 20 },
   { name: 'Bar', age: 21 },
   { name: 'MyFoo', age: 20 }
]
Share Improve this question edited Aug 13, 2021 at 8:19 robalem asked Aug 13, 2021 at 8:14 robalemrobalem 1693 silver badges19 bronze badges 1
  • 1 You probably want array.filter not array.map? – zerkms Commented Aug 13, 2021 at 8:16
Add a ment  | 

5 Answers 5

Reset to default 4

You can probably do this by creating a new object in the map and returning it?

Something like

const fooArrayWithLimitedKeys = fooArray.map(item => arrayOfKeys.reduce(
  (accumulator, key) => {
    accumulator[key] = item[key]
    return accumulator
  }, {})
)

it can also be written without reduce like follows:

const fooArrayWithLimitedKeys = fooArray.map(item => {
  const returnValue = {}
  arrayOfKeys.forEach(key => {
    returnValue[key] = item[key]
  })
  return returnValue;
})

Considering you simply want to modify each item of your array of objects to only contain desired keys, you may go like that:

const src = [
   { id: 1, name: 'Foo', age: 20 },
   { id: 2, name: 'Bar', age: 21 },
   { id: 3, name: 'MyFoo', age: 20 }
]

const keys = ['name', 'age']

const result = src.map(item => Object.assign(
  ...keys.map(key => ({[key]: item[key]}))
))

console.log(result)

You can use Object Destructuring, inside a map function, something like that.

class Foo {
  id: number;
  name: string;
  age: number;

  constructor(id: number, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age;
  }
}

let fooArray: Foo[] = [
  new Foo(1, 'Foo', 20), 
  new Foo(2, 'Bar', 21),
  new Foo(3, 'MyFoo', 20)
  ];
const arrayOfKeys: (keyof Foo)[] = ['name', 'age'];  

const result = fooArray.map(element =>(({name,age}) => ({name,age}))(element));
console.log(result);

First of all: if you don't really need to reassign fooArray further in code I would remend it be a const.

Then you can add something like pick function, if you don't want to use lodash or underscore:

function pick(object: any, keys: string[]) {
    return keys.map((key: string) => ({ [key]: object[key] }))
}

And use it like this:

const res = fooArray.map(el => pick(el, arrayOfKeys))

Your can create generic function which will accept target array and array of fields to be extracted. You should loop on desired fields and save them to result object. Heres solution in TypeScript:

Generic function

function mapToLimitedProps<A, Keys extends (keyof A)[]>(arr: A[], keys: Keys) {
    return arr.map(item => {
        let result: Partial<{
            [key in Keys[number]]: A[key]
        }> = {};

        keys.forEach(key => {
            result[key] = item[key];
        })

        return result;
    })
}

Usage

mapToLimitedProps(fooArray, arrayOfKeys);
发布评论

评论列表(0)

  1. 暂无评论