關於JavaScript中的數組方法和循環

1、基本概念

JavaScript 數組用於在單一變量中存儲多個值。是一個具有相同數據類型的一個或多個值的集合

2、創建數組的三種方法

(1)使用JavaScript關鍵詞 new 一個Array對象,並且單獨賦值

//1、創建數組  new 一個Array() 對象
    let arr = new Array();
    arr[0] = "html";
    arr[1] = "css";
    arr[2] = "javascript";
    arr[3] = "java";

(2)在聲明時賦值

//2、創建數組  在Array()對象裡面直接賦值
    let arr1 = new Array("html","css","java","javaweb","javascript");

(3)使用數組文本直接創建

 //3、通過[]直接創建
    let arr2 = ["html","css","java","javascript","javaweb"];

出於簡潔、可讀性和執行速度的考慮,請使用第三種方法(數組文本方法)。

3、訪問數組

(1)通過引用索引號(下標號)來引用某個數組元素,[0] 是數組中的第一個元素。[1] 是第二個。數組索引從 0 開始;

document.write(arr1[0]);

(2)可通過引用數組名來訪問完整數組

console.log(arr1);

(3)修改數組元素。

arr[1] = "css";

4、數組常用屬性

length 屬性返回數組的長度(數組元素的數目)。

console.log(arr,arr.length);//控制臺輸出數組和數組長度

5、數組常用方法

(1)join():把數組的所有元素放入一個字符串,通過一個的分隔符進行分隔;

 //1、join()方法 以分隔符將數組分隔轉化為string
    let arr = new Array("html","css","javascript","java","web","mysql");
    console.log(arr,typeof(arr));
    let newarr = arr.join("+");
    console.log(newarr,typeof(newarr));

(2)split() 方法  將字符串通過分隔符轉化為array數組類型

// 2、split()方法  將字符串通過分隔符轉化為array數組類型
    // split() 函數驗證郵箱格式
    let email = prompt("請輸入你的郵箱:");
    console.log(email);
    let arr1 = email.split("@");
    console.log(arr1,typeof(arr1));
    document.write("你的賬號為:"+arr1[0]+"<br>"+"你的網站時:"+arr1[1]);

 

利用上面兩個方法可以實現消除字符串之間的所有空格

//功能  剔除字符串裡的所有空格
    function trimAll(str){
        let nowstr = str.trim();//先剔除兩端的空格
        let arr = nowstr.split(" ");//split()  轉換為數組 用空格分隔
        for(let i = 0;i<arr.length;i++){//循環遍歷
            if(arr[i] == ""){
                arr.splice(i,1);//遇到空格刪除
                i--;
            }
        }
        return arr.join("");//join() 轉化為字符串
    }
 
    let nowstr = trimAll("     1     2    4    5    ");
    console.log(nowstr);

(3)sort():對數組排序

let arr = [31,23,26,76,45,1,90,6,24,56];
    //sort() 函數  對數組進行排序  默認按數字首位進行排序
    //添加參數  參數為匿名函數
    arr.sort(function(a,b){
        // return a-b;         //正序排序
 
        return b-a;           //倒序排序
    });
 
    console.log(arr);

註意:以下方法是對數組自身進行操作

(4)push():向數組末尾添加一個或更多 元素,並返回新的長度;

(5)pop(): 刪除數組末尾元素;

(6)unshfit():向數組頭部添加元素;

(7)shfit():刪除數組頭部元素;

(8)splice():數組萬能方法:1、刪除數組中的元素;2、添加元素;3、替換元素

 let arr = ["html","java","csss","javascript"];
    console.log("舊數組:"+arr);
    //對數組自身進行操作
    arr.push("weeb");//在數組末尾添加元素  可以有多個參數 之間用逗號隔開
    arr.pop();//刪除末尾元素  沒有參數
    arr.unshift("react","mysql");//在數組頭部添加元素  可以有多個參數  之間用逗號隔開
    arr.shift();//刪除數組頭部的元素  沒有參數
    arr.shift();//刪除需要多次刪除  或者利用循環
    arr.splice(0,2);//數組萬能方法  刪除任意位置元素  參數為: 起始下標,刪除數目
    arr.splice(3,2,"java","html");//添加元素  參數為:數組沒有的下標,添加數目,添加的數據
    arr.splice(1,1,"javaweb")//替換元素  參數為:起始下標,替換個數,替換數據  如果替換數據小於替換個數  則執行刪除功能
    console.log("新數組:"+arr);

6、常用的循環遍歷數組的方法

循環:循環就是在滿足條件的情況下,去不斷重復的執行某一個操作

1、利用for循環遍歷數組  已知條件  已知長度  先判斷後循環

let arr = new Array("html","css","javascript","java","web","mysql");
    //1、利用for循環遍歷數組  已知條件  已知長度  先判斷後循環
    for (let i = 0;i < arr.length;i++){
        document.write(arr[i]+"<br>");
    }

2、利用while循環遍歷數組  未知條件 未知長度  先判斷後循環

//2、利用while循環遍歷數組  未知條件 未知長度  先判斷後循環
    let i = 0;
    while(i < arr.length){
        document.write(arr[i]+"<br>");
        i++;
    }

3、 do while 循環遍歷數組 至少執行一次

//3、至少執行一次 do while 循環遍歷數組
    let j = 0;
    do{
        document.write(arr[j]+"<br>");
        j++;
    }
    while(j < arr.length);

4、for of  循環遍歷數組  value直接是元素值

//4、for of  循環遍歷數組  value直接元素值  
    for(let value of arr){
        document.write(value+"<br>");
    }

 5、for in 循環遍歷對象  i 為  key鍵  專門用來循環遍歷對象,也可以循環遍歷數組

//5.for in 循環遍歷對象  i 為  key鍵  專門用來循環遍歷對象
    for(let i in arr){
        document.write(arr[i]+"<br>");
    }

6、forEach()  數組方法  匿名回調函數  【循環遍歷數組】

//6.forEach()  數組方法  匿名回調函數  【循環遍歷數組】
    arr.forEach(function(value,index,arr){
        document.write(index+"---"+value+"----"+arr+"<br>");
    })

7、利用map() 數組方法遍歷數組 有返回值

//7、利用map() 數組方法遍歷數組 有返回值
    // 返回一個新的數組  和老數組長度一定一致,有可能是二維數組
    let newarr = arr.map(function(value,index,oldarr){
        document.write(index+"---"+value+"----"+oldarr+"<br>");
 
        if(index == 0){
            value = "12345";
        }
        return [value,index];
 
    });
    console.log(newarr);

8、利用flatmap() 數組方法遍歷數組 有返回值 同樣返回一個新的數組

//8、利用flatmap() 數組方法遍歷數組 有返回值 同樣返回一個新的數組 
    //長度有可能和原來數組不一致,但一定是一維數組  flat() 為降維函數
    let newarr1 = arr.flatMap(function(value,index,oldarr){
        document.write(index+"---"+value+"----"+oldarr+"<br>");
 
        if(index == 0){
            value="321";
        }
        return [value,index];
    });
    console.log(newarr1);

以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: