なぜforEachは未定義を返すが、コンソールにログする

Question

私は配列を繰り返し処理し、いくつかのHTMLタグを追加しようとしています。私は.mapを試しましたが、別の配列を返すので、HTMLのコンマを見ることができます。私は.forEachを試してみましたが、コンソールにログオンすると動作しますが、HTMLで定義されていません。私はこれに対する答えを探し、コール関数に戻りませんと指摘するカップルの答えを見つけました。いくつかはコールバックを持っていて、呼び出し元から戻ってきたものの、呼び出し元の関数には戻っていませんでした。私はどこに戻っていないのか分からない。

wrapTagはコンソールにログすることができるので返信していますが、wrappedItemsには渡されていないようです。

返品はありますか？.forEachで正しく実装されていないものがありますか？

$(document).ready(function(){ 
let objR = { 
    key1:"5", 
    key2:"8", 
    key3:"6", 
    key4:"9", 
    key5: 
     {subKey1:"1",subKey2:"2",subKey3:"3",subKey4:"4"} 
} 

let arr = []; 
let html = ''; 

const s = x => document.getElementById(x); 
const isObject = val => (typeof val === "object") ? true : false; 

const keyValueToArray = (obj) => { 
    for(let key in obj) { 
     let value = obj[key], 
      n = []; 

     if(!isObject(value)){ 
      n.push(key, value); 
      arr.push(n); 
     } 
     else{ 
      arr.push(key); 
      keyValueToArray(value); 

     } 
    } 
    return arr; 
} 

const typeCheck = (x) => { 
    console.log(typeof x); 
    return x; 
} 

const wrapTag = (item, tag, i) => isObject(item) ? '<' + tag + '>' + item[0] + ' : ' + item[1] + '</' + tag +'>' 
          :'<' + tag +'>' + item + ':</' + tag +'>'; 

//const wrappedItems = keyValueToArray(objR).map(x => wrapTag(x, 'li')) 

const wrappedItems = keyValueToArray(objR).forEach(function(x, i, z){ 
    var res = wrapTag(x, 'li'); 
    console.log(res); 
    return res; 
}) 

html = '<ul>'; 
html += wrappedItems; 
html += '</ul>'; 
console.log(`html = ${html}`); 


s('cards').innerHTML = html; 

}）;

私はforEachを無名関数でラップし、resと宣言するにはを使用しました。私はをwrappedItems関数に渡さなければなりませんでしたが、それは私が達成しようとしていたものとそれ程遠くはありません。 ここに改訂された機能があります。

const wrappedItems = (obj) => { 
     let res = ''; 
     keyValueToArray(objR).forEach(function(x, i, z){ 
     res += wrapTag(x, 'li'); 
     console.log(res); 
     }); 
     return res; 
     } 

    html = '<ul>'; 
    html += wrappedItems(objR); 
    html += '</ul>'; 

Answer 1

forEach()のでwrappedItemsが定義されていない何かを返しません。 （docs）。代わりにmap()を試してみてください：

keyValueToArray(objR).map(function(x, i, z){} 

それともforEach()

EDIT内の新しい配列にプッシュ：あなたが好きjoin()を使用して、コンマせずに1つの文字列にそれらを作ることができる値をマッピングしたら

をこれは：

html += wrappedItems.join(" "); // or whatever you want to join with (maybe "\n") 

これはあなたを与える必要があります。

<ul><li>key1 : 5</li> <li>key2 : 8</li> ...