comportement de tableau étrange en javascript

Question

Je sais que les tableaux en javascript sont un peu spéciaux, par rapport à d'autres langues, mais je n'ai pas vraiment ce comportement, ou ce qui se passe ici.

Je voudrais savoir pourquoi cela se produit et pourquoi je n'ai pas de tableau vide:

function setupWindowProgBar(settings, window, palette, arr){
    console.log('start');
    console.log(arr);
    if(typeof arr == 'undefined'){
        var arr = [];
    }
    console.log(arr);
    console.log('stop');
    var arrLen = arr.length;
    arr[arr.length] = createProgBar('master', 'bg', window, 0, settings.fillColor, settings.strokeColor, settings.textColor, palette, 'percent', settings.reqType, settings.sourceType, settings.sourceTarget, settings.sourceId);
    return arr;
}

Produit ceci dans la console:

start
undefined
[]
    0:
    barType:"master"
    bgcolor:"#12181f"
    curVal:160
        data:
        all_goals:160
        cost_hours:160
        cost_hours_spent:0
        cost_money:31610
        cost_money_owned:0
        parentObj:"progBar"
        progress_goals:5
        recurring:"no"
        wanted_timer:"2018-03-26 05:19:33"
        __proto__:Object
    fill:"#255f6f"
    height:59
    maxVal:5
    maxWidth:168
    sectionHeight:59
    stroke:"#7b9dac"
    text:"3%"
    textColor:"#dee5ed"
    textOpt:"percent"
    width:200
    x:33
    y:81
__proto__:Object
height:100
text:"omanko"
length:1
__proto__:Array(0)
stop

Je reconnais les objets ici, mais ce n'est pas de la pollution globale pour autant que je sache - console.log (window.arr) dit qu'il n'y a pas de variables globales nommées arr, et je n'ai pas modifié le prototype.

Cela ne devrait sûrement pas affecter une nouvelle déclaration de tableau de toute façon?

javascript arrays

2

Daniel Bengtsson 15 avril 2018 à 07:52

Answer 1

Ce comportement n'est pas limité aux tableaux, tout objet se comporte de cette façon dans la console

Ce que vous voyez est le résultat de la console dans tous les navigateurs qui vous "ment"

Si vous console.log(anyobject) et inspectez cet objet dans la console, ce que vous verrez est le anyobject actuel - pas ce qu'il était lorsque console.log a été exécuté

var obj = {}
console.log(obj);
obj.test = 1;

var arr = [1];
console.log(arr);
arr.push(2);

Maintenant, si vous ouvrez la console développeur, cliquez sur l'objet, vous verrez test:1

Regardez le tableau dans la console - il est sorti en tant que [1] ... pourtant, cliquez sur le tableau, vous voyez les deux éléments

Remarque: la console de développeur Chrome fait au moins allusion au fait qu'elle vous ment - il y a un i bleu, si vous survolez (ou cliquez, ne vous souvenez pas, n'utilisez pas Chrome assez souvent), vous voir un message indiquant que la valeur affichée est evaluated just now

3

Jaromanda X 15 avril 2018 à 05:23

Answer 2

Le problème est que lorsque vous appelez console.log(arr), il met une référence au tableau dans la console qui est déréférencée lorsque vous l'ouvrez (cliquez sur la flèche) afin qu'il affiche les modifications apportées ultérieurement dans le code. Utilisez plutôt console.table(arr) ou console.log(JSON.stringify(arr)).

Voici un extrait de MDN

Veuillez noter que si vous enregistrez des objets dans les dernières versions de Chrome et Firefox, ce que vous obtenez connecté sur la console est une référence à l'objet, ce qui n'est pas nécessairement la `` valeur '' de l'objet au moment où vous appelez la console. log (), mais c'est la valeur de l'objet au moment où vous cliquez dessus pour l'ouvrir.

0

Moti Korets 15 avril 2018 à 05:06

Answer 3

arr est déjà un paramètre pour votre fonction, et il n'est pas indéfini. var est hissé, donc pour l'interprète, votre code actuel ressemble en fait à quelque chose comme:

function setupWindowProgBar(settings, window, palette, arr){
  var arr; // **does not reassign the parameter**
  console.log('start');
  console.log(arr);
  if(typeof arr == 'undefined'){
    arr = [];
  }
  console.log(arr);
  console.log('stop');
}

Vous ne devez jamais déclarer une variable dont le nom est déjà limité au bloc / fonction dans lequel vous l'utilisez.

Si arr n'est pas réellement défini dans l'argument, il sera affecté à un tableau sur la ligne arr = [];, mais au moins sur Chrome, qui vide le tableau ne sera pas nécessairement imprimé au moment où vous console.log le .

console.log(arr); n'affiche pas nécessairement immédiatement le arr - selon votre navigateur, il ne peut être rempli dans votre console qu'après avoir ouvert votre console , après l'exécution de cette ligne:

arr[arr.length] = createProgBar('master', 'bg', window, ...

0

CertainPerformance 15 avril 2018 à 05:22

comportement de tableau étrange en javascript

3 réponses

Questions connexes

Questions liées

De nouvelles questions

javascript