關於JavaScript中的陣列方法和迴圈

//1、建立陣列  new 一個Array() 物件
    let arr = new Array();
    arr[0] = "html";
    arr[1] = "css";
    arr[2] = "javascript";
    arr[3] = "java";

//2、建立陣列  在Array()物件裡面直接賦值
    let arr1 = new Array("html","css","java","javaweb","javascript");

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

document.write(arr1[0]);

console.log(arr1);

arr[1] = "css";

console.log(arr,arr.length);//控制檯輸出陣列和陣列長度

 //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陣列型別
    // 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);

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);

 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);

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迴圈遍歷陣列  未知條件 未知長度  先判斷後迴圈
    let i = 0;
    while(i < arr.length){
        document.write(arr[i]+"<br>");
        i++;
    }

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

//4、for of  迴圈遍歷陣列  value直接元素值  
    for(let value of arr){
        document.write(value+"<br>");
    }

//5.for in 迴圈遍歷物件  i 為  key鍵  專門用來回圈遍歷物件
    for(let i in arr){
        document.write(arr[i]+"<br>");
    }

//6.forEach()  陣列方法  匿名回撥函數  【迴圈遍歷陣列】
    arr.forEach(function(value,index,arr){
        document.write(index+"---"+value+"----"+arr+"<br>");
    })

//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() 陣列方法遍歷陣列 有返回值 同樣返回一個新的陣列 
    //長度有可能和原來陣列不一致，但一定是一維陣列  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);