2021-4-9 前端達人
概念：數組是一組數據的集合，其中每一個數據稱為數組元素，js的數組可以放任意數據類型的元素，數組是一種將一組數據元素存儲在單個變量名下的優雅方式。
示例解釋：
//普通變量名只能存一個數據 var num = 10 //數組存儲一組數據 var arr = [1,2,3,4,5,'a','b','c']
數組的創建方式：
1、通過new關鍵字創建（不常用）
//注意A要大寫 var 數組名 = new Array() var arr = new Array()//創建一個空數組 var arr = new Array(5)//創建一個長度為5的空數組
2、通過數組字面量創建（常用）
//1、使用數組字面量創建空數組 var 數組名 = [] //2、使用數組字面量創建帶初始值的數組 var 數組名 = [元素1，元素2，元素3···] 如：var arr = [1,3,5,'a','c','e',7,9]//數組元素可以是任意數據類型的
小結：
1.數組是一組數據的集合，是將一組數據存放在同一變量的優雅方式
2.數組的字面量：[ ]
3.聲明數組并賦值稱為數組的初始化
4.數組中元素可以是任意類型的數據
5.注意：數組元素為字符或字符串要加引號,不加的話解釋器會認為是變量從而報錯
索引(下標)：用來存放數組元素的序號(數組下標從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//索引下標6沒有元素，所以返回undefined 注意：數組的下標從0開始喲！！！
請看下面代碼：
var arr = ["red","blue","green"] console.log(arr[0]) console.log(arr[1]) console.log(arr[2]) //輸出結果：red blue green
從上面代碼觀察發現，取出每一個元素只是數組下標改變而已，如果數組元素多的話，一行一行訪問速度很慢，為提高效率，我們可以用循環
//1、使用for循環遍歷 var arr = ["red","blue","green"] for(var i = 0;i<arr.length;i++){//length是數組的屬性，即為數組長度，沒有() console.log(arr[i]) } //輸出結果：red blue green
//2、使用for in循環遍歷 var arr = ["red","blue","green"] for(var i in arr){ console.log(arr[i]) } //輸出結果：red blue green
以上訪問數組元素的結果是一樣的，使用循環可是很便利的
下面做兩個小案例來演示下數組的魔力吧！
案例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]; //相當于 sum = sum + arr[i] } console.log("sum:"+sum) //打印sum的值，即所有數的和 avg = sum/arr.length //求平均值并賦值給avg(arr.lengt是數組的個數) console.log("avg:"+avg) //打印avg的值，即所有數的平均數 //輸出結果：sum:45 avg:5(這里僅是演示，沒有對結果為多位小數進行處理)
案例2
使用數組對一組數求最大值，圖例思路：把數組第一個元素賦值給max，依次遍歷比較，如果有元素大于max，則把此元素賦值給max，遍歷后比完max即為最大值
案例2實現 //使用數組對一組數求最大值 var arr = [1,3,5,7,9,2,4,6,8] //聲明一個數組并初始化 var max=arr[0]; //創建一個變量來存取最大值,把arr[0],即1賦值給max for(i=01;i<arr.length;i++){ if(arr[i]>max){ max=arr[i]//判斷是否有數組元素大于max，有的話就把大于max的值賦值給max } } console.log("max:"+max) //打印max的值，即數組中最大值 //輸出結果：max:9
// 注意！length是屬性，不是函數，所以不用加() var arr = [1,2,3,4,5]; console.log(arr.length) //輸出結果：5 通常數組的length屬性跟數組遍歷一起使用，使用循環遍歷數組要注意
數組元素最后一位的索引下標是數組長度-1(arr.length-1)
// 創建數組，通過length屬性擴容數組 var arr = ['a','b','c','d']; console.log(arr.length)//輸出結果為4，數組長度為4 console.log(arr[3]) //輸出數組最后一位元素的值為d arr.length=6; //數組長度擴容為6 console.log(arr) //輸出結果為6，數組長度為6，第四第五個元素的值為empty console.log(arr[4]) //未賦值，默認為undefined console.log(arr[5]) //未賦值，默認為undefined
輸出結果入圖
3. 通過索引號實現數組擴容
// 創建數組，通過索引號擴容數組 var arr = ['a','b','c','d']; console.log(arr.length)//輸出結果為4，數組長度為4 console.log(arr[3]) //輸出數組最后一位元素的值為d arr[4]='A' //給第五個元素進行賦值,因為第5個元素沒被占用，所以會在數組后面追加元素 arr[5]='B' //給第六個元素進行賦值 arr[10] = 'C' //給第11個元素進行賦值 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)
1. shift()刪除數組中的第一個元素并且返回被刪除的元素，
同時其他元素的索引向前移動一位
var fruits = ['banana', 'orange', 'apple', 'mango'] console.log(fruits) //打印原數組 var x = fruits.shift(); //首元素刪除 console.log(fruits) //刪除后的數組，數組元素向前索引移動一位 console.log(x) //打印被刪除元素的值banana
結果如圖：
2. pop()刪除數組中的最后一個元素并且返回被刪除的元素
var fruits = ['banana', 'orange', 'apple', 'mango'] console.log(fruits) //打印原數組 var x = fruits.pop(); //末尾元素刪除 console.log(fruits) //刪除后的數組 console.log(x) //打印被刪除元素的值mango
結果如圖：
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()); //比較方法：按ASCII碼比較排序 console.log(arr3.sort()); console.log("數字排序(5改成'05'):" + arr4.sort());
結果如圖：
1、匿名函數當做參數使用數組排序(一維數組)
//語法格式：
arr.sort ( function (a, b) { //arr為需要排序的數組名
return a - b //升序
})
根據比較函數返回值正負來決定排列順序，為正升序，為負降序
使用如下：
function sortby(a, b) { return a - b //升序 } //降序就改成return b-a 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] //升序 } //降序就改成return b-a var arr = [["Alice", "95"], ["Bob", "80"], ["Cart", "100"]] arr.sort(sortby)//把排序匿名函數當做參數進行調用 console.log(arr);//輸出排序后的結果 //匿名函數的函數名任意 結果如圖：
將數組[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、依次添加到新數組中
// 方法1，通過變量來增加數組長度 var arr = [2,4,5,6,8,9,12,15,3,7,26,14] //創建一個數組 var newArr=[] //創建空的新數組，用于存放大于10的元素 var j =0 ; //定義變量，用于增加新數組的長度 for(var i = 0 ;i<arr.length;i++){ //for循環遍歷數組 if(arr[i]>10){ //判斷數組元素是否大于10 newArr[j]=arr[i] //如果arr數組元素>10，則存入新數組 j++; //當存入元素，長度+1，即j++ } } console.log(newArr)//打印新數組
// 方法2，巧用length屬性 var arr = [2,4,5,6,8,9,12,15,3,7,26,14] //創建一個數組 var newArr=[] //創建空的新數組，用于存放大于10的元素 for(var i = 0 ;i<arr.length;i++){ //for循環遍歷數組 if(arr[i]>10){ //判斷數組元素是否大于10 newArr[newArr.length]=arr[i]//如果arr數組元素>10，則存入新數組 } //巧用length屬性，數組索引從0開始增加 } console.log(newArr)//打印新數組
結果如圖：
概念：二維數組就是一維數組的每個元素是一個一維數組
// 創建與訪問
var fruits = [["1", "Banana"], ["2", "Orange"]];//創建二維數組 var element = ["3", "Apple"]; fruits[2] = element; //給第三個元素賦值 console.log(fruits); //打印二維數組 console.log(fruits[0]); // ["1", "Banana"]//打印第一個元素(數組) console.log(fruits[0][1]); // "Banana" //打印第一個元素的第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循環
圖例解釋：
//代碼實現如下 var arr = [5,4，3,2,1]; for (var i = 0; i < arr.length - 1; i++) {//外層循環控制交換趟數，趟數為數組長度-1 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);//輸出排序后的結果
結果如圖：
本次筆記主要記錄了數組的基本使用，但是數組的妙用遠不止這些，需要我們自己去探索。
轉自：csdn論壇 作者：想要搞錢
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn