數組(Array)
概念：數組是一組數據的集合，其中每一個數據稱為數組元素，js的數組可以放任意數據類型的元素，數組是一種將一組數據元素存儲在單個變量名下的優雅方式。
示例解釋：
var num = 10 var arr = [1,2,3,4,5,'a','b','c']
一、數組的創建
數組的創建方式：
1、通過new關鍵字創建（不常用）
var 數組名 = new Array() var arr = new Array() var arr = new Array(5)
2、通過數組字面量創建（常用）
var 數組名 = [] var 數組名 = [元素1，元素2，元素3···] 如：var arr = [1,3,5,'a','c','e',7,9]
小結：
1.數組是一組數據的集合，是將一組數據存放在同一變量的優雅方式
2.數組的字面量：[ ]
3.聲明數組并賦值稱為數組的初始化
4.數組中元素可以是任意類型的數據
5.注意：數組元素為字符或字符串要加引號,不加的話解釋器會認為是變量從而報錯
二、數組元素的訪問
1.通過數組索引訪問
索引(下標)：用來存放數組元素的序號(數組下標從0開始)
我們可以通過索引來訪問、設置、修改相應的元素，注意：數組的長度可以不指定，它可以隨元素的增加自動擴容,當訪問未賦值的元素時，返回undefined。獲取方式： 數組名[索引號]
下面通過例子來演示一下：
var arr = [1,3,5,'a','b','c']----> console.log(arr)---------------->Array(6) console.log(arr[0])------------->1 console.log(arr[2])------------->5 console.log(arr[4])------------->b
console.log(arr[6])---------- -->undefined 注意：數組的下標從0開始喲?。?！
2.通過循環遍歷
請看下面代碼：
var arr = ["red","blue","green"] console.log(arr[0]) console.log(arr[1]) console.log(arr[2])
從上面代碼觀察發現，取出每一個元素只是數組下標改變而已，如果數組元素多的話，一行一行訪問速度很慢，為提高效率，我們可以用循環
var arr = ["red","blue","green"] for(var i = 0;i<arr.length;i++){ console.log(arr[i]) }
var arr = ["red","blue","green"] for(var i in arr){ console.log(arr[i]) }
以上訪問數組元素的結果是一樣的，使用循環可是很便利的
下面做兩個小案例來演示下數組的魔力吧！
案例1
使用數組對一組數求和并求平均值，思路：定義2個變量，一個存總和，一個存平均數，通過遍歷數組求和，然后除以數組長度求平均數
案例1實現代碼 var arr = [1,3,5,7,9,2,4,6,8] var sum = 0; var avg = 0; for(i=0;i<arr.length;i++){ sum += arr[i]; } console.log("sum:"+sum) avg = sum/arr.length console.log("avg:"+avg)
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
案例2
使用數組對一組數求最大值，圖例思路：把數組第一個元素賦值給max，依次遍歷比較，如果有元素大于max，則把此元素賦值給max，遍歷后比完max即為最大值
案例2實現 var arr = [1,3,5,7,9,2,4,6,8] var max=arr[0]; for(i=01;i<arr.length;i++){ if(arr[i]>max){ max=arr[i] } } console.log("max:"+max)
三、數組的操作
1.數組長度及數組擴容
-
使用length屬性獲取數組長度
var arr = [1,2,3,4,5]; console.log(arr.length) 通常數組的length屬性跟數組遍歷一起使用，使用循環遍歷數組要注意
數組元素最后一位的索引下標是數組長度-1(arr.length-1)
-
使用length屬性實現數組擴容
var arr = ['a','b','c','d']; console.log(arr.length) console.log(arr[3]) arr.length=6; console.log(arr) console.log(arr[4]) console.log(arr[5])
輸出結果入圖
3. 通過索引號實現數組擴容
var arr = ['a','b','c','d']; console.log(arr.length) console.log(arr[3]) arr[4]='A' arr[5]='B' arr[10] = 'C' console.log(arr) console.log(arr[6])
運行結果如圖，可以發現，JS數組可以直接通過索引號進行擴容，而未賦值的元素默認為empty,返回結果是undefined，如果元素不存在，則在數組后面追加元素，若已經存在，則替換數組元素–>arr[3]
注意：不要直接給數組名賦值，否則會覆蓋原有數組！
var arr=[1,2,3,4,5] console.log(arr) arr="有點意思！" console.log(arr)
2.數組的常用方法
1. shift()刪除數組中的第一個元素并且返回被刪除的元素，
同時其他元素的索引向前移動一位
var fruits = ['banana', 'orange', 'apple', 'mango'] console.log(fruits) var x = fruits.shift(); console.log(fruits) console.log(x)
結果如圖：
2. pop()刪除數組中的最后一個元素并且返回被刪除的元素
var fruits = ['banana', 'orange', 'apple', 'mango'] console.log(fruits) var x = fruits.pop(); console.log(fruits) console.log(x)
結果如圖：
3. unshift(參數1,參數2···)向數組的開頭添加一個或者更多的元素并且返回新的長度，
同時數組元素的索引向后移動
var fruits = ['orange', 'apple', 'mango'] console.log(fruits) var x = fruits.unshift('banana'); console.log(fruits) console.log(x)
結果如圖：
4. push()向數組末尾增添一個或者多個數組元素，并且返回數組的長度
var fruits = ['orange', 'apple', 'mango'] console.log(fruits) var x = fruits.push('banana'); console.log(fruits) console.log(x) var x = fruits.push('pineapple','strawberry'); console.log(fruits) console.log(x)
結果如圖
5. reverse()翻轉數組
var fruits = ['orange', 'apple', 'mango'] console.log(fruits); console.log(fruits.reverse())
結果如圖：
6. sort()數組排序，對字符串排序，比較的是ASCII碼的順序
1>如["a", "A", "1"], 按ASCII碼順序排列后為["1", "A", "a"]（數字>大寫字母>小寫字母）
2>如["ab", "ac", "abc"], 排序后為["ab", "abc", "ac"]
3>字符串數字：如["10", "5", "18" , "50"], 排序后為["10", "18", "5", "50"]
比較方法：
（第一位相同比較第二位，b>c，因此ab和abc在ac之前；再比較ab與abc, ab沒有第三位，因此排在abc之前)!!!
如需要對字符串形式的數字進行排序，可以采用以下兩種方式：
1、統一格式，補足位數，如["10", "5", "18" , "50"]中, 將"5"寫為"05"
2、轉換為數字，使用特殊方法對數字排序
var arr1 = ["a", "A", "1"] var arr2 = ["ab", "ac", "abc"] var arr3 = ["10", "5", "18", "50"] var arr4 = ["10", "05", "18", "50"] console.log(arr1.sort()); console.log(arr2.sort()); console.log(arr3.sort()); console.log("數字排序(5改成'05'):" + arr4.sort());
結果如圖：
3.拓展：數字排序
1、匿名函數當做參數使用數組排序(一維數組)
//語法格式：
arr.sort ( function (a, b) { //arr為需要排序的數組名
return a - b //升序
})
根據比較函數返回值正負來決定排列順序，為正升序，為負降序
使用如下：
function sortby(a, b) { return a - b } var arr = [10, 5, 8, 50]; arr.sort(sortby) console.log(arr); 結果如圖：
2、匿名函數當做參數使用數組排序(二維數組)
//語法格式：
arr.sort (function (a, b) { //arr為需要排序的數組名
return a[1] - b [1] //升序，降序改為b[1]-a[1]
})
使用如下：
function sortby(a, b) { return a[1] - b[1] } var arr = [["Alice", "95"], ["Bob", "80"], ["Cart", "100"]] arr.sort(sortby) console.log(arr); 結果如圖：
3.拓展：數組篩選(巧用length屬性)
將數組[2,4,5,6,8,9,12,15,3,7,26,14]中大于10的元素存入新數組
//分析：
1、創建一個數組arr=[2,4,5,6,8,9,12,15,3,7,26,14]
2、創建一個新數組newArr來存放大于10的元素
3、遍歷舊數組，找出大于10的元素
4、依次添加到新數組中
var arr = [2,4,5,6,8,9,12,15,3,7,26,14] var newArr=[] var j =0 ; for(var i = 0 ;i<arr.length;i++){ if(arr[i]>10){ newArr[j]=arr[i] j++; } } console.log(newArr)
var arr = [2,4,5,6,8,9,12,15,3,7,26,14] var newArr=[] for(var i = 0 ;i<arr.length;i++){ if(arr[i]>10){ newArr[newArr.length]=arr[i] } } console.log(newArr)
結果如圖：
四、二維數組
概念：二維數組就是一維數組的每個元素是一個一維數組
1.二維數組的創建與訪問
// 創建與訪問
var fruits = [["1", "Banana"], ["2", "Orange"]]; var element = ["3", "Apple"]; fruits[2] = element; console.log(fruits); console.log(fruits[0]); console.log(fruits[0][1]);
結果如圖：
2.遍歷二維數組
通過for in循環遍歷二維數組
var fruits = [["1", "Banana"], ["2", "Orange"], ["3", "Apple"]]; for (var i in fruits) { for (var j in fruits[i]) { console.log(fruits[i][j]); } }
結果如圖：
小結：二維數組跟一維數組使用差不多，只是稍微麻煩一點，訪問二維數組的具體元素值：arr[外層數組索引][內層數組索引]
遍歷二維數組使用雙重for循環
3.使用二維數組進行排序(冒泡排序法)
圖例解釋：
var arr = [5,4，3,2,1]; for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length - 1 - i; j++) { if (arr[j] > arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr);
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
結果如圖：
總結
本次筆記主要記錄了數組的基本使用，但是數組的妙用遠不止這些，需要我們自己去探索。
轉自：csdn論壇 作者：想要搞錢
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
