# Arrays

先決條件： 基本計算機知識，基本理解 HTML 與 CSS，知道 JavaScript 是什麼。 理解何謂陣列並在 JavaScript 操作之。

## 什麼是陣列？

### 創建陣列

1. 來作一個購物清單的陣列吧：我們會做類似下面的事情。在主控台中輸入以下程式：
```var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
shopping;```
2. 在此，陣列的每個單位都是字串。但請記住，陣列可以儲存任何單位：字串、數字、物件、另一個變數、甚至是另一個陣列。也可以混合單位的型別：它們不一定都要是數字或字串。來試試這個：
```var sequence = [1, 1, 2, 3, 5, 8, 13];
var random = ['tree', 795, [0, 1, 2]];```
3. 看下去之前，試著自己作幾個陣列。

### 訪問並修改陣列的單位

1. 在主控台輸入以下程式：
```shopping[0];
2. 也可以透過賦予陣列新數值修改該單位。試試這個：
```shopping[0] = 'tahini';
shopping;
// shopping 回傳 [ "tahini", "milk", "cheese", "hummus", "noodles" ]```
注：前面有說過，但還是提醒下：電腦從 0 開始數！
3. 請注意，陣列裡面的陣列稱為多維陣列（multidimensional array）。你可以撰寫兩組方括弧，來訪問陣列裡面的陣列單位。例如說，訪問前述 `random` 變數內的陣列單位就可以這麼寫：
`random[2][2];`
4. 看下去之前，試著進一步使用並修改陣列。

### Finding the length of an array

You can find out the length of an array (how many items are in it) in exactly the same way as you find out the length (in characters) of a string — by using the `length` property. Try the following:

```sequence.length;
// should return 7```

This has other uses, but it is most commonly used to tell a loop to keep going until it has looped through all the items in an array. So for example:

```var sequence = [1, 1, 2, 3, 5, 8, 13];
for (var i = 0; i < sequence.length; i++) {
console.log(sequence[i]);
}```

You'll learn about loops properly in a future article, but briefly, this code is saying:

1. Start looping at item number 0 in the array.
2. Stop looping at the item number equal to the length of the array. This will work for an array of any length, but in this case it will stop looping at item number 7 (this is good, as the last item — which we want the loop to cover — is 6.
3. For each item, print it out to the browser console with `console.log()`.

## Some useful array methods

In this section we'll look at some rather useful array-related methods that allow us to split strings into array items and vice versa, and add new items into arrays.

### Converting between strings and arrays

Often you'll be presented with some raw data contained in a big long string, and you might want to separate the useful items out into a more useful form and then do things to them, like display them in a data table. To do this, we can use the `split()` method. In its simplest form, this takes a single parameter, the character you want to separate the string at, and returns the substrings between the separator as items in an array.

Note: Okay, this is technically a string method, not an array method, but we've put it in with arrays as it goes well here.

1. Let's play with this, to see how it works. First, create a string in your console:
`var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';`
2. Now let's split it at each comma:
```var myArray = myData.split(',');
myArray;```
3. Finally, try finding the length of your new array, and retrieving some items from it:
```myArray.length;
myArray[0]; // the first item in the array
myArray[1]; // the second item in the array
myArray[myArray.length-1]; // the last item in the array```
4. You can also go the opposite way using the `join()` method. Try the following:
```var myNewString = myArray.join(',');
myNewString;```
5. Another way of converting an array to a string is to use the `toString()` method. `toString()` is arguably simpler than `join()` as it doesn't take a parameter, but more limiting. With `join()` you can specify different separators (try running Step 4 with a different character than a comma).
```var dogNames = ['Rocket','Flash','Bella','Slugger'];
dogNames.toString(); //Rocket,Flash,Bella,Slugger```

### Adding and removing array items

We've not yet covered adding and removing array items — let us look at this now. We'll use the `myArray` array we ended up with in the last section. If you've not already followed that section, create the array first in your console:

`var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];`

First of all, to add or remove an item at the end of an array we can use `push()` and `pop()` respectively.

1. Let's use `push()` first — note that you need to include one or more items that you want to add to the end of your array. Try this:
```myArray.push('Cardiff');
myArray;
myArray;
```
2. The new length of the array is returned when the method call completes. If you wanted to store the new array length in a variable, you could do something like this:
```var newLength = myArray.push('Bristol');
myArray;
newLength;```
3. Removing the last item from the array is as simple as running `pop()` on it. Try this:
`myArray.pop();`
4. The item that was removed is returned when the method call completes. To save that item in a new variable, you could do this:
```var removedItem = myArray.pop();
myArray;
removedItem;```

`unshift()` and `shift()` work in exactly the same way as `push()` and `pop()`, respectively, except that they work on the beginning of the array, not the end.

1. First `unshift()` — try the following commands:
```myArray.unshift('Edinburgh');
myArray;```
2. Now `shift()`; try these!
```var removedItem = myArray.shift();
myArray;
removedItem;```

## Active learning: Printing those products!

Let's return to the example we described earlier — printing out product names and prices on an invoice, then totaling the prices and printing them at the bottom. In the editable example below there are comments containing numbers — each of these marks a place where you have to add something to the code. They are as follows:

1. Below the `// number 1` comment are a number of strings, each one containing a product name and price separated by a colon. We'd like you to turn this into an array and store it in an array called `products`.
2. On the same line as the `// number 2` comment is the beginning of a for loop. In this line we currently have `i <= 0`, which is a conditional test that causes the for loop to stop immediately, because it is saying "stop when `i` is no longer less than or equal to 0", and `i` starts at 0. We'd like you to replace this with a conditional test that stops the loop when `i` is no longer less than the `products` array's length.
3. Just below the `// number 3` comment we want you to write a line of code that splits the current array item (`name:price`) into two separate items, one containing just the name and one containing just the price. If you are not sure how to do this, consult the Useful string methods article for some help, or even better, look at the Converting between strings and arrays section of this article.
4. As part of the above line of code, you'll also want to convert the price from a string to a number. If you can't remember how to do this, check out the first strings article.
5. There is a variable called `total` that is created and given a value of 0 at the top of the code. Inside the loop (below `// number 4`) we want you to add a line that adds the current item price to that total in each iteration of the loop, so that at the end of the code the correct total is printed onto the invoice. You might need an assignment operator to do this.
6. We want you to change the line just below `// number 5` so that the `itemText` variable is made equal to "current item name — \$current item price", for example "Shoes — \$23.99" in each case, so the correct information for each item is printed on the invoice. This is just simple string concatenation, which should be familiar to you.

## Active learning: Top 5 searches

A good use for array methods like `push()` and `pop()` is when you are maintaining a record of currently active items in a web app. In an animated scene for example, you might have an array of objects representing the background graphics currently displayed, and you might only want 50 displayed at once, for performance or clutter reasons. As new objects are created and added to the array, older ones can be deleted from the array to maintain the desired number.

In this example we're going to show a much simpler use — here we're giving you a fake search site, with a search box. The idea is that when terms are entered in the search box, the top 5 previous search terms are displayed in the list. When the number of terms goes over 5, the last term starts being deleted each time a new term is added to the top, so the 5 previous terms are always displayed.

Note: In a real search app, you'd probably be able to click the previous search terms to return to previous searches, and it would display actual search results! We are just keeping it simple for now.

To complete the app, we need you to:

1. Add a line below the `// number 1` comment that adds the current value entered into the search input to the start of the array. This can be retrieved using `searchInput.value`.
2. Add a line below the `// number 2` comment that removes the value currently at the end of the array.

## Conclusion

After reading through this article, we are sure you will agree that arrays seem pretty darn useful; you'll see them crop up everywhere in JavaScript, often in association with loops in order to do the same thing to every item in an array. We'll be teaching you all the useful basics there are to know about loops in the next module, but for now you should give yourself a clap and take a well-deserved break; you've worked through all the articles in this module!

The only thing left to do is work through this module's assessment, which will test your understanding of the articles that came before it.

• Indexed collections — an advanced level guide to arrays and their cousins, typed arrays.
• `Array` — the `Array` object reference page — for a detailed reference guide to the features discussed in this page, and many more.