資料結構 : Array

在拿到 API 要把 JSON 檔寫進網頁裡,然後再把資料畫出來前,要先花時間釐清一下 Array & Objects,以及 JSON 是什麼?然後為什麼常常會使用 for loop 來讀 Array & Objects?

因為我還是初心學習者,以下這裡做了一點 Array 小筆記:

1.Array 可以想像是一串清單,裡面有各式各樣的物件,可能是蘋果、柳丁、3 等等。
2.Objects 可以想像是一個裝有一堆物件跟該物件值的籃子,排列方式更組織化,方便我們去取得。

陣列 Array [ ]

可以存一串資料(數字、string、number、boolean、甚至另一串 array 或是 Objects)。

範例:

var list =[‘carrots’ ,3 ,true];

Array 有很多 method

method 其實就是在 object 物件上讓物件做事,Array 因為也是物件,所以可直接使用這些 method。簡單來說就是可以在跑程式的時候把這一串資料裡的東西增加會去掉(也就是說你在跑程式前可能 Array 裡只有一筆,跑完後裡面可能會有 100 筆)。

怎麼把 Array 讀出來

var list =[‘carrots’ ,3 ,true];
console.log(list[0]); // log 出來會是 carrots

要讀 Array 的第一個物件會從 0 開始算,所以 list 這個 Array 的第一筆資料,其實是[0],所有 lost[0] 會讀出 carrots。

var list =[‘carrots’ ,3 ,true];
console.log(list.length); // log 出來會是 3

因為 Array 是 object,所以可以直接用 .length 這個 method 讀出這筆 Array 有幾個物件在裡頭。

怎麼在 Array 增加物件?

var numbers = [1, 2, 3];
numbers.length // 可以讀出 numbers 的長度

直接根據 .length 增加物件

numbers[numbers.length] = 4; // 現在就會變成 var numbers = [1, 2, 3, 4];

為啥這樣做?因為 Array 是從 0 開始算順序,所以其實數字 1 他讀出來是 numbers[0],而不是 numbers[1]。

也就是說 numbers[numbers.length] 這邊其實就等於 numbers[3],也就是 numbers[3] = 4。

用 push() method 增加物件(會加在最後面)

var numbers = [ 1, 2, 3 ];
number.push(4, 5, 6);
console.log(numbers); //這一串就會變成 [1, 2, 3, 4, 5, 6];

用 unshift() method 增加物件(會加在最後面)

var numbers = [ 1, 2, 3 ];
number.unshift(4, 5, 6);
console.log(numbers); //這一串就會變成 [4, 5, 6, 1, 2, 3];

怎麼在 Array 減去物件?

用 pop() method 減去物件(會減去最後面 item)

var numbers = [ 1, 2, 3 ];
number.pop();
console.log(numbers); //這一串就會變成 [1, 2];

也就是說 pop() method 也可用來拿到 array 最後一個 item。

比如:

var numbers = [ 1, 2, 3 ];
var lastItem = numbers.pop();
console.log(lastItem); //意思就是我拿到最後面的 item,在這裡會就是 3

用 shift() method 減去物件(會減去最前面 item)

var numbers = [ 1, 2, 3 ];
var firstItem = numbers.pop();
console.log(firstItem); // 意思就是我拿到最前面的 item,在這裡就是 1

Array 到底能怎麼用?

想像 Array 就是一個排隊的隊伍,裡面有一堆客人。

var customerList = [ ‘customer1’, ‘customer2’ , ‘customer3’, ‘customer4’ ];

新進來的那位,我們就會用 push() method 把他加進來:

var customerList = [ ‘customer1’, ‘customer2’ , ‘customer3’, ‘customer4’ ];
customerList.push(‘customer5’);

接著最前面的去結帳了,我們就會用 shif( ) method 移除掉最前面那位:

var customerList = [ ‘customer1’, ‘customer2’ , ‘customer3’, ‘customer4’ ];
customerList.push(‘customer5’);
customerList.shift();

取 Array 為什麼常會需要用到 for loop?

當你想要找到你每一筆資料的位置,或是你要跑完每筆資料,通常會一直重複去抓資料的位置,這時會用到的就是 for loop

範例:假設我們要讀出一個班級所有人的名稱

var classStudents = [ ‘Annie’, ‘Andy’, ‘John’];
for( var i = 0; i < classStudents.length; i += 1){
console.log(classStudents[i]);
}
// i += 1 的意思就是,每跑完一次 i 就會 +1,也就是會拿到 classStudents[0]、classStudents[1]、classStudents[2]。ㄌ在這已拿資料會拿到小於 classStudents.length(資料數為 3) 為止,所以也就是跑到 2 就停止。

拿到 Array 以後我要怎麼把它畫到頁面上?

範例:假設我們有一個音樂清單,他是一個有一串音樂的 Array,要怎麼把它呈現到頁面上?

*通常看到一串,如果要重複把裡面的 item 讀出來,就會需要使用到 for loop 照順序重複把 item 拿出來。

先釐清要做什麼:
1. 拿到這串 Array
2. 把這串 Array 要呈現的 HTML 結構想一下 (css 可再慢慢刻)
3. 寫一個 function, function 裡面畫出 HTML & 用 for loop 把 Array 裡面的 item 一個一個讀出來
4.呼叫 function

var playList = [
‘I love you’,
‘How are you’,
‘Hey hey’
];

假設畫面想呈現成一個清單,所以就會是 <ul> + <li> 的組合,可能會長這樣:

<ul>
 <li>'I love you'</li>
 <li>'I love you'></li>
</ul>

這串 function 是為了把讀到的那一串資料畫出成我要的樣子,然後印出來:

function print(message){
  document.write(message);
}

function RenderPlayList( ){
 var listContainer = ‘<ul>’;
 for( var i = 0; i < playList.length; i += 1){
 listContainer += ‘<li>’ playList[i] ‘</li>’;
 }

listContainer += ‘</ul>’
print(listContainer); //呼叫 print function 把值塞進去,HTML tag 跟內容 就會印出來
}

RenderPlayList(playlist); //最後不要忘記呼叫 function,然後要把這個 Array 的名字塞進去參數,才會呼叫到這串 Array

其他常用的 Array Method

Join():把 Array 一串 item 讀成 string

var weekends = [ ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’ ];
var weekendsString = weekends.join(‘, ‘);
console.log(weekendsString); // 會讀出 Monday, Tuesday, Wednesday….

可以用符號在 join() method 裡頭,就會直接幫忙斷字串,比如 (‘,’) 或是 (‘;’) 之類的。

concat():可以把 A list 結合 B list

假設老師有一個既有的 A 選課名單,現在又拿到有新同學加入的 B 選課名單,就可以再建一個新的名單直接把兩者合在一起:

var currentStudents = [ ‘Joan’, ‘John’, ‘Joaquin’ ];
var newStudents = [‘Samantha’, ‘Traci’, ‘Tiago’ ];
var allStudents = currentStudents.concat ( newStudents );

indexOf:去找一串 Array 上特定的 item 在第幾個位置

假設我有一串水果的 list:

var fruits = [ ‘Apple’, ‘Orange’, ‘Grapefruit’ ];
// Apple 就是 index 0
// Orange 就是 index 1

假設我想要找 Apple 有沒有在 list 裡

var position = fruits.indexOf(‘Apple’);
console.log(position); // 會回傳 0 這個值

常用的 Array 範例

假設我是一間線上雜貨店,我拿到幾個食物的品項,我現在要讓大家在網路上輸可以看有哪些食物品項,可以選擇要哪個食品,或直接離開。

現在產品清單裡有 apples, eggs, milk, cookies

先思考要做啥:
step 1 拿到食材品項,把這些它們存到清單裡變成一個變數
step 2 思考使用者途徑 (設定好變數)
打開這一頁,輸入他要看產品或是他要離開,或是輸入他要的產品,會告訴他有庫存貨沒庫存

var inStock = [ ‘apples’, ‘eggs’, ‘milk’, ‘cookies’ ];
var search;
function print(message){
document.write( ‘<p>’ + message + ‘</p>’ );
}
//print function 裡頭的 message 參數就是到時候我們跑出結果後會把結果塞回去

while(true){
search = prompt(“Search for a product that we could provide. Type ‘list’ to show all of the product and type ‘quit’ to exit”);
if (search === ‘quit’){
break;
} else if ( search === ‘list’){
print( inStock.join(‘, ‘));
} else{
if ( inStock.indexOf(search) > -1 ){
print( ‘Yes, we have ‘ + search + ‘ in the store. ‘);
} else {
print( search + ‘ is not in the store ‘ );
  }
 }
}
// while(true){} 本身是一個無限循環的 loop 就會一直跑一直跑一直跑,所以在 while(true)裡頭加了if(search === ‘quit’) 用 break 結束這個 loop,就會離開了。

Array of Array (可以想像成一比有 row 跟 column 的資料)

比如有一個名單,有每個學生的身高、體重:

var student = [
[‘height’, ‘kg’ ],
[‘height’, ‘kg’ ],
[‘height’, ‘kg’ ]
];

也就是說, student[0] 小朋友的體重跟身高拿到了, student[1]小朋友的身高體重拿到了,以此類推。

另一種結構可能是, 學生在四次考試中有 80, 90, 100, 90 四種分數,以此類推,這個結構就會是:

var grades = [
[80,90,100,90],
[80,90,100,90],
[80,90,100,90]
];

範例:我有一個播放清單,假設我現在要印出這首歌跟這個歌手是誰:

var playList = [
[‘I Did It My Way’, ‘Jamie’],
[‘I Did It My Way’, ‘Jamie’],
[‘I Did It My Way’, ‘Jamie’],
[‘I Did It My Way’, ‘Jamie’]
];

function print(message) {
document.write(message);
} //最後把資料 print 出來

function printList( songs ) {
var listHTML = ‘<ol>’;
for ( var i = 0; i < songs.length; i += 1) {
listHTML += ‘<li>’ + songs[i][0] + ‘by’ + songs[i][1] + ‘</li>’;
}

listHTML += ‘</ol>’;
print(listHTML);

}

//我們這邊要找的是第 i 個 array 的 第 0 個值跟第 1 個值
printList(playList);

範例:我有幾個問題跟答案,要請使用者回答,並根據回答正確或錯誤給予不同的結果:

var questions = [
[‘How many states are in the United States?’, 50],
[‘How many continents are there?’, 7],
[‘How many legs does an insect have?’, 6]
];

//定義變數
var correctAnswers = 0;
var question;
var answer;
var response;

var correct = [];
var wrong = [];
//最後要讀出來的 function

function print(message) {
 document.write(message);
}

//把某個 array list 畫出來(在這裡可能是 correct、wrong 或是 questions)
function buildList(arr){
  var listHTML = ‘<ol>’;
  for( var i = 0; i < arr.length; i += 1){
   listHTML += ‘<li>’ + arr[i] + ‘</li>’;
 }
  listHTML += ‘</ol>’;
  return listHTML;
}
//用 for loop 去跑我要找的資料
for (var i = 0; i < questions.length; i += 1) {
// 想好變數會是哪些資料
question = questions[i][0];
answer = questions[i][1];
response = prompt(question);
response = parseInt(response);
 if (response === answer) {
 correctAnswers += 1;
 //這個 question 增加到 correct 這個 array 上
correct.push(question);
 } else{
wrong.push(question);
//這個 question 增加到 wrong 這個 array 上
 }
}

//最後要印出的結果可以加一些東西
var html = “You got “ + correctAnswers + “ question(s) right.”
html += ‘<h2>’You got these questions correct: ‘</h2>’;
html += buildList(correct);
html += ‘<h2>’You got these questions wrong: ‘</h2>’;
html += buildList(wrong);
//呼叫 print 的 function
print(html);