Web前端-JavaScript--數組

99乘法表

<script>
   document.write("<table border='1'>");
    for(i=1;i<=9;i++){
        document.write("<tr>");
        for (j=1; j<=i; j++) {
         document.write('<td> '+ i+"x"+j+"="+i*j+ '</td>');

        }
       document.write("</tr>")
    }


document.write("</table>")


</script>

冒泡排序

<script>
    var arr = [7, 8, 5, 15, 55, 4, 32, 3, 2, 1];
    console.log("排列前", arr);
    for (i = 0; i < arr.length - 1; i++) {
        var boo = true;
        for (j = 0; j < arr.length - 1 - i; j++) {
            if (arr[j] < arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
                boo = false;
            }
        }
        if (boo) {
            break
        }
    }
    console.log("排列後", arr);
    
</script>

 

數組概述:



    現在假設有這麼一種需求:
        我們班有80人,需要用變量存儲每個人的年齡,身高,體重
        每個人三個變量  80個人就是240個變量

    這麼多變量根本沒辦法管理 所以需要一個整體的容器 放進去
    方便統一管理  進行數據的最大值 平均值 最小值 總值的計算

   所以我們需要數組  數組就是一片連續的內存空間
    一個大的容器 可以存放好多變量數據

數組的創建
//    第一種: 字面量創建
    var arr=["張飛","關羽","劉備","周瑜"];

//    第二種創建方式
    var arr1=new Array("穿天猴","麻雷子","二踢腳");

//    數組有索引值  通過索引值可以取出數組的任意元素
    
    console.log(arr[1]);
var arr1=[5,7,8,9];//手動定義初始元素 系統計算數組大小
 var arr2=new Array("張飛","陶淵明");//手動定義初始元素  系統計算數組大小
 var arr3=new Array(5); //手動定義數組初始長度 系統分配默認值(undefined)
操作數組 通過索引值
   var arr=["陶淵明","汪倫","麥哲倫"];
    
//    根據索引值取出指定元素
    console.log(arr[1]);
//    打印數組長度
    console.log(arr.length);
//        索引值可以超出長度使用 如果該索引值沒有元素 則返回undefined
//    console.log(arr[5882]);
//    console.log(arr);
//    通過索引值改變指定元素
   /* arr[2]="鄭和";   
    console.log(arr);
    arr[22222]="曹操";
    console.log(arr);
    console.log(arr.length);*/
數組遍歷
 var arr=["鄭和","張飛","關羽","劉玄德","小面","烤雞翅"];

  
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    console.log(arr[4]);
數組遍歷:  普通for循環
for(var i=0;i<arr.length;i++){
        console.log(arr[i]);
 for...in循環(瞭解) 因爲for...in是專門用來遍歷json對象(後面講)
格式:
    for(var 變量  in 數組變量){
        這裏面的變量就是數組的每一個索引值
        自己根據索引值 去數組取出每個元素

    }
for(var i in arr){
//        console.log(i);
        console.log(arr[i]);
    }
向數組的最後一位添加元素的方法  數組.push(新元素)
arr.push("噫籲嚱");

 

concat()  合併兩個數組
  var a=[1,2,3,4,5]
    var b=[6,7,8,9]
    var c=a.concat(b);
    console.log(c)
將數組轉換成字符串的方法
arr.join()

1.arr.join()不傳參數  默認以逗號分割

2.arr.join("自定義符號") 以指定符號分割

3.arr.join("") 空字符串  最後效果就是沒有分割
數組的查找  indexOf()  根據元素找到指定位置  找不到返回-1
 console.log(arr.indexOf("諸葛亮"));//-1
如果有元素重複  則找第一個出現的位置
數組翻轉
console.log(arr.reverse());

 數組排序

sort();     可以用函數定義待續方法
 var ar=[1,8,6,4,7,2,9,4,2,15,34,12,6,5]
        newArr=ar.sort(sortNum);
        console.log(newArr);
        function sortNum(a,b) {
            return a-b;
        }

splice()數組刪除:


    1.splice(start) 從指定位置開始 刪除到末尾  會改變源數組

    2.splice(start,length) 從指定位置開始 刪除幾個 會改變源數組

    3.splice(start,length,元素1,元素2,...元素n)
            從指定位置開始 刪除幾個 並填充新內容

 

 常用函數

  刪除數組最後一位元素 返回被刪除的元素 會改變源數組
//    console.log(arr.pop());
    刪除並返回數組第一位元素   會改變源數組
//    console.log(arr.shift());

//    數組截取  arr.slice(start,end) 從指定索引截取到指定索引 包含頭位置 不包含尾位置
//    不會改變源數組
    console.log(arr.slice(1,3));
//    從指定位置開始截取到末尾
   console.log(arr.slice(1));

//       數組刪除  刪除指定區間的元素  arr.splice(start,length) 從指定位置開始刪除幾個
//    會改變源數組  返回值是刪除的那些元素組成的新數組
   console.log(arr.splice(1,3));
//    從指定位置開始刪除到末尾
  console.log(arr.splice(2));

//    toString() 將數組轉換成字符串  以逗號分割   跟arr.join() 返回的效果一樣
   console.log(arr.toString());
 console.log(arr.join());

//    數組查找 根據元素查找數組中第一個出現該元素的位置 找不到返回-1
   console.log(arr.indexOf("諸葛亮"));

數組的五種遍歷方式 

every filter foreach map some

第一種

 //對數組中每一項運行以下函數,
    如果都返回true,every返回true,如果有一項返回false,
    則停止遍歷 every返回false
array.every(function(item,index,arr) {

})
 var arr=["張飛","關羽","諸葛孔明","劉備","張三哥","奧特曼","鎧甲武士"];
 var boo=arr.every(function (item,index,arr) {
        console.log(item);
        console.log(index);
        console.log(arr);
//        return true;
       if(item.length>3){
           return false;

       }
            return true;

    })

    if(!boo){
        console.log("數組不符合")


   }

第二種   

對數組中每一項運行以下函數,
// 該函數返回結果是true的項組成的新數組
// var arr = array.filter(function(item,index,arr) {
// });console.log(arr);
var arr=["張飛","關羽","諸葛孔明","劉備","張三哥","奧特曼","鎧甲武士"];
var newArr=arr.filter(function (item,index,arr) {
        if(item.length>3){
            return true;

        }
            return false;
    })
    
    console.log(newArr);

第三種 

遍歷數組array.forEach(function(item,index,arr){});
//    單純的遍歷數組
 var arr=["張飛","關羽","諸葛孔明","劉備","張三哥","奧特曼","鎧甲武士"];
var aaa=arr.forEach(function (item,index,arr) {
        console.log(item,index);
    });
    
  console.log(aaa);

第四種 

對數組中每一項運行以下函數,
// 返回該函數的結果組成的新數組
// var arr = array.map(function(item,index,arr) {
//    return "\"" + item + "\"";})
var arr=["張飛","關羽","諸葛孔明","劉備","張三哥","奧特曼","鎧甲武士"];
var newArr=arr.map(function (item,index) {
        return item+"--->你好鴨!!"

    })
    console.log(newArr);

第五種  

對數組中每一項運行以下函數,
* 如果該函數對某一項返回true,則some返回true
* 然後立即停止遍歷 如果都沒有返回true則最後some返回false
* var b =  array.some(function(item,index,arr) {
   * if (item == "ww") {        return true;    }    return false;});
 var arr=["張飛","關羽","諸葛孔明","劉備","張三哥","奧特曼","鎧甲武士"];
var boo=arr.some(function (item,index) {
    console.log(item);
    if(item.length>3){
        return true;

    }
    return false;

})
    console.log(boo);

 

數組練習1

<script>
    var arr=[5,7,3,6,2,8];
//求一組數中的所有數的和 和平均值
   /* var total=0;
    for(var i=0;i<arr.length;i++){
        total+=arr[i];
    }
    
    console.log("總值:"+total);
    console.log("平均值:"+(total/arr.length));
*/

    var max=arr[0]; //假設0號元素是最大值
    var min=arr[0] //假設0號元素是最小值

    var max_index=0; //假設最大值的索引是0
    var min_index=0;//假設最小值的索引是0


//    求一組數中的最大值和最小值,以及所在位置

    for(var i=1;i<arr.length;i++){
        if(arr[i]>max){
            max=arr[i]
            max_index=i;

        }

        if(arr[i]<min){
            min=arr[i]
            min_index=i;

        }

    }
    
    console.log("最大值是:"+max);
    console.log("最大值的所在位置:"+max_index);
    console.log("最小值是:"+min);
    console.log("最小值的所在位置:"+min_index);



</script>

數組練習2

<script>
    //將數組轉換成字符串用|或其他符號分割(3種)

    /*var arr=["關羽","劉備","張飛","諸葛亮","張亮","麻辣燙"];

    var str="";
    for(var i=0;i<arr.length;i++){
        if(i==arr.length-1){
//            如果失敗最後一個元素 那就直接拼內容 不拼|
            str+=arr[i]
        }else{
            str+=arr[i]+"|";
        }

    }
    
    console.log(str);
    console.log(arr.join("|"));*/
//將數組中值爲0的去掉,不爲0的存入新數組
/*var arr=[8,0,5,2,0,6,0,4,3,1];

var newArr=[];
for(var i=0;i<arr.length;i++){
   if(arr[i]!=0){
       newArr.push(arr[i]);
       
   } 
}

console.log(newArr);*/

//    翻轉數組(反向,新數組)  1.翻轉後是一個新數組  2.針對原來數組進行翻轉

    var arr=["關羽","劉備","張飛","諸葛亮","張亮","麻辣燙","哈哈"];

//    翻轉後放入新數組
    //    var newArr=[];
   /* for(var i=arr.length-1;i>=0;i--){
        newArr.push(arr[i])

    }
    console.log(newArr);*/

//針對源數組直接翻轉
    /*
        經過分析 是  arr[i] 和arr[arr.length-1-i]這個元素交換位置


     */
    console.log("交換前:",arr);
    for(var i=0;i<arr.length/2;i++){
        var temp=arr[i];
        arr[i]=arr[arr.length-1-i];
        arr[arr.length-1-i]=temp;
//        console.log("交換了:",arr);
    }
    
    console.log("交換後:",arr);


    var arr1=["關羽","劉備","張飛","諸葛亮","張亮","麻辣燙","哈哈"];
    console.log(arr1.reverse());

</script>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章