• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

+1 głos
57 wizyt
pytanie zadane 22 lipca w JavaScript przez Doge Obywatel (1,610 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 przez Doge Obywatel (1,610 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

+2 głosów
odpowiedź 22 lipca przez ScriptyChris Mędrzec (159,770 p.)
wybrane 22 lipca 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.

+2 głosów
odpowiedź 22 lipca przez Wiciorny Mędrzec (156,560 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 

Podobne pytania

+1 głos
2 odpowiedzi 87 wizyt
+1 głos
2 odpowiedzi 143 wizyt
0 głosów
3 odpowiedzi 144 wizyt
pytanie zadane 13 lutego 2016 w C i C++ przez emSon Stary wyjadacz (10,500 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

84,177 zapytań

132,949 odpowiedzi

294,115 komentarzy

55,591 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...