關(guān)于JavaScript中的數(shù)組方法和循環(huán)

更新時(shí)間：2022年09月07日 15:08:23 作者：EASYLZH

這篇文章主要介紹了關(guān)于JavaScript中的數(shù)組方法和循環(huán)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1、基本概念

JavaScript 數(shù)組用于在單一變量中存儲(chǔ)多個(gè)值。是一個(gè)具有相同數(shù)據(jù)類型的一個(gè)或多個(gè)值的集合

2、創(chuàng)建數(shù)組的三種方法

（1）使用JavaScript關(guān)鍵詞 new 一個(gè)Array對(duì)象，并且單獨(dú)賦值

//1、創(chuàng)建數(shù)組  new 一個(gè)Array() 對(duì)象
    let arr = new Array();
    arr[0] = "html";
    arr[1] = "css";
    arr[2] = "javascript";
    arr[3] = "java";

（2）在聲明時(shí)賦值

//2、創(chuàng)建數(shù)組  在Array()對(duì)象里面直接賦值
    let arr1 = new Array("html","css","java","javaweb","javascript");

（3）使用數(shù)組文本直接創(chuàng)建

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

出于簡(jiǎn)潔、可讀性和執(zhí)行速度的考慮，請(qǐng)使用第三種方法（數(shù)組文本方法）。

3、訪問數(shù)組

（1）通過引用索引號(hào)（下標(biāo)號(hào)）來引用某個(gè)數(shù)組元素，[0] 是數(shù)組中的第一個(gè)元素。[1] 是第二個(gè)。數(shù)組索引從 0 開始；

document.write(arr1[0]);

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

console.log(arr1);

（3）修改數(shù)組元素。

arr[1] = "css";

4、數(shù)組常用屬性

length 屬性返回?cái)?shù)組的長(zhǎng)度（數(shù)組元素的數(shù)目）。

console.log(arr,arr.length);//控制臺(tái)輸出數(shù)組和數(shù)組長(zhǎng)度

5、數(shù)組常用方法

（1）join()：把數(shù)組的所有元素放入一個(gè)字符串，通過一個(gè)的分隔符進(jìn)行分隔；

 //1、join()方法 以分隔符將數(shù)組分隔轉(zhuǎn)化為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() 方法將字符串通過分隔符轉(zhuǎn)化為array數(shù)組類型

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

利用上面兩個(gè)方法可以實(shí)現(xiàn)消除字符串之間的所有空格

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

（3）sort()：對(duì)數(shù)組排序

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

注意：以下方法是對(duì)數(shù)組自身進(jìn)行操作

（4）push()：向數(shù)組末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度；

（5）pop()：刪除數(shù)組末尾元素；

（6）unshfit()：向數(shù)組頭部添加元素；

（7）shfit()：刪除數(shù)組頭部元素；

（8）splice()：數(shù)組萬能方法：1、刪除數(shù)組中的元素；2、添加元素；3、替換元素

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

6、常用的循環(huán)遍歷數(shù)組的方法

循環(huán)：循環(huán)就是在滿足條件的情況下，去不斷重復(fù)的執(zhí)行某一個(gè)操作

1、利用for循環(huán)遍歷數(shù)組已知條件已知長(zhǎng)度先判斷后循環(huán)

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

2、利用while循環(huán)遍歷數(shù)組未知條件未知長(zhǎng)度先判斷后循環(huán)

//2、利用while循環(huán)遍歷數(shù)組 ?未知條件 未知長(zhǎng)度 ?先判斷后循環(huán)
? ? let i = 0;
? ? while(i < arr.length){
? ? ? ? document.write(arr[i]+"<br>");
? ? ? ? i++;
? ? }

3、 do while 循環(huán)遍歷數(shù)組至少執(zhí)行一次

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

4、for of 循環(huán)遍歷數(shù)組 value直接是元素值

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

5、for in 循環(huán)遍歷對(duì)象 i 為 key鍵專門用來循環(huán)遍歷對(duì)象，也可以循環(huán)遍歷數(shù)組

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

6、forEach() 數(shù)組方法匿名回調(diào)函數(shù) 【循環(huán)遍歷數(shù)組】

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

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

//7、利用map() 數(shù)組方法遍歷數(shù)組 有返回值
? ? // 返回一個(gè)新的數(shù)組 ?和老數(shù)組長(zhǎng)度一定一致，有可能是二維數(shù)組
? ? 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() 數(shù)組方法遍歷數(shù)組有返回值同樣返回一個(gè)新的數(shù)組

//8、利用flatmap() 數(shù)組方法遍歷數(shù)組 有返回值 同樣返回一個(gè)新的數(shù)組?
? ? //長(zhǎng)度有可能和原來數(shù)組不一致，但一定是一維數(shù)組 ?flat() 為降維函數(shù)
? ? 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);