JSの2つの配列の構文が異なるのはなぜですか？

Question

両方とも同じ値を含んでいますが、Devツールでそれらをコンソール化したときに、なぜそれらが異なって見えるのだろうと思います。

var values = [6, 6, 6, 19, 13, 50]; 

function boxWidth() { 
    var widths = new Array(); 
    widths.push(values); 
    console.log(widths); 
    console.log(values); 
} 

Answer 1

values 6つの数字の配列であるのに対しwidthsアレイは、valuesアレイを参照する単一の部材を有する配列です。

var widths = values.slice(); 

：

var widths = [...values]; 

または互換性のあるレガシー可能にする：あなたは、配列を作成するときに

widths.push(...values); 

するか、それを実行します。

が個別に数値をコピーするには、これを行いますアレイをシリアライズして、より明瞭な表示を得ることができます。

var values = [6, 6, 6, 19, 13, 50]; 
 

 
function boxWidth() { 
 
    var widths = new Array(); 
 
    widths.push(values); 
 
    console.log(JSON.stringify(widths)); 
 
    console.log(JSON.stringify(values)); 
 
} 
 

 
boxWidth();

Answer 2

values 6つの番号を含む1次元配列です。

widthsは、2次元配列である。最初の次元は単一の要素で、valuesへの参照です。 2番目の次元は、valuesの6つの数値です。

console.log()は、デフォルトで最初のディメンションのみを詳細に表示します。 widthsの開閉用の三角をクリックすると、内側の寸法の内容が表示されます。ログをJSONに変更すると、それぞれの完全な構造が表示されます。次に、追加のレベルの入れ子がwidthsに表示されます。明確にするために

var values = [6, 6, 6, 19, 13, 50]; 
 

 
function boxWidth() { 
 
    var widths = new Array(); 
 
    widths.push(values); 
 
    console.log(JSON.stringify(widths)); 
 
    console.log(JSON.stringify(values)); 
 
} 
 

 
boxWidth();