翻譯不完整。請協助 翻譯此英文文件

在本單元的最後一篇文章中,我們將介紹陣列 一種在單個變量名下存儲數據項列表的簡潔方法。 在這裡,我們看看為什麼這很有用,然後探討如何創建陣列,檢索,添加和刪除存儲在陣列中的項目等等。

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

什麼是陣列?

陣列通常描述為「像列表的物件」:也就是一個列表物件,裡面含有幾個數值。陣列物件能放在變數裡面,處理方式也與資料型別大致相同。不過主要差異為,陣列可以獨立訪問、並高效處理裡面的數值:像是利用迴圈,對每個數值作相同處理。例如我們的陣列是一組有項目和價格的產品、還想用迴圈把單價印在發票上、最後在發票底下印出合計。

不用陣列的話,就會需要註冊、並單獨呼叫很多獨立變數。這樣會花更多時間寫程式、效率更低、還更容易寫錯。只有十個的話還好解決,但如果有一百個,甚至一千個呢?我們會在接下來闡述之。

與前幾篇文章一樣,讓我們在 JavaScript 控制台中輸入一些示例,來了解陣列的基礎知識吧。下文提供了一個(you can also open this console in a separate tab or window, or use the browser developer console if you prefer)。

創建陣列

陣列用方括弧包起來,每個單位會用逗號分隔起來。

  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];
    // returns "bread"
  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.push('Bradford', 'Brighton');
    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.

See also

  • 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.

 

In this module

 

文件標籤與貢獻者

此頁面的貢獻者: iigmir, mubiesam
最近更新: iigmir,