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