關於JavaScript中的陣列方法與循環

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於JavaScript中的陣列方法和循環，具有很好的參考價值，希望對大家有所幫助。

【相關推薦：javascript影片教學、web前端】

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

#############【相關推薦：###javascript影片教學###、###web前端###】###

以上是關於JavaScript中的陣列方法與循環的詳細內容。更多資訊請關注PHP中文網其他相關文章！