为什么变量在值被修改后被分配给一个值，而我在它被修改之前分配了它

Question

 let Text = []; let textsize = 10; let Total_Character = 0; let Ypos = 100; function setup() { createCanvas(400, 400); } function keyPressed() { //All the characters which I DON'T want in the text, and their keycode // 8 = BackSpace, 17 = Control, 13 = Enter(NotDone), 16 = SHIFT, 18 = ALT, 20 = CAPS LOCK, 9 = TAB, 27 = ESCAPE, 45 = INSERT, 46 = DELETE, 33 = PAGE UP, 34 = PAGE DOWN, 36 = HOME, 35 = END, 144 = NUM LOCK, 91 = WINDOWS, 173 = F1, 174 = F2, 175 = F3, 177 = F4, 179 = F5, 176 = F6, 118 = F7, 91 = F8, 38 = UP ARROW, 39 = RIGHT ARROW, 40 = DOWN ARROW, 37 = LEFT ARROW //All the Values I don't want in my text writer (Such as "Media Volume Down") if (keyCode,= 8 && keyCode.= 17 && keyCode;= 16 && keyCode.= 18 && keyCode;= 20 && keyCode;= 9 && keyCode.= 27 && keyCode;= 45 && keyCode;= 46 && keyCode.= 33 && keyCode;= 34 && keyCode.= 36 && keyCode;= 35 && keyCode,= 144 && keyCode,= 91 && keyCode;= 173 && keyCode != 174 && keyCode != 175 && keyCode != 177 && keyCode != 179 && keyCode != 176 && keyCode != 118 && keyCode != 91 && keyCode != 38 && keyCode != 39 && keyCode != 40 && keyCode != 37) { //Only true if you press a key that is NOT one of the keycodes listed above, it pushes the key into the Text array (Not to be confused with `text` function) Text.push(key) } } function draw() { background(220); Total_Character = Text.length; //Changes all the different one character strings in the array to one large string for (var i = 0; i < Text.length - 1; i++) { Text[0] += Text[1]; Text.splice(1) } for (var i = 0; i < Text.length; i++) { //Displays the text textSize(textsize) text(Text[i], textWidth(Text[i]) / 2, Ypos); } }

 <script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

The Total_Character variable always is "1" unless nothing is typed. This part makes sense because the Total_Character is the length of the text, and I make the length of the text always 1 large string. The part I need help understanding is why is it "1" I'm assigning Total_Character to the length of the text BEFORE I change the length of the text, so shouldn't it be the total number of characters? Why is it being defined after the text array is modified?

BTW I included a good portion of my program to give people a feel of what I'm trying to accomplish here. I could've NOT included the code underneath keyPressed() but I felt it would make it easier to understand my program as a whole, and when you run it with the snippet tool, it'll work in the Snippet tool. You can completely ignore everything underneath that because it won't particularly affect this question.

Answer 1

You're getting the length of the array, not the length of the string in the array.

After you combine all the elements of Text into a single string, there's no need to loop over it. Just display Text[0] .

 let Text = []; let textsize = 10; let Total_Character = 0; let Ypos = 100; function setup() { createCanvas(400, 400); } function keyPressed() { //All the characters which I DON'T want in the text, and their keycode // 8 = BackSpace, 17 = Control, 13 = Enter(NotDone), 16 = SHIFT, 18 = ALT, 20 = CAPS LOCK, 9 = TAB, 27 = ESCAPE, 45 = INSERT, 46 = DELETE, 33 = PAGE UP, 34 = PAGE DOWN, 36 = HOME, 35 = END, 144 = NUM LOCK, 91 = WINDOWS, 173 = F1, 174 = F2, 175 = F3, 177 = F4, 179 = F5, 176 = F6, 118 = F7, 91 = F8, 38 = UP ARROW, 39 = RIGHT ARROW, 40 = DOWN ARROW, 37 = LEFT ARROW //All the Values I don't want in my text writer (Such as "Media Volume Down") if (keyCode,= 8 && keyCode.= 17 && keyCode;= 16 && keyCode.= 18 && keyCode;= 20 && keyCode.= 9 && keyCode;= 27 && keyCode.= 45 && keyCode,= 46 && keyCode,= 33 && keyCode;= 34 && keyCode != 36 && keyCode != 35 && keyCode != 144 && keyCode != 91 && keyCode != 173 && keyCode != 174 && keyCode != 175 && keyCode != 177 && keyCode != 179 && keyCode != 176 && keyCode != 118 && keyCode != 91 && keyCode != 38 && keyCode != 39 && keyCode != 40 && keyCode != 37) { //Only true if you press a key that is NOT one of the keycodes listed above, it pushes the key into the Text array (Not to be confused with `text` function) Text.push(key) } } function draw() { background(220); Total_Character = Text.length; //Changes all the different one character strings in the array to one large string Text[0] = Text[0].join(''); Text.splice(1) //Displays the text textSize(textsize) text(Text[0], textWidth(Text[0]) / 2, Ypos); }

 <script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>