jQueryで配列をループすると、文字列を作成するときに最初に定義されていない値が返されます。

Question

値の配列を持っていて、長い文字列を1つ作成しています。これを行うには、私はjQueryのeach()メソッドを使用していますが、console.log()の最終値の場合は、最初にundefinedの値が追加されています。

アレイの各値に対してconsole.log()を実行しましたが、未定義の値はありません。

CodePen：http://codepen.io/gutterboy/pen/wGdqKo

コード：

var foo, options = []; 

var defaults = [ 
    'one', 'two', 'three', 'four', '|', 
    'five', 'six', 'seven', '|', 
]; 

function bar() { 
    $.each(defaults, function (index, value) { 
     if ($.inArray(value, options) === -1) { 
      if (value == '|') { 
       foo += value; 
      } else { 
       foo += (index == 0) ? value : ',' + value; 
      } 
     } 
    }); 
    console.log(foo); 
} 

$(document).ready(function() { 
    bar(); 
}); 

Answer 1

あなたのコードはfooを初期化しません。その初期値はundefinedです。 +=演算子は、現在の値に文字列を追加するので、最終結果全体の先頭にはundefinedになります。

Answer 2

codepenのコードはfooを初期化しません。上記のコードはfooを配列として初期化します。試してください：

var foo='';