初识javaScript(七)数组(二)

1 静态函数与实例函数

自定义函数、js的内置函数。
Math.random(); 属于Math对象的。
isNaN():window对象
Array.isArray():Array构造函数对象。
window对象的函数可以直接调用。
函数的分类:从函数的调用者来分类。
1: 静态方法: 函数的方法。这里的函数通常是构造函数。
目前接触到的所有的静态方法都是js内置的静态方法。
静态方法的调用者,在js中,首字母都是大写的,这些大写的对象
不仅仅代表了一个对象,还代表了类型。
静态方法通常是作为工具方法使用。
2: 实例方法:实例对象来调用的方法。
比如,数组实例的函数 forEach
实例方法的作用:操作当前实例对象的。
类型:抽象的。不具体。
人:类型
树:类型
实例:具体化了。
英语委员,圆锋 人类型中的一个实例。
园区门口的那颗树。

<body>
<script>
  console.log (window.isNaN());
  //隶属于window对象
  function fn() {
      var num = 10;

  }

  var arr = [];
  arr.forEach();

  //arr1,2,3 都是Array类型的实例对象。
  var arr1 = new Array(6);
  var arr2 = new Array(1,2);
  var arr3 = new Array(6);

  fn();

</script>
</body>

2 push与pop

使用数组来模拟栈这种结构。
两个操作:
压栈:push
弹栈:pop
操作数组的尾部的两个方法。
push:
作用:往当前数组的尾部压入数据。
格式:数组.push(数据1,数据2,数据3,…);
返回:数组的新的长度
pop:
作用:将数组的最后的一个元素弹出。
格式:数组.pop();
pop 和 delete的区别:
pop 会修改数组的长度。每次长度减一。
delete 不会修改数组的长度。只是将内容修改为了undefined。

<body>
<script>
   var arr = [];
   var len = arr.push ("a", "b", "c", "d");
   arr.push ("e");
   len = arr.push ("f");
   console.log (len);//6
   console.log (arr);

   //使用pop方法。当前数组剩余元素个数为3.
   while (arr.length > 3) {
       console.log (arr.pop());
   }
   console.log (arr);

   var arr1 = [1];

</script>
</body>

3 unshift与shift

数组的实例方法:
用于操作数组低索引,头部元素的方法。
unshift:
作用:在头部添加元素。
语法:数组对象.unshift(数据1,…);
返回:返回数组的新长度。
shift:
作用:删除数组的头元素。
语法:数组.shift()
返回:被删除的元素。或者是undefined。

<body>
<script>
  var arr = [];
  arr.unshift("a");
  arr.unshift("b");
  arr.unshift("c");
  arr.unshift("d");
  console.log (arr.unshift("e"));
  console.log (arr);

  console.log (arr.shift());//d
  while(arr.length>0){
      console.log (arr.shift());
  }
  console.log (arr.shift());//undefined
</script>
</body>

4 join

数组的实例方法:
join:加入的意思。
作用:将数组的所有的元素连接为字符串,元素之间使用分隔符连接。
语法:数组.join(分隔符 separator);
参数说明:
分隔符是一个字符串。
可以省略,那么使用【逗号】作为默认的分隔符连接。
如果元素之间不需要分隔符连接,那么使用空字符串作为分隔符。
返回:连接后的字符串。

<body>
<script>
    var arr = ["a","b","c","d","e"];

    var str = arr.join();
    console.log (str);//a,b,c,d,e
    console.log (arr.join("_"));
    console.log (arr.join(""));
</script>
</body>
<body>
<!--
自定义方法实现:对任意两个数组,
连接为一个数组之后,然后再连接为一个字符串,返回。
-->
<script>
    function join(arr1,arr2) {
        //将arr2的内容push到arr1中。然后再join
        for (let i = 0; i < arr2.length; i++) {
            arr1.push(arr2[i]);
        }
        return arr1.join("");
    }
    var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    console.log (join(arr1,arr2));
</script>
</body>

5 indexOf-lastIndexOf

数组的实例方法
1:indexOf:
作用:用来获得当前数组中查找指定值的索引。
语法:数组.indexOf(查找的内容,fromIndex ? )
fromIndex:开始查找的索引位置。如果省略,从头开始找。
返回:如果数组中存在要查找的内容,返回该内容的索引,不存在返回-1;
注意:从前往后找,找到第一个就结束了。
2: lastIndexOf:
作用:用来获得当前数组中查找指定值的索引。
语法:数组.lastIndexOf(查找的内容,fromIndex ? )
fromIndex:开始查找的索引位置。如果省略,从尾部开始找。
返回:如果数组中存在要查找的内容,返回该内容的索引,不存在返回-1;
注意:从后往前找,找到第一个就结束了。

<body>
<script>
 var arr = [1, 2, 3, 2, 2, 2];
 var key = 2;
 var index = arr.indexOf (key);
 console.log (index);//1
 index = arr.indexOf (key, index + 1);
 console.log (index);//3
 key = 7;
 console.log (arr.indexOf (key));//-1

 //继续找2
 key = 2;
 console.log (arr.lastIndexOf (key))//5
 var fromIndex = arr.length - 1;
 index = arr.lastIndexOf (key, fromIndex);
 while (index >= 0) {
     fromIndex = index - 1;
     index = arr.lastIndexOf (key, fromIndex);
     console.log (index);
 }
 console.log (fromIndex + 1);//1


 //统计任意数组中值为某个值的元素的个数。
 var arr = ["a", "b", "c", "a", "a", "b", "a"];

 function counterKeys(arr, key) {
     var counter = 0;
     for (let i = 0; i < arr.length; i++) {
         if (arr[i] === key)
             counter++;
     }
     return counter;
 }

 function counterKeys1(arr, key) {
     var counter = 0;
     var fromIndex = 0;
     var index = arr.indexOf(key,fromIndex);
     while (index >= 0) {
         fromIndex = index + 1;
         counter++;
         index = arr.indexOf(key,fromIndex);
     }
     return counter;
 }

 console.log (counterKeys(arr,"a"));//4
 console.log (counterKeys1(arr,"a"));//4

</script>
</body>

6 slice

数组的实例方法:
slice:切下的意思。
作用:从当前数组中切割子数组的。
语法:数组.slice(start?,end?)
参数:
start:切割的子数组的起始索引,包含。
end:切割的子数组的结束索引,不包含。
end省略:从start开始切割到末尾。
start、end都省略:切割整个数组。复制数组。
返回:切割得到的数组。
注意:源数组,当前数组不会改变。

<body>
<script>
    var arr = ["a", "b", "c", "a", "a", "b", "a"];

    var newArr = arr.slice(0,3);
    console.log (newArr);//["a", "b", "c"]
    console.log (arr);// ["a", "b", "c", "a", "a", "b", "a"]

    //截取后两个元素。
    console.log (arr.slice(arr.length-2));//["b", "a"]

    console.log (arr.slice());// ["a", "b", "c", "a", "a", "b", "a"]

</script>
</body>

7 splice

数组的实例方法:
splice:可以实现对当前数组的增加、删除、修改元素的操作。
返回:被删除掉的元素组成的新数组。
1:插入元素的语法:
数组.splice(插入的位置,0,插入的数据…);

2: 删除元素的语法。
数组.splice(删除元素的索引,删除的个数);

3: 修改元素的语法
数组.splice(修改元素的起始索引,修改的个数,修改的数据…)
注意:上述的所有的操作,都会对当前数组造成修改。

<body>
<script>
    var arr = [1,2,3,4,5];
    //在3后面插入3个7
    var splice = arr.splice(3,0,7,7,7);
    console.log (arr);//[1, 2, 3, 7, 7, 7, 4, 5]
    console.log (splice);//[]

    //把刚刚添加的3个7再删除掉。
    splice = arr.splice(3,3);
    console.log (arr);//[1, 2, 3, 4, 5]
    console.log (splice);// [7, 7, 7]

    //把3,4修改为7
    splice = arr.splice(2,2,7,7);
    console.log (arr);// [1, 2, 7, 7, 5]
    console.log (splice);// [3, 4]

    //什么参数都不添加,返回空数组。
    console.log (arr.splice());//[]

</script>
</body>

8 reverse

数组的实例方法
reverse:翻转的意思。
作用:对当前数组进行翻转。
返回:反转之后的源数组。

<body>
<script>
   var arr = [1,2,3,4,5];
   var reverse = arr.reverse();
   console.log (arr);
   console.log (reverse);
   console.log (arr === reverse);//true
</script>
</body>

9 sort

数组的实例方法
sort:排序的意思。排序的方法。
作用:对当前数组进行排序,并返回排序后的数组。

1:没有参数,排序使用的规则是默认的规则。
默认的规则是:将所有的元素都转换为字符串之后,按照字符串大小的比较规则升序排列。

2:如果不按照默认的比较规则进行排序,那么需要通过传入参数指定自己的比较规则。
传入的参数是一个方法。该方法称为比较器函数。
可以传入有名函数的名字,或者是匿名函数。
function compare(num1,num2){
//方法的内部实现,需要遵守规则实现。
}
该函数的实现需要遵守如下的规则:
升序排序的规则: asc ascending
两个参数是待排序数组相邻的两个元素。num1在前,num2在后。
如果你指定的规则中,num1,大于num2的话,方法返回一个正数。
num1如果小于num2,方法返回一个负数,
如果两个参数相等,返回0.
降序排列的规则: desc descending
如果第一个参数大于第二个参数,返回负数
如果第一个参数小于第二个参数,返回正数
否则返回0.

<body>
<script>
 var arr = [1, 3, 1, 6, 12, 31, 65, 32, 23];
 var newArr = arr.sort ();
 console.log (newArr);
 console.log (arr);
 console.log (newArr === arr);

 var arr = [1, 3, 1, 6, 12, 31, 65, 32, 23];
 //两个参数是待排序数组相邻的两个元素。num1在前,num2在后。
 //如果你指定的规则中,num1,大于num2的话,方法返回一个正整数。
 //num1如果小于num2,方法返回一个负整数,
 //如果两个参数相等,返回0.
 function compare(num1, num2) {
     if (num1 > num2)
         return 1;
     if (num1 < num2)
         return -1;
     return 0;
 }
 arr.sort (compare);

 console.log (arr);

 //按照长度升序排列
 var strs = ["abc", "d", "abcde", "abcdedg", "ab", "eerd"];
 var compare1 = function (str1, str2) {
    /* if (str1.length > str2.length)
         return 1;
     if (str1.length < str2.length)
         return -2;
     return 0;*/
    //优化
    return str1.length - str2.length;
 }
 strs.sort (compare1);
 console.log (strs);

 //匿名函数作为实参排序
 arr = [1, 3, 1, 6, 12, 31, 65, 32, 23, 3, 45, 6, 34, 5, 7,23,4,56,4,23,5];
 arr.sort (function (val1, val2) {
     // if(val1 > val2)
     //     return 1;
     // if(val1 < val2)
     //     return -1;
     // return 0;
     //优化
     return val2 - val1;
 });
 console.log (arr);


</script>
</body>

10 map

数组的实例方法
map:映射的意思。映射就是键值对数据。
作用:用来遍历数组中的每个元素,可以对每个元素进行某些操作,变化之后的元素返回一个新的数组。
参数:是一个回调函数。function (value,index,arr) {}
value:数组的每个元素值。
index:value元素值对应的下标。
arr:当前数组。通常无用。
返回:计算之后的每个元素组成的新数组。

<body>
<script>
    var arr = [1,2,3,4,5,6,7];
    //如果元素是奇数,*2.偶数除以二操作。
    var newArr = arr.map(function (value,index,arr) {
        if(value % 2 == 0)
            return value / 2;
        return value << 1;
    });
    console.log (arr);
    console.log (newArr);
</script>
</body>

11 filter

filter:过滤器
作用:对当前数组中的元素进行过滤。将满足过滤条件的元素返回形成一个新的数组。
参数回调方法同 map。
回调函数返回true,满足条件的元素。返回false。被过滤掉的元素。

<body>

<script>
  //将2-100以内的所有的素数过滤出来
  var arr = [];
  for (let i = 2; i <= 100; i++) {
      arr.push (i);
  }
  var primeArr = arr.filter (function (value, index) {
      //如果value是素数应该返回true,否则返回false。
      for (let i = 2; i < value; i++) {
          if(value % i === 0)
              return false;
      }
      return true;
  });

  console.log (primeArr);
</script>
</body>

12 find-findIndex

find()方法:
作用:遍历数组、将第一个满足指定函数条件的数组元素返回。都不满足返回 undefined
格式:数组对象.find(function(currentValue,index, arr))
findIndex()方法:
作用:遍历数组,将第一个满足指定函数条件的数组元素的下标返回。都不满足,返回-1.
格式:数组对象.findIndex(function(currentValue,index, arr))

<body>
<script>
    var arr = [];
    for (let i = 1; i <= 100; i++) {
        arr.push (i);
    }
    //找到第一个满足条件的。立即返回。
    var ele = arr.find(function (value,index) {
        return value % 5 === 0 && value % 7 ===0;
    });
    console.log (ele);//35


    var index = arr.findIndex(function (value,index) {
        return value % 5 === 0 && value % 7 ===0;
    });
    console.log (index);//34

</script>
</body>

13 some、every、includes、concat

some: 判断当前数组中是否有元素满足回调函数的条件。
有满足的返回true,都不满足,返回false。
every: 判断当前数组中是否元素全部满足回调函数的条件。
如果全部满足,返回true,否则返回false。

includes: 用来判断当前数组中是否包含某个值。
如果包含返回true,否则false。

concat: 连接的意思。
作用:连接数组使用。
返回:连接之后的数组。

<body>
<script>
    var arr = [];
    for (let i = 1; i <= 100; i++) {
        arr.push (i);
    }

    var result = arr.some (function (value, index) {
        return value > 100;
    });
    console.log (result);//false.

    var result = arr.every(function (value,index) {
        return value > 1;
    });
    console.log (result);//true.


    var bool = arr.includes(277);
    console.log (bool);

    var arr = [1,2,3];
    var arr2 = [4,5,6];
    var concat = arr.concat(arr2);
    console.log (concat);

</script>
</body>
//练习
<body>
<!--
    1:得到一个随机数组,20个元素,元素取值范围[1-20],利用之前得到随机数组的方法。
    删除数组中的 所有的值是4的元素。将值是14的元素修改为17.使用方法实现。
-->
<script>
    function random(min, max) {
        return ~~(Math.random () * (max - min) + min);
    }

    function randomArray(len, min, max) {
        var arr = [];
        for (let i = 0; i < len; i++) {
            arr.push(random(min,max));
        }
        return arr;
    }

    function modifyArray(array,delValue,modValue,newValue) {
        for (let i = 0; i < array.length; i++) {
            if(array[i] === delValue){
                array.splice(i,1);
                continue;
            }
            if(array[i] === modValue){
                array.splice(i,1,newValue);
                continue;
            }
        }
    }

    var array = randomArray(20,1,20);
    console.log (array);
    var delValue = 4;
    var modValue = 14;
    var newValue = 17;
    modifyArray(array,delValue,modValue,newValue);
    console.log (array);

</script>
</body>

14 多维数组

多维数组:
数组的分类:
一维数组
二维数组:一维数组的元素是一维数组。
多维数组: 一维数组的元素还是数组(多维);
从严格意义上来讲,数组只有一维数组。

<body>

<script>
   //一维数组
   var arr1 = [1, 2, 3, 4, 5];
   arr1[1];
   //二维数组
   var arr2 = [
       [1, 2, 3, 4, 5],
       [1, 2, 3, 4, 5],
       [1, 2],
       [5, 6, 7, 5, 4, 3, 3, 4, 6, 87, 8]
   ];
   //遍历二维数组。
   //外层控制有多少个一维数组。
   for (let i = 0; i < arr2.length; i++) {
       //遍历每一个一维数组
       document.write ("[");
       for (let j = 0; j < arr2[i].length; j++) {
           var len = arr2[i].length - 1;
           document.write (arr2[i][j] + (len === j ? "" : ","));
       }
       document.write ("],<br>");
   }

   //对于二维数组而言,高纬确定的是哪个一维数组。低维确定是一维数组中的哪个元素。
   console.log (arr2[3][2]);
   document.write("<br>");
   var arr3 = [
       [
           [1, 2, 3, 4, 5],
           [1, 2, 3, 4, 5],
           [1, 2],
           [5, 6, 7, 5, 4, 3, 3, 4, 6, 87, 8]
       ],
       [
           [1, 2, 3, 4, 5],
           [1, 2, 3, 4, 5],
           [1, 2],
           [5, 6, 7, 5, 4, 3, 3, 4, 6, 88, 8]
       ]
   ];
   for (let i = 0; i < arr3.length; i++) {
       document.write ("[<br>");
       for (let j = 0; j < arr3[i].length; j++) {
           document.write ("[");
           for (let k = 0; k < arr3[i][j].length; k++) {
               var len = arr3[i][j].length - 1;
               document.write (arr3[i][j][k] + (len === k ? "" : ","));
           }
           document.write ("],<br>");
       }
       document.write ("],<br>");
   }
   // console.log (arr3[1][3][9]);

   var arr2 = [
       [1, 2],
       [1, 2],
       [1, 2]
   ];
</script>
</body>

15 冒泡排序

排序:直接插入、直接选择、冒泡排序、快速排序。
概念:稳定性。
稳定排序:待排序数列中相同的值,排序之后相对的先后的位置不会发生改变的排序算法。
不稳定排序:待排序数列中相同的值,排序之后相对的先后的位置可能会发生改变的排序算法。
冒泡排序:

<body>

<script>
  function random(min, max) {
      return ~~(Math.random () * (max - min) + min);
  }

  function randomArray(len, min, max) {
      var arr = [];
      for (let i = 0; i < len; i++) {
          arr.push (random (min, max));
      }
      return arr;
  }

  //对arr进行冒泡排序  基本实现。
  /*function bubbleSort(arr) {
      if (!Array.isArray (arr)) {
          return;
      }
      const LEN = arr.length;
      if (LEN === 0)
          return;
      //外层循环控制趟数
      for (let i = 0; i < LEN - 1; i++) {
          //内层循环控制第i趟的相邻元素的比较和交换
          for (let j = 0; j < LEN - i - 1; j++) {
              //如果前面的比后面的大,交换。
              if (arr[j] > arr[j + 1]) {
                  var temp = arr[j];
                  arr[j] = arr[j + 1];
                  arr[j + 1] = temp;
              }
          }
      }
  }*/

  //冒泡排序的优化。 待排序区在排序的过程中,如果已经是一个有序的数列了,就不需要再排序了。
  var counter = 0;
  function bubbleGoodSort(arr) {
      //外层循环控制趟数
      for (let i = 0; i < arr.length - 1; i++) {
          counter ++;
          //内层循环控制第i趟的相邻元素的比较和交换
          var flag = false;
          for (let j = 0; j < arr.length - i - 1; j++) {
              //如果前面的比后面的大,交换。
              //如果在整个内层循环中,if条件都没有成立,那么待排序区就是一个有序的数列了。
              if (arr[j] > arr[j + 1]) {
                  flag = true;
                  var temp = arr[j];
                  arr[j] = arr[j + 1];
                  arr[j + 1] = temp;
              }
          }
          if(!flag) return;
      }
  }


  var array = randomArray (10, 0, 100);
  console.log (array);
  // bubbleSort(array);
  bubbleGoodSort(array);
  console.log (array);
  console.log (counter);

</script>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值