تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Creating Arrays Basics0:00

I don't want to dive too deep into the world of arrays, because there are a lot of things to talk about with arrays, and plus, you know, over the course of the series, we will be discussing individual array things. So I think just the basics, the things that you would typically use when working with an array would be great for this particular episode. And I think we can start with how to create arrays, because we have several different ways. The first is to use the Array Constructor. So just new up the Array Constructor, and voila, you have an empty array. You can also pass an individual numeric value to the constructor, and that will create an

So just new up the ArrayConstructor, and voila, you have an empty array. You can also pass an individual numeric value to the constructor, and that will create an array of whatever size that you pass to it. So here I've passed the number five. This means that this array has a size of five, has five elements. Those elements don't have any values, well, it does, they're undefined, but it's an array of five elements. And of course, this is completely dynamic. We're not bound to an array of five elements. We can add more elements if we want to, we can take them out.

We're not bound to an array of five elements. We can add more elements if we want to, we can take them out. So you know, we're not bound like other languages that would restrict us to the size that we created. This is JavaScript. It's dynamic, so no. But then we can also pass in multiple values. They don't have to be numeric. They can be numeric, they can be strings, they can be objects, they can be anything. Because whenever you pass multiple things to the Array constructor, you are creating

Using Array Literals1:28

They can be numeric, they can be strings, they can be objects, they can be anything. Because whenever you pass multiple things to the ArrayConstructor, you are creating an array that contains those values. So that is the constructor. However, most of the time, you're not going to see the constructor being used. Most people create an array by using the literal notation, which is just a pair of square brackets. This is common in php. So you can create an array very easily. You can populate it with whatever values you want, and voila, you've created an array.

Array.of and Array.from1:57

So you can create an array very easily. You can populate it with whatever values you want, and voila, you've created an array. But we can create an array using an of method. It's off of the ArrayType, and we would pass in really the values that we want that array to have. So if you pass in a single value, that's not creating an array of four elements. That's creating an array that has a single element with the value of four. So there's a little bit difference between using ArrayOf and then using the ArrayConstructor. But of course, we could pass in multiple values, and that's going to be fine. There's also a from method that we could use, and the idea being that we would pass in an

But of course, we could pass in multiple values, and that's going to be fine. There's also a from method that we could use, and the idea being that we would pass in an object that can be iterated over. So it can be an array. It could also be a string, because a string is basically an array of characters. So if we pass in the string of hello, this is going to return an array that each element is a character in the string hello. So it would look something like that, H-E-L-L-O, all in individual elements. So when it comes to creating arrays, those are the primary ways that we do it. Most of the time, we use ArrayLiterals.

Adding History Array3:17

So when it comes to creating arrays, those are the primary ways that we do it. Most of the time, we use ArrayLiterals. But if the need arises, you can use ArrayOf or ArrayFrom, or you can new up the ArrayConstructor. All right, so what I want to do with our game is add a constant here. We'll call it history, and we will initialize it as an empty array. Now this is one thing that we need to talk about, because when it comes to constants and things like arrays, and we will see the same thing with objects, we're not saying that this history variable is and can only be an empty array.

and things like arrays, and we will see the same thing with objects, we're not saying that this history variable is and can only be an empty array. What we are saying is that this history variable contains an array, and then we can add or remove elements to and from that array. So we just can't change it to another type of value or to another array. So every attempt that's made, we want to add that attempt to the history. And I think this is where we can start to be a little lenient, because if the user supplies an attempt that isn't valid, we could just not count that. So what I want to do then is, after our check to see if it is a valid attempt, that's where we will add our attempt to the history array.

So what I want to do then is, after our check to see if it is a valid attempt, that's where we will add our attempt to the history array. Now in php, we would do something like this, to where we would want to add the attempt to the end of the array, and the syntax would look like that. We have something similar. Of course, it's not this syntax. We have a push method, and the idea is the same. We are pushing whatever value that we want to the end of the array. So that is going to give us the ability to keep track of attempts, or at least valid attempts, which is going to be okay.

Preventing Duplicate Guesses5:17

So that is going to give us the ability to keep track of attempts, or at least valid attempts, which is going to be okay. But something else I'm thinking of, we should also check if the User has tried that particular number before. So we can check to see if the User has tried that attempt by using the indexOf. This is going to return the index of whatever value we want, and I used the wrong variable. We need to use the guess variable. So this will return the index that has the same value of our guess. But if it doesn't exist within the array, then it's going to return negative one. So we'll say if the indexOf(guess) is negative one, then we also want to continue, because

But if it doesn't exist within the array, then it's going to return -1. So we'll say if the index of guess is -1, then we also want to continue, because we don't want to count that as an attempt. So we will just continue on, so that if we get down to here, then we add that guess to our history, and then everything should work as it should before. So let's test this out. Let's refresh. We will call playGame, and hopefully everything is going to work like we would expect. So if we enter 6, we don't see our message. That's because I did this wrong.

So if we enter six, we don't see our message. That's because I did this wrong. Of course, our first attempts aren't going to be there, are they? So this is wrong. If indexOf are greater than negative one, that's really what we needed to do. If it's greater than negative one, then it already exists in the history array, so then we want to continue. I don't know what I was thinking, but okay, that fixes that. So if we refresh, and let's also do this. Let's just go ahead and let's call playGame, so that we don't have to manually do that.

So if we refresh, and let's also do this. Let's just go ahead and let's call playGame, so that we don't have to manually do that anymore. So if we playGame, enter 5, we see 5 is too low, and 8 was it. So congrats, you guessed the numbers. The number was 8. But you know, I also want to see what was guessed. That would be nice to see. So we can go back, and after our game over message, we can say console.log guessedNumbers are, and then we want to output our history.

Formatting with Join7:31

So we can go back, and after our game over message, we can say console.log guest numbers are, and then we want to output our history. We can do that by just using history here. And whenever we view this in the console, it is going to output all of the numbers in our history array, and we can see it right there, five, eight, and nine. But you know, I want this formatted a little bit differently. I would like a space after each comma, just to make it a little bit easier to read. And we can do that by using a method on our array object called join. We're going to pass in a string, and it's basically going to convert our array into a string, and for each element, it's going to separate each element using whatever string

We're going to pass in a string, and it's basically going to convert our array into a string, and for each element, it's going to separate each element using whatever string we provided here. So this is going to separate each element with a , , in which case we can go back, and whenever we run through this, we don't really care if we guess it or not. We can see now the formatting is 5, , 8, , and then our last number 9. But now that we have our history, and we aren't really caring about invalid attempts, we could use our history to keep track as to how many attempts that we have done. So we could actually change this.

use our history to keep track as to how many attempts that we have done. So we could actually change this. We don't really need a for loop anymore, we need a while loop. Because now we can use our history, and we have a length property. This tells us how many elements are in the array. So as long as the length is less than maxAttempts, then we're going to be fine. We can get rid of the attempts variable, which I know we've used that in a couple of other places. I know definitely down here where we have attempts, but now we can use that history length, and I think that's it.

I know definitely down here where we have attempts, but now we can use that historyLength, and I think that's it. Do we use attempts anywhere else? I don't think so. We will definitely find out for sure. So if we try this, and sure enough, we guessed it in two attempts, and this might actually fix our issue where the number of attempts was wrong, and well, that didn't work. We need something one, two, three, and sure enough, in three attempts. So we fixed that particular issue as well. We've also simplified our code because now we don't have that counter, we are relying

So we fixed that particular issue as well. We've also simplified our code because now we don't have that counter, we are relying upon the length of the array. And so I think that's going to be okay. Because whenever we use arrays, a lot of the times we want to create them, we want to add elements to them, and we need to know how big an array is. There are, of course, a lot of other things that we need to do, but we will cover those over the course of this series.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟