Jaki jest najlepszy sposób na dodawanie elementów do tablicy?

pytanie zadane 22 lipca 2021 w JavaScript przez Doge Gaduła (3,370 p.)

Witam, jaki jest najlepszy sposób na dodawanie elementów do tablicy? Chodzi mi o to, aby po wywołaniu funkcji, dodać na końcu element. Sam zrobiłem coś takiego:

var number_arr = [];
var number_arr_length = 0;
function addEvent()
{
[...]
number_arr[number_arr_length] = i; //i jest numerem z pętli który ma być przypisany
console.log("długość tablicy: "+number_arr_length); //wyświetlanie długości tablicy
console.log('element tablicy: '+number_arr[number_arr_length]); //wyświetlanie i
number_arr_length++; //zwiększanie zmiennej długości tablicy
}

lecz nie wydaje mi się, aby był to dobry sposób.

Widziałem coś takiego:

var nowaDługosc = owoce.push('Pomarańcz');

na stronie developer mozilla lecz trzeba utworzyć tutaj nową zmienną i działanie to jest chyba jednorazowe, ponieważ kiedy drugi raz to wykonamy, to dostaniemy taki sam rezultat, ponieważ sama tablica owoce się nie zmienia, tworzymy tylko nową zmienną nowaDługosc, do której kopiujemy tablicę owoce wraz z nowym elementem.

Próbowałem również:

var number_arr = [];
function addEvent()
{
[...]
number_arr[number_arr.length] = i;
console.log("długość tablicy: "+number_arr.length); 
console.log('element tablicy: '+number_arr[number_arr.length]); 
}

z wbudowaną właściwością .length, lecz za każdym razem otrzymuję tę samą długość tablicy => 0.

Chciałbym również móc usuwać ostatni element tablicy, więc byłbym wdzięczny za podpowiedź w jaki sposób mogę to zrobić, ponieważ efekt w przykładzie:

var ostatni = owoce.pop();

ze strony developer mozilla jest chyba analogiczny do poprzedniego.

komentarz 22 lipca 2021 przez Doge Gaduła (3,370 p.)

Całość kodu:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div id="container" class="container">
		<div id="calculator" class="calculator">
			<div id="output" class="output">0</div>
			<div id="buttons" class="buttons">
				<div id="buttonAC" class="button_clear" onclick="AC()">
					AC
				</div>
				<div id="buttonBACK" class="button_clear">
					BACK
				</div>
				<div id="button1" class="button">
					1
				</div>
				<div id="button2" class="button">
					2
				</div>
				<div id="button3" class="button">
					3
				</div>
				<div id="button/" class="button_other" onclick="functional_button(1, '/')">
					/
				</div>
				<div id="button4" class="button">
					4
				</div>
				<div id="button5" class="button">
					5
				</div>
				<div id="button6" class="button">
					6
				</div>
				<div id="buttonx" class="button_other" onclick="functional_button(2, 'x')">
					x
				</div>
				<div id="button7" class="button">
					7
				</div>
				<div id="button8" class="button">
					8
				</div>
				<div id="button9" class="button">
					9
				</div>
				<div id="button-" class="button_other" onclick="functional_button(3, '-')">
					-
				</div>
				<div id="button=" class="button_other" onclick="functional_button(4, '=')">
					=
				</div>
				<div id="button0" class="button">
					0
				</div>
				<div id="button." class="button_other" onclick="dot()">
					.
				</div>
				<div id="button+" class="button_other" onclick="functional_button(5, '+')">
					+
				</div>
			</div>
		</div>
	</div>
</body>
</html>

*
{
	margin: 0px;
	padding: 0px;
	user-select: none;
}
.container
{
	width: 100vw;
	height: 100vh;
	background-color: #969696;
	display: flex;
	align-items: center;
	justify-content: center;
}
.calculator
{
	width: 25%;
	height: 75%;
	background-color: #303030;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.output
{
	width: 90%;
	height: 10%;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: right;
	font-size: 40px;
}
.buttons
{
	width: 95%;
	height: 80%;
	font-size: 30px;
	background-color: blue;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.button
{
	height: 17%;
	width: 20%;
	margin: 5px;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
}
.button:hover
{
	background-color: gray;
	cursor: pointer;
}
.button_other
{
	height: 17%;
	width: 20%;
	margin: 5px;
	background-color: pink;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
}
.button_other:hover
{
	background-color: red;
	cursor: pointer;
}
.button_clear
{
	height: 10%;
	width: 43%;
	margin: 5px;
	background-color: pink;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}
.button_clear:hover
{
	background-color: red;
	cursor: pointer;
}

window.onload = addEvent;
var result = 0;
var current_char = "";
var last_char = "";
var last_number = "";
var numbers = 0;
var numbers2 = 0;
var number_arr = [];
var number_arr_length = 0;
var special_button_arr = [];
var char_arr = [];
function addEvent()
{
    for(let i=0;i<=9;i++)
    {
        var div = document.getElementById(`button${i}`);
        div.addEventListener("click", function() 
        {
			if(numbers2 == 0)
			{
				document.getElementById("output").innerHTML = "";
			}
			if(last_char == "equal")
			{
				console.log("You can't do that");
			}
			else
			{
				var text = document.createTextNode(i);
				last_number += i;
				last_char = "number";
				console.log("last_number: "+last_number);
				document.getElementById("output").appendChild(text);
				numbers2++;
			}
			number_arr[number_arr_length] = i;
			console.log("długość tablicy: "+number_arr_length);
			console.log('element tablicy: '+number_arr[number_arr_length]);
			number_arr_length++;
        });
    }
}
function functional_button(number, type)
{
	var temporary_number = 0;
    var text = document.createTextNode(type);
	if(last_number == "" && type != "x")
	{
		temporary_number = 0;
	}
	else if(last_number == "" && type == "x")
	{
		temporary_number = 1;
	}
	else
	{
		temporary_number = parseFloat(last_number);
	}
	console.log("last_number: "+last_number);
	console.log("temporary_number: "+temporary_number);
	if(last_char == "other")
	{
		console.log("You can't do that");
	}
	else
	{
		if(numbers == 0)
		{
			result = temporary_number;
			numbers++;
			switch(number)
			{
				case 1:
					current_char = "/";
					last_char = "other";
					break;
				case 2:
					current_char = "*";
					last_char = "other";
					break;
				case 3:
					current_char = "-";
					last_char = "other";
					break;
				case 4:
					current_char = "=";
					last_char = "equal";
					break;
				case 5:
					current_char = "+";
					last_char = "other";
					break;
			}
		}
		else
		{
			switch(number)
			{
				case 1:
					if(temporary_number != 0)
					{
						result /= temporary_number;
					}
					current_char = "/";
					last_char = "other";
					break;
				case 2:
					result *= temporary_number;
					current_char = "*";
					last_char = "other";
					break;
				case 3:
					result -= temporary_number;
					current_char = "-";
					last_char = "other";
					break;
				case 4:
					document.getElementById("output").innerHTML = "";
					console.log(current_char);
					if(current_char == "/")
					{
						result /= temporary_number;
					}
					else if(current_char == "*")
					{
						result *= temporary_number;
					}
					else if(current_char == "-")
					{
						result -= temporary_number;
					}
					else if(current_char == "+")
					{
						result += temporary_number;
					}
					text = document.createTextNode(result);
					last_char = "equal";
					break;
				case 5:
					result += temporary_number;
					current_char = "+";
					last_char = "other";
					break;
			}
		}
		last_number = "";
		document.getElementById("output").appendChild(text);
		console.log("result: "+result);
	}
}
function dot()
{
	if(last_char != "number")
	{
		console.log("You can't do that");
	}
	else
	{
		var text = document.createTextNode(".");
		document.getElementById("output").appendChild(text);
		last_number += ".";
		last_char = "other";
	}
}
function AC()
{
	result = 0;
	current_char = "";
	last_char = "";
	last_number = "";
	numbers = 0;
	document.getElementById("output").innerHTML = "0";
}

2 odpowiedzi

odpowiedź 22 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 22 lipca 2021 przez Doge

Najlepsza

Widziałem coś takiego:

1

var nowaDługosc = owoce.push('Pomarańcz');

na stronie developer mozilla lecz trzeba utworzyć tutaj nową zmienną i działanie to jest chyba jednorazowe, ponieważ kiedy drugi raz to wykonamy, to dostaniemy taki sam rezultat, ponieważ sama tablica owoce się nie zmienia, tworzymy tylko nową zmienną nowaDługosc, do której kopiujemy tablicę owoce wraz z nowym elementem.

Metoda push dodaje do końca tablicy wartość przekazaną w parametrze - można też przekazać listę wartości i dodać kilka za jednym zamachem. Tablica, na której wywołujesz push zmieni swoją zawartość, bo dodasz do niej nowe wartości. W tym przykładzie pod zmienną nowaDługosc nie masz kopii tablicy, tylko jej długość po dodaniu elementów (czyli aktualną długość).

Chciałbym również móc usuwać ostatni element tablicy, więc byłbym wdzięczny za podpowiedź w jaki sposób mogę to zrobić, ponieważ efekt w przykładzie:

Tak, metodą pop możesz usunąć element z tablicy, ale tylko ostatni (w danym momencie) i ta metoda zwraca usunięty element.

Jeśli chcesz jednocześnie usunąć wiele elementów począwszy od podanego indeksu oraz, zaczynając od tego miejsca, dodać nowe wartości, to skorzystaj ze splice.

odpowiedź 22 lipca 2021 przez Wiciorny Ekspert (269,590 p.)

Dodajesz do tablicy, a nie tworzysz nowej zmiennej

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

Nawet masz w nazwie zmiennej oznaczenie, "nowaDlugosc" a nie ... ze jest to nowa tablica