Javascript: What is the full purpose of this array splice? - javascript

I'm going through a Javascript course and its challenges. I don't have a question about how to do this particular challenge but I was going through the code in my mind to make sure I understood all of it and I ran into a question.
var strength = true;
var fear = false;
var pack = {
foodPouch: ['carrot', 'mystery meat', 'apple', 42],
addFood: function(foodItem) {
this.foodPouch = this.foodPouch || [];
this.foodPouch.push(foodItem);
},
gobbleFood: function(foodItem) {
return(this.foodPouch.indexOf(foodItem) >= 0) ?
this.foodPouch.splice(this.foodPouch.indexOf(foodItem), 1)[0] :
alert('Your pack lacks ' + foodItem);
},
feedBird: function(birdFood) {
for (var i = 0; i < this.foodPouch.length; i++) {
if (this.foodPouch[i] == birdFood) {
alert('Feed beggar bird ' + this.foodPouch[i]);
}
}
}
};
pack.feedBird('42');
My question is with this line:
return(this.foodPouch.indexOf(foodItem) >= 0) ?
this.foodPouch.splice(this.foodPouch.indexOf(foodItem), 1)[0] :
alert('Your pack lacks ' + foodItem);
Why does the first ternary action that splices the array end with [0], which I believe makes that whole action into the value of the spliced array? I can see if you wanted to declare it as some kind of variable, but it seems like the main purpose is just to splice it off. Does it matter if that [0] is there at all?

splice removes elements from an array, then returns an array containing the removed elements.
In this case, the gobbleFood function is checking for the presence of a particular item (using indexOf) and is removing and returning the first instance of it if it exists in foodPouch.
The removal is done using splice, and since splice returns an array of items removed, even if it's only removed 1 item as in this case, it's necessary to use [0] as an indexer to get at the single item that was removed.

return(this.foodPouch.indexOf(foodItem) >= 0) ?
this.foodPouch.splice(this.foodPouch.indexOf(foodItem), 1)[0] :
alert('Your pack lacks ' + foodItem);
This statement translated to English says:
Return "the zeroth element of the 'returned array' after removing the foodItem" if it exists there. Or just display a message if it is not.
Or I can write it in this manner in JS:
if (this.foodPouch.indexOf(foodItem) >= 0) {
var removedItems = this.foodPouch.splice(this.foodPouch.indexOf(foodItem), 1);
return removedItems[0];
};
else
alert('Your pack lacks ' + foodItem);

Related

if else preventing loop for passing through object

I am having trouble returning a statement when my RegExp finds no matches :
function ai(message) {
if (username.length < 3) {
username = message;
send_message("Oh, well hello " + username + ", My name is Donald J Trump and i'm a big boy");
} else {
for (i = 0; i <= botChat.length; i++) {
var re = new RegExp(botChat[i][0], "i");
if (re.test(message)) {
var length = botChat[i].length - 1;
var index = Math.ceil(length * Math.random());
var reply = botChat[i][index];
send_message(reply);
}
}
}
}
When I enter a phrase it can correctly match the first line in an array as per the for loop. The issue I'm having is when I try to add an else statement it ceases to loop through my array properly.
I have tried :
else if (re.test(message) === false) {
send_message("i can't be expected to know everything");
}
But it doesn't work, it prevents the loop from looping past botChat[0][0].
I've also tried :
if (send_message().val() == "") {
// ...
}
But every time my code no longer works. Is there a method of adding something to my array that says 'if you don't find a match above, choose this'?
Or just a way of working my code so that the if/else works?
attached is the codepen.
I checked your codepen and the lines 190 and 194 console.log(send_message().val()); seems to be breaking the loop because those lines are throwing an exception since send_message() returns undefined and undefined does not have the .val() method.
Your regular expressions are working fine. I recommend not creating new RegExp objects every iteration, instead, use the one defined in the array if (botChat[i][0].test(message)), the overhead will be less.

json array check if there does not need to insert in localstorage?

I need to check a JavaScript array to see if there are duplicate values ​​. What is the easiest way to do this ? I just need to check whether the values ​​already exist if there is not need to go into json array.
function cek() {
resi_or_code = document.getElementById('code_or_resi').value;
resi = resi_or_code.split(',');
if($.trim(resi_or_code) != ''){
location.href = base_url + 'resi/' + encodeURIComponent(resi_or_code);
}
if (localStorage.daftar_data){
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
$("#riwayat").toggle();
}
else {
daftar_data = [];
}
for (y in daftar_data){
var q = daftar_data[y].resis;
for (x in resi){
console.log(q);
if (q === resi[x])
{
console.log('Value exist');
}else{
console.log('Value does not exist');
daftar_data.push({'resis':resi[x]});
localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
}
}
}
}
If i understand your question and code right, you basically have an array of objects where each object has key resis
If that is the case, below code might help
var valueArray = ar.map(function(item) {
return item.resis;
})
// To check for duplicate
if(valueArray.indexOf(value) !== -1) {
// Duplicates
} else {
// No duplicate
}
In your case,
ar would be daftar_data.
I am really not sure what your value is. is it resi?
Basically, you should try replacing your for loop with the above code.
By far the simplest way is to simply sort your array using Array.sort(). This will perform well and reduces you duplicate check to a simple for-loop that compares each value with its neighbor.
Solutions that attempt to avoid sorting will almost certainly scale very badly.
So to recap and show some code:
daftar_data.sort();
for (var index = 0; index < daftar_data.length - 1; index++)
{
if (daftar_data[index] === daftar_data[index+1]) {
// Found a duplicate
}
}
If the natural sort order of the objects don't work for you, supply a function to the sort function, like so:
daftar_data.sort(function(a, b) {
// return any value > 0 if a is greater, < 0 if b is greater
// and 0 if they are equal.
});
Note that in this form, you can actually check for the duplicate in your compare function.

Populate a prompt with elements of an array and number them off

(Stack Overflow doesn't have a tag for 'prompt' so I have used alert as I am guessing it is similar enough to attract the right answerers.)
Hello,
I am currently making a JavaScript-based game for an assignment at university. I am usually pretty good with problem solving but have been stumped by this issue.
To explain, I have an array which names the possible armour slots the player can pick. In any order these can be picked, and each time the choice gets pushed to a second array which handles what has already been picked (and in what order) and that item gets spliced from the original array. There is a while loop which runs through until all 3 have been picked.
var armourSlotToPick = ["Head", "Chest", "Legs"],
armourSlotPicked = [],
armourLoop = 1,
indexArmour = 0;
function numInArray() {
indexArmour++;
return (indexArmour + ". " + armourSlotToPick[indexArmour - 1] + "\n");
}
function armour() {
while (armourLoop < 4) {
var armourPick = prompt("Pick an armour slot to generate an item for:\n" + armourSlotToPick.forEach(numInArray));
if (armourPick == 1) {
armourSlotPicked.push(armourSlotToPick[0]);
armourSlotToPick.splice(0,1);
} else if (armourPick == 2) {
armourSlotPicked.push(armourSlotToPick[1]);
armourSlotToPick.splice(1,1);
} else if (armourPick == 3) {
armourSlotPicked.push(armourSlotToPick[2]);
armourSlotToPick.splice(2,1);
} else {
alert("Invalid choice, you suck");
break;
}
armourLoop++;
}
}
I know it probably wouldn't be possible to do the whole return in numInArray() to the prompt, but it shows some working.
Now the problem: I got it working so that each item in the array was numbered (var armourSlotToPick = ["1. Head", "2. Chest", "3. Legs"],) but as you could see, if the player chose 2, then the next time it would show "1. Head (new line) 3. Legs" and when the player chooses 3, a problem would occur, as they were really meant to choose 2. How is it possible to number the items in the array, in a prompt?
I'm possibly over thinking this but I have suffered for a few hours now.
I thank you in advance for any insight you may have,
Daniel.
EDIT: Solved.
Below is the end result, a slight variation from the edited answer from Jonathan Brooks.
var armourSlotToPick = [null, "Head", "Chest", "Legs"]
var armourSlotPicked = [null];
var armourLoop = 1;
function armour() {
while (armourLoop < 4) {
var message = "Pick an armour slot to generate an item for:\n";
for (var i = 0; i < armourSlotToPick.length; i++) {
if (armourSlotToPick[i] !== null) {
message += "" + i + ". " + armourSlotToPick[i] + "\n";
}
}
var armourPick = prompt(message);
if (armourPick > armourSlotToPick.length-1 || armourPick < 1) {
alert("Invalid choice, you suck");
} else {
var insert = armourSlotToPick.splice(armourPick, 1);
armourSlotPicked.push(insert);
}
armourLoop++;
}
armourSlotPicked.splice(0,1);
}
armour();
alert(armourSlotPicked.join("\n"));
I thank all that have contributed to this discussion and the end result, and I hope this is a good example for future problems people may have similar to this.
Check out my fiddle, I think I have a working solution.
What you really want to be using are Object Literals with your own indexing (starting from 1) - if it were me, I would create my own way to iterate over this custom indexing by adding a method to the Object's prototype, but I digress.
You're overcomplicating your code by using a while loop, and that large bulk of if statements is unnecessary: instead, all you need is some basic validation on the input and then you can just trust whatever input passes this validation. That is demonstrated here:
if ( armourPick > armourSlotToPick.length || armourPick < 1 ) {
alert("Invalid choice, you suck");
}
else {
armourSlotPicked.push( armourSlotToPick[armourPick-1] )
alert (armourSlotPicked[armourSlotPicked.length-1].value);
}
Read my code carefully, and you should get a better understanding of how to deal with certain issues.
EDIT:
As per your request, I think I have a solution that suits your needs. Basically all you have to do to have the arrays "start" at an index of 1 is to fill the zeroth element with a null value, like so:
var armourSlotToPick = [null, "Head", "Chest", "Legs"]
var armourSlotPicked = [null];
You just have to remember to take this null object into account in your code, for example:
if (armourSlotToPick[i] !== null) {
message += "" + i + "\n";
}
The indices will update automatically. See this updated fiddle for more details.
use structures / objects as content in the array, instead of just values.
the basic concept:
armourSlotPicked.push({ "key": 1, "value":armourSlotToPick[1]})
alert("value: " + armourSlotPicked[0].value)
alert("key: " + armourSlotPicked[0].key)
edit: responding to comments can take some space.
IMHO a prompt is the completely wrong tool for this, since most browsers would ask the user permission to prevent multiple popups, and since a promt can only return 1 piece of information, you can only ask for 1 thing per popup. Instead you ought to use a div element, with checkboxes for each information..
That being said it can easily be used in a promt.
The prompt is just a built in function, that takes a string as an argument (which is shown as text in the popup) and returns a string with the users input.
what does the magic for you is in fact this:
array.foreach(): The forEach() method executes a provided function once per array element.
in your case that means it calls a function that returns a string for each element in the array, and concatenates the strings.
in the old days you would have written this:
var messageText= "Pick an armour slot to generate an item for:\n"
for(var i = 1; i < armourSlotToPick.length; i++){
messageText += i + ". " + armourSlotToPick[i- 1] + "\n";
}
var armourPick = prompt(messageText);
but in this modern age, you define a printing function, and use it to generate the loop:
function numInArray() {
indexArmour++;
return (indexArmour + ". " + armourSlotToPick[indexArmour - 1] + "\n");
}
//more code before we get to where the function is used....
indexArmour = 0;
var messageText = "Pick an armour slot to generate an item for:\n" + armourSlotToPick.forEach(numInArray);
var armourPick = prompt(messageText);
or in a single line as in your code:
indexArmour = 0; //you forgot this - otherwise the list will only be complete once?
var armourPick = prompt("Pick an armour slot to generate an item for:\n" + armourSlotToPick.forEach(numInArray));
It produces the same output, because it does the same thing, its just written very differently!
If the array holds "object literals" instead of simply values, as I suggest, the old fashioned code would look something like this:
function contains(a, value) {
try{
for (var i = 0; i < a.length; i++) {
if (a[i].value == value) {
return true;
}
}
}
catch(err) {
// do nothing
};
return false;
}
and later..
for(var j = 0; j < 4; j++){
for(var i = 0; i < Math.min(armourSlotToPick.length); i++){
if( contains(armourSlotPicked, armourSlotToPick[i- 1]) )
continue;
var messageText = "Generate an item for armour in slot: " + i + "\n"
messageText += armourSlotToPick[i- 1] + "\n";
}
var armourPick = prompt(messageText);
if (armourPick > 0 && armourPick < armourSlotToPick.length) {
armourSlotPicked.push({"key":j, "value":armourSlotToPick[armourPick]);
}
...
}
//now we have an array that holds information about when what was picked..
or something along those lines.. this is bt.w completely untested, it's just for illustration
You want to use the array index to number your items. Since your numbers are one-based and the index is zero-based, you will need to convert between the two when outputting and interpreting the response.
This approach will also allow you to eliminate all but two of the cases in your if-else statement.

Checking for time conflicts, want to show just 1 warning

I have a form where the user can add X number of rows, with each row having a start time and end time input.
The rows can be added as the user likes, and the times do not have to be entered sequentially, but must not conflict when submitting the form.
So far, I am able to check for conflicts, using a couple of for loops and checking each start and end time against the rest.
The problem I am facing, is that obviously, if row 1 and 2 conflict, my code is logging two conflicts (logically correct!)
I only want to show the first conflict, as once this is resolved, naturally, the second conflict is.
My code for far:
$('form').submit(function(event){
event.preventDefault();
var errors = [];
var data = serializedToObject($(this).serializeArray());
for(var i = data.row.length; i--;) {
for(var s = data.start.length; s--;) {
if(s != i) {
if(data.start[i] < data.end[s] && data.start[s] < data.end[i]) {
errors.push('Conflict between ' + data.row[i] + ' and ' + data.row[s]);
}
}
}
}
if(errors.length === 0) {
this.submit();
} else {
console.log(errors);
}
});
(serializedToObject simply converts the form data to an object)
So how do I have my code only push 1 of the conflicts to the array?
I tried adding the row ID to an object and pushing that to the array, but it wouldn't log additional conflicts later down the line e.g. Row 1 conflicts with 2 and 4, the conflicts between 1 and 4 would not be mentioned, as row 1 is already in the array.
I have an answer for you, but it is not that efficient (again O(n^2), as you code in the question ).
If i understood correctly , data.start.length and data.row.length has to be equal, right? If so, if you count the s from i-1 to 0, and the errors are (1,2) and (2,1) , (1,2) won't get cought becouse the second loop starts from i-1, in the case where i=1, s starts directly from 0. just take a look at the code below (only included the for loops) :
var length = data.row.length;
for( var i = length; i>0; i-- ) {
for( var s = i-1; s>0; s-- ) {
if(data.start[i] < data.end[s] && data.start[s] < data.end[i]) {
errors.push('Conflict between ' + data.row[i] + ' and ' + data.row[s]);
}
}
}
I hope somebody will come with a comment with an idea to optimise this, maybe O(n) if it is possible :D. But this will work for you , and in case where you don't have length variable as big as 100.000, it will work just swell!

JavaScript splice() not working

for(var i = 0; i < this.phrases.length; i++) {
console.log('sort ' + this.phrases[i]);
console.log('sort length' + this.phrases.length);
if(this.phrases[i] == null) {
var s = this.phrases.splice(i, 1);
console.log('splice ' + this.phrases[i]);
console.log('splice length ' + this.phrases.length);
}
}
I have an array (this.phrases). I made the phrase that I want to remove equal to null in another section. The first log prints null, the second log also prints null. Why is it not getting spliced? This is also sometimes the last item in an array. Are you not able to splice an array with only one element? The same thing happens, however if it is not the last item in this.phrases.
Edit: s also does not seem to get set to any value.
Edit: The two length logs I added print the same number.
Edit: That's not actually true. Weird things are happening with the lengths, probably not involving this section of code. I just want to know if I'm using splice() correctly.
Switch these two lines:
var s = this.phrases.splice(i,1);
console.log('splice ' + this.phrases[i]);
To this:
console.log('splice ' + this.phrases[i]);
this.phrases.splice(i, 1);
i--;
const indexOfValue = treeSelectDataTemp.findIndex((item: any) => item.value === deleteIndexId[d]);
console.log(" ########### deleted indexOfValue ", indexOfValue);
if (indexOfValue !== -1) {
treeSelectDataTemp.splice(indexOfValue, 1);
}

Categories

Resources