为什么下面的map函数返回带逗号的字符串？

Question

I'm looping through an object. If one of its keys matches the value of another fields object then return the value of type of that fields object:

// OBJECTS

user: {
  email: '',
  password: ''
}

formFields: [
  { name: 'email', type: 'text', required: true },
  { name: 'password', type: 'password', required: true }
]

// HTML

<input :type="getPropType($key)"

// FUNCTION

getPropType (key) {
  console.log(this.fields)
  console.log(key)
  return this.fields.map(field => {
    if (field.name === key) return field.type
  })
}

It works except a comma is returned with every field.type :

Which is strange since the logs don't output any commas:

What could be the cause?

Answer 1

I think what you are trying to do is to extract the type of the object with the same name as the value of key, in that case a more appropriate solution will be to do that exactly that - ie find the element with the given name then extract its type

getPropType(key) {
  console.log(this.fields)
  console.log(key);
  var type;
  this.fields.some(field => {
    if (field.name === key) {
      type = field.type;
      return true;
    }
  });
  return type
}

---

If you want to use .map() , then

return this.fields.filter(field => field.name === key).map(field => field.type).join('')

Answer 2

Array.prototype.map() returns array. Your "getPropType" returned ["text", ""] and it should be reduced in your case.

return this.fields.map(field => {
    if (field.name === key) return field.type
  }).reduce(function(prev, curr, index, array){return prev + curr});