3.9 陣列(Array)

在 javascript/practice 資料夾下，建立 array.html 來練習。

陣列(Array)主要用來在一個變數中，儲存多個資料。

基本觀念

建立陣列

請在 console 中查看以下的輸出結果：

var my_arr = [1, 2, "其它文字", "test"];  // 第一種寫法
var my_arr2 = new Array("1", "測試", 2); // 第二種寫法

console.log(my_arr);
console.log(my_arr2);

上面有兩種寫法， 都是可以的，第一種較常用，請常使用第一種的寫法。

如果要建立空的陣列：

var my_arr = [];  // 第一種寫法
var my_arr2 = new Array(); // 第二種寫法

陣列個數

var my_arr = [1, 2, "其它文字", "test"];
console.log(my_arr);

在 console 中觀察，如下圖：

上圖的 length 就是該陣列的個數，我們可以透過 my_arr.length 來取得：

var my_arr = [1, 2, "其它文字", "test"];

console.log(my_arr); // [1, 2, "其它文字", "test"]
console.log("my_arr 陣列個數有 " + my_arr.length + " 個"); // my_arr 陣列個數有 4 個

陣列索引及取值

陣列索引：從 0 開始，代表陣列裡的第 1 項。再來是 1，代表陣列裡的第 2 項。

陣列索引對應的值，參考下例：

var my_arr = [1, 2, "其它文字", "test"];

console.log(my_arr[0]); // 1
console.log(my_arr[1]); // 2
console.log(my_arr[2]); // "其它文字"
console.log(my_arr[3]); // "test"

如果透過 length 來取得陣列裡的最後一項是什麼，該怎麼寫？

改變陣列某項的值

透過指定某個索引值，然後指定值：

var my_arr = [1, 2, "其它文字", "test"];
my_arr[1] = "abc";

console.log(my_arr); // [1, "abc", "其它文字", "test"]

陣列基本操作

push()

新增資料到陣列的最後一項。例：

var my_arr = [1, 2, "其它文字", "test"];
my_arr.push("新項目"); // 新增一項到最後面
my_arr.push(101);     // 新增一項到最後面

console.log(my_arr); // [1, 2, "其它文字", "test", "新項目", 101]

其它參考寫法(不建議，但可以瞭解一下)：

var my_arr = [1, 2, "其它文字", "test"];
my_arr[my_arr.length] = "新項目";

console.log(my_arr); // [1, 2, "其它文字", "test", "新項目"] 

如果寫以下這樣，發生什麼事，請觀察看看(應該要避免這種情況的發生)：

var my_arr = [1, 2, "其它文字", "test"];
my_arr[6] = "新項目";

console.log(my_arr); // [1, 2, "其它文字", "test", undefined, undefined, "新項目"]

pop()

移除陣列的最後一項。例：

var my_arr = [1, 2, "其它文字", "test"];
my_arr.pop(); // 移除陣列裡的最後一項

console.log(my_arr); // [1, 2, "其它文字"]

如果是空的陣列，執行 pop() 呢？

var my_arr = [];
my_arr.pop();

console.log(my_arr); // []，得知結果仍是空陣列

unshift()

新增資料到陣列索引值為 0 的那項，其它往後移。例：

var my_arr = [1, 2, "其它文字", "test"];
my_arr.unshift("新項目"); // 新增至陣列索引值為 0 的那項

console.log(my_arr); // ["新項目", 1, 2, "其它文字", "test"]

shift()

移除陣列裡索引值為 0 的那項，其它往前移。例：

var my_arr = [1, 2, "其它文字", "test"];
my_arr.shift(); // 移除陣列索引值為 0 的那項

console.log(my_arr); // [2, "其它文字", "test"]

splice()

此函式參數說明：

• 第一個參數：新增資料到陣列的哪個索引值。

• 第二個參數：有幾個元素要被移除。

• 後面的參數：表示要新增的資料。

新增資料(元素)，到陣列的某處。例：

var my_arr = [1, 2, "其它文字", "test"];
my_arr.splice(2, 0, "新的第一項", "新的第二項");

console.log(my_arr);// [1, 2, "新的第一項", "新的第二項", "其它文字", "test"]

移除資料(元素)：

var my_arr = [1, 2, "其它文字", "test"];
my_arr.splice(2, 1);

console.log(my_arr); // [1, 2, "test"]

不好的做法(因為會遺留 undefined)：

var my_arr = [1, 2, "其它文字", "test"];
delete my_arr[2]; // 使用 delete 關鍵字(參考)

console.log(my_arr); // [1, 2, undefined, "test"]
console.log(my_arr[2]); // undefined

其它陣列相關函式

toString()

將陣列裡的各個資料，全部合併，變成一個字串，以半形逗號分隔。要注意的是，原陣列並不會有任何影響，而是回傳結果。例：

var my_arr = [1, 2, "其它文字", "test"];
var my_arr_string = my_arr.toString();

console.log(my_arr_string); // 1,2,其它文字,test
console.log(my_arr); // [1, 2, "其它文字", "test"]

join()

與上例的 toString 方法相同，差別在於透過 join() 方法，我們可以指定其它符號來當做分隔。例：

var my_arr = [1, 2, "其它文字", "test"];
var my_arr_string = my_arr.join("_");

console.log(my_arr_string); // 1_2_其它文字_test
console.log(my_arr); // [1, 2, "其它文字", "test"]

slice()

以下的這行 my_arr.slice(1); ，表示從索引值 1 開始，然後一直到陣列的最後一個，全部取出來，回傳新陣列。例：

var my_arr = [1, 2, "其它文字", "test"];
var my_arr_slice = my_arr.slice(1);

console.log(my_arr_slice); // [2, "其它文字", "test"]
console.log(my_arr);       // [1, 2, "其它文字", "test"]

以下的這行 my_arr.slice(1, 3); ，指的意思是從索引值 1 開始，一直取到索引值 3(但不包含)，回傳新陣列。例：

var my_arr = [1, 2, "其它文字", "test"];
var my_arr_slice = my_arr.slice(1, 3);

console.log(my_arr_slice); // [2, "其它文字"]
console.log(my_arr);       // [1, 2, "其它文字", "test"]

若想完全複製一個新的陣列，slice() 函式可不帶任何參數：

var my_arr = [1, 2, "其它文字", "test"];
var my_arr_slice = my_arr.slice();

console.log(my_arr);
console.log(my_arr_slice);

concat()

陣列合併。會回傳新陣列，不會影響到原來的陣列。例：

var my_arr1 = [1, 2, "其它文字", "test"];
var my_arr2 = ["a", "b", "c"];
var merge_arr = my_arr1.concat(my_arr2);

console.log(my_arr1);   // [1, 2, "其它文字", "test"];
console.log(my_arr2);   // ["a", "b", "c"];
console.log(merge_arr); // [1, 2, "其它文字", "test", "a", "b", "c"]

合併多個陣列(只要在 concat() 函式後面繼續往後加即可)：

var my_arr1 = [1, 2, "其它文字", "test"];
var my_arr2 = ["a", "b", "c"];
var my_arr3 = ["z"];
var merge_arr = my_arr1.concat(my_arr2, my_arr3);

console.log(my_arr1); // [1, 2, "其它文字", "test"];
console.log(my_arr2); // ["a", "b", "c"];
console.log(my_arr3); // ["z"]

console.log(merge_arr);
// [1, 2, "其它文字", "test", "a", "b", "c", "z"]

indexOf()

在陣列當中，找某個項目的索引值。如果找不到，就回傳數值 -1。例：

var my_arr = ["a", "b", "c"];
console.log( my_arr.indexOf("a") ); // 0
console.log( my_arr.indexOf("b") ); // 1
console.log( my_arr.indexOf("c") ); // 2
console.log( my_arr.indexOf("d") ); // -1

includes()

用來判斷陣列裡是否有某個項目，如果有，就回傳 true，反之，就回傳 false。

例：

var my_arr = ["a", "b", "c"];
console.log( my_arr.includes("a") ); // true
console.log( my_arr.includes("d") ); // false

藉由這個例子，執行以下程式觀察看看：

var my_arr = ["a", "b", "c"];
var has_item = my_arr.includes("a"); // true

if(has_item){
  console.log("有執行到這行程式");
}

練習 1：算平均數

將以下的陣列裡的數值，算出平均數，並四捨五入到小數點第二位：

var students_score = [50, 30, 87, 99, 71, 78];

參考作法：

累積自己的函式庫 my_funcs.js。

練習 2：陣列移除重覆的項目

提供以下原始碼：

var line_ids = ["232fsda", "fsafsdf", "barwr", "232fsda", "98yfsae", "barwr"];

var line_ids_unique;

// 程式寫在這

console.log(line_ids_unique);

撰寫 JS 語法，執行迴圈，將重覆的 line_id 移除。

line_ids_unique 的印出結果如下：

["232fsda", "fsafsdf", "barwr", "98yfsae"]

參考作法：

累積自己的函式庫 my_funcs.js。