1. 程式人生 > 實用技巧 >js陣列及其遍歷方式

js陣列及其遍歷方式

JS陣列可以看作一個特殊的物件,有屬性和值

陣列的定義:

  let arr=[1,2,"abc",true],JS是弱型別語言,陣列中元素可以是不同型別的,boolean型別放入值就是對應的字串true或false

 let arr=[1,"a",true];
        for(let i=0;i<arr.length;i++){
            console.log(typeof arr[i]);
            console.log(arr[i]);
        }

          

length屬性:

  表示陣列的長度,元素的個數,length屬性是可變的,這一點需要特別注意。當length屬性被設定得更大時,整個陣列的狀態事實上不會發生變化,僅僅是length屬性變大;當length屬性被設定得比原來小時,則原先陣列中索引大於或等於length的元素的值全部被丟失

     let arr=[1,"a",false];
        console.log(arr[2]);
        arr.length=2;
        console.log(arr[2]);

可以看出,將length設定到小於定義時,值將丟失,顯示未undefined,同理,增大length,值預設為undefined

陣列的遍歷:

let arr=[1,2,"abc",true],陣列預設的索引是從0開始的數字

方式1:普通for迴圈

   for(let i=0;i<arr.length;i++){
  console.log(arr[i]);
}

可以遍歷到索引為數字(能轉成數字的字串)的元素(包含undefined),索引的型別是其他的,遍歷不到

 let arr=[1,2,"a",false];
        for(let i=0;i<arr.length;i++){
            console.log(arr[i]);
        }

當進行"新增元素"的操作時:

let arr=[1,2,"a",false];
        arr[8]=9;//1
        arr["8"]=9;//2
        arr["adc"]="abc";//3
        for(let i=0;i<arr.length;i++){
            console.log(arr[i]);
        }

//1 //2 元素自動補undefined,索引為數字,或者能轉為字串的元素(“3”,“8”,“12”)

//3 普通for不支援非“數字”索引

方式2:for~in

   for(let key in arr){

}

將陣列作為物件遍歷其中的屬性,取值arr[key]

let arr=[1,2,"a",false];
        arr[8]=9;//1
        arr["8"]=9;//2
        arr["adc"]="abc";//3
        for (let key in arr) {
            console.log(key+":"+arr[key]);
        }

可以看出,key為下標,如果是在定義時的元素,那麼下標就是數字索引,如果是“後來增加”的元素(特別注意的是此時不會增加undefinded元素),那麼索引就是“增加”時在方括號內指定的

方式3:for~of(ES6引入)

    for(let num of nums){

  }

將陣列中的元素直接獲取, 可以遍歷到索引為數字(能轉成數字的字串)的元素,包含undefined,索引的型別是其他的,遍歷不到

 let arr=[1,2,"a",false];
        arr[8]=9;//1
        arr["8"]=9;//2
        arr["adc"]="abc";//3
        for (let key of arr) {
            console.log(key);
        }

效果和普通for相同