首頁 > web前端 > js教程 > 主體

js基礎數組的概述 數組的長度 數組的遍歷

韦小宝
發布: 2017-11-27 10:22:08
原創
2199 人瀏覽過

簡述了js中的數組,和取得js數組的長度,遍歷js中的數組,讓我們以來學習js 數組吧!

一、陣列的概述陣列就是表示一系列有序的資料的集合。

陣列的表示方法:[]。可以這樣認為只要看見方括號就是一個陣列。
數組中每一個資料之間都用逗號隔開,最後一項沒有逗號。
array:陣列

1 // 定义一个数组
2 var arr = [1,2,4,5];
3 console.log(arr[2]);
登入後複製

使用索引(index),也稱為下標,來精確的讀取、設定陣列中的某一項。數組的下標從0開始。

1 arr[index];  //读取    
设置:arr[2] = 456;
登入後複製

陣列中每一項可以是不同的資料型別。通常我們習慣書寫相同的資料類型作為一組數組。

二、陣列的長度 
陣列的資料時引用資料型態。

1 // 数组的数据类型
2 console.log(typeof arr);
登入後複製

引用型別一般都有自己的屬性與方法;

屬性:事物具有的特徵。如:人的高矮胖瘦。

方法:就是事物的行為。例如:玩電腦,睡覺。

我們可以使用打點的方法來呼叫屬性。

1 引用資料.屬性    


陣列的長度以length屬性表示。直接打點調用。

1 // 得到数组的长度
2 console.log(arr.length);
登入後複製


陣列的最後一項:下標為陣列長度減少1.

1 arr[arr.length - 1];
登入後複製

如果下標超過arr.length - 1,值不存在,輸出undefined未定義。

1 var arr = [1,23,45,2,56,1,67,89];
2 // 数组的最大下标是length -1,当超过这个下标时输出undefined
3 console.log(arr[9]);
登入後複製

我們可以透過下標給某一項賦值。如果我們給下標超過arr.length - 1的項賦值,強制賦值,強制將陣列長度拉長了。

1 var arr = [1,23,45,2,56,1,67,89];
2 arr[20] = 20;
3 console.log(arr[20]);
4 // 现在的数组长度是多少
5 console.log(arr.length);
登入後複製

雖然長度加長了,但是中間沒有被賦值的項,還是undefined。

arr.length也可以強制賦值,如果超過原來的長度,多出來的部分未賦值就是undefined,如果少於原來的長度,會把多出去的下標部分資料直接刪除。

1 var arr1 = [1,2,45,67,2,5566,67,12];
2 console.log(arr1.length);
3 arr1.length = 5;
4 console.log(arr1.length);
5 console.log(arr1);
登入後複製

三、陣列的遍歷我們可以透過某種方法,得到陣列中的每一項。這就是遍歷。

我們透過for迴圈進行陣列的遍歷。

1 var arr = [1,2,"号","",function(){},12,23,null,false];
2 // 遍历输出数组中每一项
3 for(var i = 0 ; i <= arr.length - 1 ; i ++){
4 console.log(arr);
5 }
登入後複製

案例:arr = [2,4,6,7,8];求數組中每一項的階乘然後求和。

1 // 案例
2 var arr = [2,4,6,7,8];
3 // 求阶乘和
4 // 累加器
5 var sum = 0;
6 for(var i = 0 ; i <= arr.length - 1 ; i ++){
7 // 需要一个求阶乘的函数
8 sum += jiecheng(arr);
9 }
10 console.log(sum);
11 
12 
13 // 阶乘函数
14 // 累乘器
15 function jiecheng(a){
16 var cheng = 1;
17 for(var i = 1 ; i <= a ; i ++){
18 cheng *= i;
19 }
20 return cheng;
21 }
登入後複製

以上就是 js基礎數組的概述數組的長度數組的遍歷的所有內容,簡單的講述了js數組如何獲取長度以及遍歷

#相關推薦:

JS 常見的錯誤型別小結

5個直接可以拿來用的JS實用功能程式碼片段

原生js實作可移動的提示div框原始碼

#

以上是js基礎數組的概述 數組的長度 數組的遍歷的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板