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>

 

 

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