为什么Javascript .map（）返回并且为字符串对象额外的“未定义”？

Question

Please can anyone help with where an undefined item is coming from when mapping an object of strings. This is my object followed by the mapping:

function giveAdminTasks(){
var item;
var arr = [{adminTask: "Print Certificate",lessonNo: 0},
   {adminTask: "Study",lessonNo: 27},
   {adminTask: "Print Certificate",lessonNo: 3},
   {adminTask: "Calling Record",lessonNo: 3},
   {adminTask:"Calling Record",lessonNo: 3}];

 arr.map(function(elem){
 if(elem.lessonNo === 3){
 item += " + " + elem.adminTask;
 } 
})
console.log(item);
}

However, this returns a variable that looks like this:

"undefined + Print Certificate + Calling Record + Calling Record"

I can't figure out where the "undefined" item comes from. This doesn't happen if I just map the object without the "if" statement. Can anyone help?

This question talks about map only working on strings, but my object is all strings.

Answer 1

You did not initialize your item variable thus it has an initial value of undefined .

Change this:

var item;

to this:

var item = "";

You also have to deal with the fact that item is initially empty and you don't want to add a leading + sign when it's empty.

---

FYI, this is really a misuse of .map() . You should be using .forEach() or one of the other iterators instead since you aren't interested in a returned array.

function giveAdminTasks() {
    var item = "";
    var arr = [
        {adminTask: "Print Certificate", lessonNo: 0}, 
        {adminTask: "Study", lessonNo: 27}, 
        {adminTask: "Print Certificate", lessonNo: 3}, 
        {adminTask: "Calling Record", lessonNo: 3}, 
        {adminTask: "Calling Record",lessonNo: 3
    }];

    arr.forEach(function(elem) {
        if (elem.lessonNo === 3) {
            if (item) item += " + ";
            item += elem.adminTask;
        }
    });
    console.log(item);
}

You could also use .reduce() like this:

var item = arr.reduce(function(str, item) {
    if (item.lessonNo === 3) {
        if (str) str += " + ";
        str += elem.adminTask;
    }
    return str;
}, "");
console.log(item);

Answer 2

Here's a more declarative solution using ES6. It's most similar to Oriol's solution but doesn't iterate through the data more than once.

 const giveAdminTasks = (data, n) => data.reduce((acc, {adminTask, lessonNo}) => lessonNo === n ? [...acc, adminTask] : acc, []).join(' + ') let arr = [ {adminTask: "Print Certificate",lessonNo: 0}, {adminTask: "Study",lessonNo: 27}, {adminTask: "Print Certificate",lessonNo: 3}, {adminTask: "Calling Record",lessonNo: 3}, {adminTask: "Calling Record",lessonNo: 3} ] console.log(giveAdminTasks(arr, 3)) // Print Certificate + Calling Record + Calling Record console.log(giveAdminTasks(arr, 0)) // Print Certificate console.log(giveAdminTasks(arr, 27)) // Study 

And the ES5 equivalent

 function giveAdminTasks (data, n) { return data.reduce(function (acc, x) { return x.lessonNo === n ? acc.concat([x.adminTask]) : acc }, []).join(' + ') } var arr = [ {adminTask: "Print Certificate",lessonNo: 0}, {adminTask: "Study",lessonNo: 27}, {adminTask: "Print Certificate",lessonNo: 3}, {adminTask: "Calling Record",lessonNo: 3}, {adminTask: "Calling Record",lessonNo: 3} ] console.log(giveAdminTasks(arr, 3)) // Print Certificate + Calling Record + Calling Record console.log(giveAdminTasks(arr, 0)) // Print Certificate console.log(giveAdminTasks(arr, 27)) // Study 

---

To address @jfriend00's comment, to preserve the readability of the code and prevent the needless creation of extra arrays, you can introduce a small helper function.

At this point, I would call this a premature optimization. It's likely the original code will meet your needs unless you have significantly large datasets. If you run a profiler on your code and notice that this bit of code is slowing you down, then it might be time to start making some adjustments …

 const apush = (xs,x) => (xs.push(x), xs) const giveAdminTasks = (data, n) => data.reduce((acc, {adminTask, lessonNo}) => lessonNo === 3 ? apush(acc, adminTask) : acc, []).join(' + ') let arr = [ {adminTask: "Print Certificate",lessonNo: 0}, {adminTask: "Study",lessonNo: 27}, {adminTask: "Print Certificate",lessonNo: 3}, {adminTask: "Calling Record",lessonNo: 3}, {adminTask: "Calling Record",lessonNo: 3} ] console.log(giveAdminTasks(arr, 3)) // Print Certificate + Calling Record + Calling Record 

Answer 3

I would use filter , map and join :

 var arr = [{adminTask: "Print Certificate",lessonNo: 0}, {adminTask: "Study",lessonNo: 27}, {adminTask: "Print Certificate",lessonNo: 3}, {adminTask: "Calling Record",lessonNo: 3}, {adminTask:"Calling Record",lessonNo: 3}]; var item = arr.filter(function(elem){ return elem.lessonNo === 3; }).map(function(elem){ return elem.adminTask; }).join(' + '); console.log(item);