iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
1
Modern Web

JavaScript 初心者筆記系列 第 8

JavaScript 初心者筆記: 陣列簡介

還記得前面我們學到的變數嗎?當時我們反覆了解到變數是幫助我們記住資訊,但如果我們在寫程式時需要儲存一系列具有關聯性的值時,除了用變數一個一個宣告以外,難道沒有更好的方法嗎?
有的,那就是使用陣列


陣列的用處

當我們手邊有一系列具有關聯性的資料時,若一個一個宣告變數將會非常耗時,因此可以透過陣列紀錄多個數字、字串、函式等,甚至當有多個物件時也可以用陣列來記錄。陣列裡的值不需要都是相同的資料型別,同一個陣列可以儲存不同型別的資料。

陣列的寫法

如何建立陣列

建立陣列的方法就跟宣告變數一樣,也會賦予它一個名字,使用 var 關鍵字,後面接上陣列名稱。指定給陣列的值會放在方括號中,每一個值中間用逗點隔開。
範例如下:
有三個玉米田,分別種出 8 個、5 個、6 個玉米
var cornField = [8,5,6];
有兩隻狗,分別叫做 John 跟 Bob
var dogs = ['John' , 'Bob'];

如何讀取陣列的值

陣列中每一個資料項目都會被自動給予一個編號,這個編號稱為索引(index),第一個值編號為 0,第二個值編號為 1,以此類推。索引可用來存取陣列中的指定項目。

var cornField = [8,5,6];
console.log(cornField[0]);
// 得出的值就會是 8

如果在選取陣列時,沒有寫到索引值的話,讀出來的結果就不會是值,而是整個陣列的內容。

console.log(cornField);
// 讀取結果:[8,5,6]

當然,也可以用變數儲存陣列中指定項目的值,並呼叫出來。

var cornField = [8,5,6];
var cornField2 = cornField[1];
console.log(cornField2);
// 得出的值就會是 5

如何在空陣列新增值

  1. 先宣告一個空陣列
    var cornField = [];
  2. 使用 push 方法依序新增值進去
    push 也可以新增字串、函式、物件進去陣列裡喔。
cornField.push(5);
cornField.push(8);
cornField.push(6);
console.log(cornField);
// 得到的結果就會是 [5,8,6]
  1. 或是直接指定新的值
cornField[3] = 100;
// 直接新增第四個值為 100

如何修改陣列中的值

跟操作變數一樣,將新的值指定給該資料項目。
以修改陣列第一個值為例:

cornField[0] = 10;
// 把第一個值由 5 改成 10

查詢陣列中有幾個值:length

在陣列後面使用 length 特性可以得知該陣列的長度,亦即該陣列中共有幾個值。後面學到 for 迴圈時會很常用到。
console.log(cornField.length);

從陣列中過濾資料:filter()

filter 方法可以從 A 陣列中過濾出符合條件的資料,並成立新的 B 陣列來放置過濾出的資料。此方法會帶出一個匿名函式,過濾資料的條件會寫在函式的裡面,前面加一個 return,表示此函式將會回傳條件為 true 的資料。
以下範例引用自王志誠老師 a.k.a 卡斯伯的文章:JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]

原始陣列資料:

var people = [
  {
    name: 'Casper',
    like: '鍋燒意麵',
    age: 18
  },
  {
    name: 'Wang',
    like: '炒麵',
    age: 24
  },
  {
    name: 'Bobo',
    like: '蘿蔔泥',
    age: 1
  },
  {
    name: '滷蛋',
    like: '蘿蔔泥',
    age: 3
  }
];

使用 filter() 過濾資料:

var filterEmpty = people.filter(function(item, index, array){
});
console.log(filterEmpty);    // 沒有條件,會是一個空陣列
var filterAgeThan5 = people.filter(function(item, index, array){
  return item.age > 5;       // 取得大於五歲的
});
console.log(filterAgeThan5); // Casper, Wang 這兩個物件
var filterDouble = people.filter(function(item, index, array){
  return index % 2 === 1;    // 取得陣列中雙數的物件
});
console.log(filterDouble);   // Wang, 滷蛋 這兩個物件

函式中的參數 item、index、array 分別代表「原始陣列的值」、「原始陣列值的索引」、「原始陣列的名稱」,後兩者為選擇性的,可不帶入。(參考資料:Array.prototype.filter() - MDN


本來沒打算放入 filter 的介紹,因為我自己對它也不太熟而且還會爆字數,不過正好是一個逼迫自己學習的好機會就是了。
明天來聊聊物件~


上一篇
JavaScript 初心者筆記: 函式實際運作 - 回傳值與函式間互相傳遞
下一篇
JavaScript 初心者筆記: 物件簡介
系列文
JavaScript 初心者筆記30

尚未有邦友留言

立即登入留言