之前學習的資料型別,只能儲存一個值(比如:Number/String)。我想在一個變數中儲存多個值,應該如何儲存?
所謂陣列,就是將多個元素(通常是同一型別)按一定順序排列放到一個集合中,那麼這個集合我們就稱之為陣列。
1.1 陣列的建立
// 字面量方式建立陣列
var arr1 = []; //空陣列
// 建立一個包含3個數值的陣列,多個陣列項以逗號隔開
var arr2 = [1, 3, 4];
// 建立一個包含2個字串的陣列
var arr3 = ['a', 'c'];
console.log(arr1);
console.log(arr2);
// 建構函式方式建立陣列
var a1 = new Array(); //空陣列
var a2 = new Array('1',2,'h'); //包含三個元素的陣列
console.log(a1);
console.log(a2);
// 可以透過陣列的length屬性獲取陣列的長度
console.log(arr3.length);
// 可以設定length屬性改變陣列中元素的個數
arr3.length = 0;
console.log(arr3[0]);//undefined
思考:二維陣列什麼樣?
特別注意:JS中不像PHP,沒有關聯陣列.
1.2 獲取陣列元素
// 格式:陣列名[下標] 下標又稱索引
// 下標從0開始
// 功能:獲取陣列對應下標的那個值,如果下標不存在,則返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0]; // red
arr[2]; // blue
arr[3]; // 這個陣列的最大下標為2,因此返回undefined
1.3 遍歷陣列
遍歷:遍及所有,對陣列的每一個元素都訪問一次就叫遍歷。
for迴圈陣列遍歷的基本語法:
for(var i = 0; i < arr.length; i++) {
// 陣列遍歷的固定結構
}
for迴圈示例:
var arr1 = [1, 3, 4];
for(var i = 0;i<arr1.length;i++){
console.log(arr1[i]);
}
whil迴圈示例:
var arr1 = [1, 3, 4];
var i = 0;
while(i<arr1.length){
console.log(arr1[i]);
i++;
}
1.4 為陣列新增元素
// 格式:陣列名[下標/索引] = 值;
// 如果下標有對應的值,會把原來的值覆蓋,如果下標不存在,會給陣列新增一個元素。
var arr = ["red", "green", "blue"];
// 把red替換成了yellow
arr[0] = "yellow";
// 給陣列新增加了一個pink的值
arr[3] = "pink";
1.5 陣列操作案例
案例1:求陣列中的所有數的和
//求和
var arr = [10, 20, 30, 40, 50];
//定義變數儲存和
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log("和為:" + sum);
案例2:獲取陣列中的最大值
//最大值
var arr = [10, 20, 30, 40, 50, 60];
//假設這個變數中的值是最大的
var maxNum = arr[0];
//遍歷陣列
for (var i = 0; i < arr.length; i++) {
//判斷
if (maxNum < arr[i]) {
maxNum = arr[i];
}
}
console.log("最大值是:" + maxNum);
案例3: 遍歷出陣列中所有的偶數
// 遍歷出陣列中所有的偶數
var arr = [1,2,3,4,5,6,7];
for(var i=0;i<arr.length;i++){
//判斷
if(arr[i]%2==0){
console.log(arr[i]);
}
}
案例4:將陣列轉為字串並以 | 分割
//把陣列中的每個名字後面拼接一個|然後以字串的方式輸出
var names = ["卡卡西", "佐助", "鳳姐", "鳴人", "黑山老妖"];
var str = "";//空的字串,用來儲存最後的拼接的結果的字串
//不停的遍歷陣列的資料,並且拼接字串
for (var i = 0; i < names.length - 1; i++) {
str += names[i] + "|";//拼接字串的方式
}
str += names[names.length - 1];
console.log(str);
本作品採用《CC 協議》,轉載必須註明作者和本文連結