[Back To Basic] Javascript - Arrays

建立陣列

1. var arrayName = [item1, item2, item3];
2. var arrayName = new Array(item1, item2, item3);

• 建議用第1種，簡單、可讀性高、執行速度較佳
• 最後一個項目最後盡量不要加逗點，IE8以下會壞掉。e.g. [item1, item2, item3,]
• typeof array的變數會回傳 object
• array的item可以放object、array、function...

存取陣列

• 取值

var fruits = ["apple","banana","grape"];

var fruit = fruits[0]; // 取得第一個元素 apple, 索引(index)從0開始數

• 設值

fruits[0] = "strawberry" // 設定陣列第一個位置的值

• 取得整個陣列的值(javascript可以這樣做)

document.getElementById("display").innerHtml = fruits;

屬性(property) - length

• 取得陣列長度
• length的值永遠比最大的index多1

e.g.

fruits.length // 取得陣列長度

fruits[0] // 取得陣列第一個元素

fruits[fruits.length - 1] // 取得陣列最後一個元素

連續存取陣列

• for

var arrayLength = fruits.length;

for(var i = 0; i < arrayLength; i++){

  console.log(fruits[i]);

}

• foreach

function myFunction(value){

  console.log(value);

}

fruits.foreach(myFunction);

新增陣列元素

1. fruits.push("mango");
2. fruits[fruits.length] = "mango";

第二種方法可能會製造陣列的漏洞，盡量用第一種方法

e.g.

fruits[99] = "mango"; 中間的 98.97...若無資料會變成undefined

Associative Arrays

javascript不支援命名索引，若使用了陣列會被重新定義為object

e.g.

var fruits = [];

fruits["name"] = "apple";

fruits["quantity"] = 5;

fruits.length; // 會回傳0

fruits[0]; // 會回傳undefined

Arrays和Objects

• Arrays
• 數字索引(number indexed)
• Objects
• 名稱索引(named indexes)

想要用名稱索引就用Objects

typeof 型別為array的變數會回傳object，那要如何知道變數是不是陣列?

var x = [];

• Array.isArray(x);
• ES5的語法，較舊的瀏覽器不支援
• 自定義isArray()

function isArray(x) {

  return x.constructor.toString().indexOf("Array") > -1;

}

• x instanceof Array