如何使用原型在对象中映射数组对象？答案

【问题标题】：How to go about mapping an array object within an object using prototype?如何使用原型在对象中映射数组对象？
【发布时间】：2020-07-21 23:48:47
【问题描述】：

我在让原型映射函数与我的对象中的数组对象一起工作时遇到了一些问题。我收到错误“x() 不是函数”。我知道你不能在对象上使用原型，但对象中的数组应该可以使用 obj.arr.map() 访问。

这是我的代码：

let data = [

{'a':1, 'b':2, 'c':3},
{'a':4, 'b':5, 'c':6},
{'a':7, 'b':8, 'c':9}

]

let mapped = data.map(function(data){

  let newMap = {}
  newMap['a']=data['a']
  newMap['b']=data['b']
  return newMap;

});

Mapping.prototype.protoMap = function(){

//I have tried writing it as map.data

  let protoMap = map.map(function(map){

    let protoMap1 = {}

    protoMap1['a'] = map.mappedData['a']

    return protoMap1;

  });

}

function Mapping(data = []){

  this.mappedData = data

};

let map = new Mapping(mapped);

【问题讨论】：

你的 protoMap 方法中的 map.map 是什么？
不确定你的问题，也许是关于你试图用 Mapping 类做什么的澄清，但在你的 protoMap 函数中不要按名称引用 map 使用 this
map 是变量的名称，另一个 map 只是 map 函数，事后看来我应该更好地命名它们。基本上我想要做的只是使用原型映射数组对象的键。
我很清楚，您正在尝试使用传递给Mapping 构造函数的mapped 数组，并且您想要map @987654330 内的mapped 数组@?
没错！使用原型

标签： javascript arrays object prototype higher-order-functions

【解决方案1】：

您可以使用类似的东西来转换array to map。我很久以前就创建了这个工具。

class Mapper {
  constructor(array, key) {
    this.map = array.reduce((map, item) => {
      const val = item[key];
      if (!map[val]) {
        map[val] = [];
      }
      map[val].push(item);
      return map;
    }, {});
  }

  find(key) {
    return this.map[key] && this.map[key][Mapper.FIRST_INDEX]; //return blank array
  }

  findAll(key, returnUndefined) {
    //return blank array
    return this.map[key] ? this.map[key] : returnUndefined ? undefined : [];
  }
}

Mapper.FIRST_INDEX = 0;
let data = [
  { a: 1, b: 2, c: 3 },
  { a: 4, b: 5, c: 6 },
  { a: 7, b: 8, c: 9 },
];
var dataMap = new Mapper(data, "a"); 
console.log(dataMap.map); 


if(typeof window !== 'undefined') window.Mapper = Mapper;

【讨论】：

【解决方案2】：

尽量避免使用global变量：

Mapping.prototype.protoMap = function() {
  // DON'T do this
  // plus, this really doesn't make sense
  // because `map` refers to the new `Mapping` object that
  // you created; what you probably want to do is use the `mappedData`
  // property on your newly created `Mapping` object
  // const protoMap = map.mappedData.map(function(map) {...})

  // instead, use `this` to access the `mappedData` property
  // that you passed to the constructor
  const protoMap = this.mappedData.map(function(item) {...})
}
const map = new Mapping(mapped)

查看代码 sn-p 中的 cmets 以了解如何修复您的示例。

function Mapping(data = []) {
  this.mappedData = data
}
Mapping.prototype.protoMap = function() {
  // access the `mappedData` that was passed
  // to the `Mapping` constructor using `this`
  const protoMap = this.mappedData.map(
    function(item) {
      // use `item` argument for the `mappedData.map`
      // callback to access each item inside `mappedData`
      // individually
      const temp = {}
      temp["a"] = item["a"]
      return temp
    }
  )
  return protoMap
}

const data = [
  {'a': 1, 'b': 2, 'c': 3},
  {'a': 4, 'b': 5, 'c': 6},
  {'a': 7, 'b': 8, 'c': 9}
]

const mapped = data.map(
  function(data) {
    const newMap = {}
    newMap['a']=data['a']
    newMap['b']=data['b']
    return newMap;
  }
)

const mapping = new Mapping(mapped)
const result = mapping.protoMap()

console.log('result', result)

【讨论】：

很高兴我能提供帮助。