一篇文章帶你詳細(xì)了解JavaScript數(shù)組
數(shù)組:是一組有序的數(shù)據(jù)
一、數(shù)組的作用:
可以一次性存儲多個數(shù)據(jù)
二、數(shù)組的定義:
1.通過構(gòu)造函數(shù)創(chuàng)建數(shù)組
語法:
var 數(shù)組名=new Array();
var array=new Array();//定義了一個數(shù)組
//通過構(gòu)造函數(shù)的方式定義一個數(shù)組 var array=new Array();//沒有數(shù)據(jù)的空數(shù)組
數(shù)組中的數(shù)據(jù)如果直接輸出,那么就可以直接把數(shù)組中的數(shù)據(jù)顯示出來;如果沒有數(shù)據(jù)就看不到數(shù)據(jù)。
var 數(shù)組名=new Array(長度);
如果數(shù)組中沒有數(shù)據(jù),但是有長度,數(shù)組中的每個值就是undefined。
用構(gòu)造函數(shù)的方式創(chuàng)建數(shù)組的時(shí)候,如果是Array(一個數(shù)字)→指數(shù)組的長度(即數(shù)組元素的個數(shù));如果是Array(多個值)→指這個數(shù)組中就有數(shù)據(jù)了,數(shù)組的長度就是這些數(shù)據(jù)的個數(shù)。
2.通過字面量的方式創(chuàng)建數(shù)組
語法:
var 數(shù)組名=[ ];//空數(shù)組
var arr=[]; console.log(arr);//Array[0]
總結(jié):
無論是構(gòu)造函數(shù)的方式,還是字面量的方式定義的數(shù)組,如果有長度,那么默認(rèn)是undefined
三、數(shù)組元素
數(shù)組中存儲的每個數(shù)據(jù),都可以叫數(shù)組的元素
比如:數(shù)組中存儲了3個數(shù)組,那么這個數(shù)組就有3個元素
四、數(shù)組長度
數(shù)組長度就是元素的個數(shù)
比如:有3個元素,就說這個數(shù)組的長度是3
var arr1=new Array();//用構(gòu)造函數(shù)的方式創(chuàng)建了一個空數(shù)組 var arrr2=new Array(5);//用構(gòu)造函數(shù)的方式創(chuàng)建了一個長度為5的數(shù)組,這個數(shù)組有5個值,且都為undefined var arr3=new Array(10,20,30,40,50);//構(gòu)造函數(shù)的方式創(chuàng)建了一個長度為5,每個值都有意義的數(shù)組
五、數(shù)組索引(下標(biāo))
數(shù)組的索引,或者數(shù)組的下標(biāo)。是用來存儲或訪問我數(shù)組中的數(shù)據(jù),從0開始到長度-1結(jié)束
如何設(shè)置數(shù)組中某個位置的值:
數(shù)組名[下標(biāo)]=值;
例如:arr[3]=100;
如何獲取數(shù)組中某個位置的值:
var result=數(shù)組名[下標(biāo)];
console.log(result);
//獲取數(shù)組中第4個值 var arr =new Array(10,20,30,40,100); console.log(arr[4]);//100 //將下標(biāo)為3的值改為1000 arr[3]=1000; //用字面量的方式獲取數(shù)組的長度 var arr1=[10,20,30,40,50,12]; console.log(arr.length);//6
數(shù)組長度和索引的關(guān)系:
長度-1=索引
六、數(shù)組注意的問題
1.數(shù)組中存儲的數(shù)據(jù)可以是不一樣的
arr=[10,"哈哈",true,null,undefined,new Object()];
2.數(shù)組的長度是可以改變的
var arr = []; // 通過索引來設(shè)置數(shù)組中的元素的值 arr[0] = 10; arr[1] = 20; console.log(arr.length); //2 // 通過索引的方式獲取元素的值 console.log(arr[2]); //undefined
3.總之
var arr1 = new Array(); //空數(shù)組 var arr2 = new Array(5); //長度為5的數(shù)組,每個數(shù)組的值是undefined var arr3 = new Array(1, 2, 3, 4, 5); //長度為5的數(shù)組,每個值都有意義 var arr4 = []; //空數(shù)組 var arr5 = [1, 2, 3]; //長度為3的數(shù)組 var arr6 = ["red", "blue", 1, true]; //長度為4,元素?cái)?shù)據(jù)類型不一樣的數(shù)組 var arr7 = []; // 聲明一個空數(shù)組,給數(shù)組中添加值 arr7[0] = 10; arr7[1] = 30;
七、遍歷數(shù)組
1.正序遍歷
var arr=[10,20,30,40,50,60,70,80,90,100]; // i表示數(shù)組的下標(biāo) // 最后一個數(shù)的下標(biāo)等于數(shù)組的長度減一 for(var i=0;i<arr.length;i++){ console.log(arr[i]); }
2.倒序遍歷
var arr = [10, 20, 30, 40, 100]; // i最開始輸出最后一個數(shù),到0的時(shí)候結(jié)束循環(huán) for (var i = arr.length - 1; i >= 0; i--) { console.log(arr[i]); }
八、數(shù)組中常見的案例
1.求數(shù)組中所有元素的和
var arr = [10, 20, 30, 40, 100]; // 用來存儲相加后的總和 var sum = 0; for (var i = 0; i < arr.length; i++) { sum += arr[i]; } console.log(sum);//200
2.求數(shù)組的平均數(shù)
var arr = [10, 20, 30, 40, 100]; // 用來存儲相加后的總和 var sum = 0; for (var i = 0; i < arr.length; i++) { sum += arr[i]; } console.log(sum / arr.length); //40
3.求數(shù)組的最大值和最小值
var arr = [10, 20, 30, 40, 100]; // 假設(shè)數(shù)組中第一個數(shù)是最大的,并將它賦值給一個變量 var max = arr[0]; // 假設(shè)數(shù)組中第一個數(shù)是最小的,并將它賦值給一個變量 var min = arr[0]; for (var i = 0; i < arr.length; i++) { //用數(shù)組中的值和max進(jìn)行比較,如果比max大,則將那個數(shù)賦值給max if (max < arr[i]) { max = arr[i]; } //用數(shù)組中的值和min進(jìn)行比較,如果比min小,則將那個數(shù)賦值給min if (min > arr[i]) { min = arr[i]; } } console.log(max); //100 console.log(min); //10
4.冒泡排序
var arr = [10, 30, 20, 65, 40, 8, 100]; //由小到大排序 for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - i; j++) { if (arr[j] > arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr); //由大到小排序 for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - i; j++) { if (arr[j] < arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr);
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JavaScript高級程序設(shè)計(jì)(第三版)學(xué)習(xí)筆記1~5章
這篇文章主要介紹了JavaScript高級程序設(shè)計(jì)(第三版)學(xué)習(xí)筆記1~5章 的相關(guān)資料,需要的朋友可以參考下2016-03-03JS實(shí)現(xiàn)的自定義水平滾動字體插件完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義水平滾動字體插件,以完整實(shí)例形式分析了javascript自定義水平滾動字體插件的定義、原理與使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程
這篇文章主要介紹了webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06Axios+Spring?Boot實(shí)現(xiàn)文件上傳和下載
這篇文章主要為大家詳細(xì)介紹了Axios+Spring?Boot實(shí)現(xiàn)文件上傳和下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08TypeScript利用TS封裝Axios實(shí)戰(zhàn)
這篇文章主要介紹了TypeScript利用TS封裝Axios實(shí)戰(zhàn),TypeScript封裝一遍Axios,能進(jìn)一步鞏固TypeScript的基礎(chǔ)知識,需要的小伙伴可以參考一下2022-06-06