Pourquoi la syntaxe est-elle différente entre ces deux tableaux dans JS?

Question

Ils contiennent tous les deux les mêmes valeurs, mais je me demande pourquoi ils sont différents quand je les console dans les outils de développement.

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

Le tableau widths est un tableau qui a un seul élément faisant référence à la matrice values, alors que values est un tableau de 6 chiffres.

Pour copier les numéros dans individuellement, faites ceci:

widths.push(...values); 

Ou quand vous créez le tableau:

var widths = [...values]; 

ou à l'héritage compatible:

var widths = values.slice(); 

Vous pouvez sérialiser les tableaux pour obtenir une vue plus claire.

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 est une matrice de dimension 1 contenant 6 chiffres.

widths est un tableau à deux dimensions. Sa première dimension est un élément unique, qui est une référence à values. La deuxième dimension est les 6 chiffres dans values.

console.log() affiche uniquement la première dimension en détail par défaut. Vous pouvez cliquer sur le triangle d'affichage widths pour voir le contenu de la dimension interne. Si vous le modifiez pour consigner JSON, vous verrez la structure complète de chacun. Ensuite, vous verrez le niveau supplémentaire d'imbrication dans 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();