JS中的数组

总预览

1.创建数组的方式和元素的添加
2.数组的遍历
3.数组的方法
4.数组的一些习题

1.创建数组的方式和元素的添加

创建方式
var arr = new Array(); 或者是var arr= [] (用的比较多)
添加方式
arr[0] = 19;//数组的索引从0开始 [19]
arr[1] = “www.hamkd.com”;// [19, ‘www…’] length=2
arr[2] = “www.aicoder.com”;
初始化1
var arr = new Array();// 创建一个空数组
var arr = new Array(3);//定义数组的容量为3个，3个undefined
var arr = new Array(“a”,“b”,“c”);
//定义一个数字，有a , b ,c 三个字符串
初始化2
var arr = [];//创建一个空数组
var arr = [1,2,3];//创建三个数字的数字。
var arr=[1, ,2];//中间的省略的是undefined
var arr = [1 ,”dd”,true, [1,3], { age: 19}, 33];
数组的元素的类型可以是任意类型。

2.数组的遍历

length属性
length属性,如果是连续数组，那么length就是数组元素的个数
如果是稀疏数组，那么length不能代表元素的个数 （所谓的稀疏数组是指下标不连续的数组）

 var t = [1, 2];
 t[100] = 'sslj';
 console.log(t.length);//101,但是实际的元素只有3个
  console.log(t[10]); //undefined
 使用forin循环可以对稀疏数组的空值undefined进行过滤。
  for(var k in t) {
      console.log(k)   //0,1,100
      console.log(t[k]);//1,2,sslj
    }

2.1数组的遍历

for的方式和使用for in的方式进行遍历
for的方式进行遍历

var a = [1,2,3,89, "slj", true];
 for(var i = 0; i < a.length; i++) {
      console.log(a[i]);
    }

对于稀疏的数组就只能够使用for in进行遍历，
但是需要注意1：从原型上继承来的属性也会被for in遍历，所以如果需要去掉这部分属性可以通过hasOwnProperty（）进行过滤。
示例：

所以我们需要使用hasOwnProperty（）进行过滤

需要注意2：

遍历对象，拿到的是对象的属性名，而不是属性值。
    for(var k in a) {  // for in 遍历数组，k值是数组的索引编号，不是数组的元素值。
      // k 0 ,1 ,2
      console.log(a[k]); // k是索引编号不是数组元素值
    }

案例:一个数组，合法值为1,2或3，其余为不合法，统计合法及不合法的个数。

 var t = [1, 4, 9, 'sss', 3, '2', 2, 3, 2, 1];
    var rigthfulNum = 0,  // 合法的个数
        illNum   = 0;     // 非法的个数
         for(var k in t) {
      // console
      switch(t[k]) {
        case 1:
        case 2:
        case 3: 
          rigthfulNum += 1;
          break;
        default:
          illNum +=1 ;
      }
    }
    console.log('合法：' + rigthfulNum);
    console.log('非法：' + illNum);

3.数组的方法

3.1pop()/push()/shift()/sort()/concat()

pop(); //从数组尾部弹出一个元素并返回弹出的元素，改变的是原数组
push(); //从数组的尾部压入一个元素，并返回数组的新长度 ，改变的是原数组
shift();//从数组的头部弹出一个元素，并返回此元素，改变的是原数组
unshift()//从数组的头部压入一个元素，并返回length，改变的是原数组
sort()；//转成字符串排序，改变原数组
reverse();//对原数组进行逆序，改变原来的数组
concat()连接原数组的元素和传递的参数形成一个新数组并返回，不影响原来的数组。 如果传入的参数是数组，会把数组 中的元素去掉[]跟原数组的元素进行合并成一新数组。
join(); 可以把数组的元素转成字符串，接收一个参数为连接符号,默认是逗号,返回的结果为字符串。toString也是可以的，不改变原来的数组，产生新的字符串
slice():截取或者复制数组的一部分，对原数组是没有任何的影响的，2个参数（起始，结束（结束时不算，如果第二个参数省略则默认一直到最后）），只可以从前往后截取m = [1,2,3,4,5];m.slice(-3, -1);//=>[3, 4]，如果向前截取返回[]
splice()在原数组上进行插入或者删除数组元素，会影响原来数组。返回的结果是删除的元素组成的数组。参数：可以接受1个参数，2个参数或者2个以上的参数。
第一个参数是删除数据的索引位置(start)
第二个参数是要删除数组元素的个数(end)
第三个参数开始是要插入到原数组中的元素，插入的位置从第一个参数所在的索引开始。
indexOf()和 lastIndexOf()都是返回查找的元素的索引下标，前者是从前查找，后者是从后往前查找
forEach()和map()参数分别为：遍历的数组内容；第对应的数组索引，数组本身。前者返回值为undefined后者为新数组
filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

误点解析：

1.sort返回值用变量接收的时候，不会报错之类的
var m = [ 3, 20, 10 , 9, 11, 12];
console.log(m.sort());//[10, 11, 12, 20, 3, 9]
r=m.sort();
console.log®;//[10, 11, 12, 20, 3, 9]
2.reverse返回值用变量接收的时候，不会报错之类的
var m = [ 3, 20, 10 , 9, 11, 12];
console.log(m.reverse())//[12, 11, 9, 10, 20, 3]
console.log(m)//[12, 11, 9, 10, 20, 3]//数组m已经被改变
r=m.reverse()
console.log®;//[3, 20, 10, 9, 11, 12]

代码示例：

var t = ['a', 'b', 'c', 'd', 'e', 'f'];
 console.log(t.pop());//f
  console.log(t);//["a", "b", "c", "d", "e"]
  var r = t.push(3);
   console.log(r);//6
   console.log(t);// ["a", "b", "c", "d", "e", 3]
   总结：pop,shift出，则返回的都是出去的元素，push和unshift是增加元素，返回的都是新数组的长

sort方法的演示1

 <script>
    // 对数组进行排序
    var t = ['c', 'b', 'd', 'e', 'a'];
    console.log(t);   // (5) ["c", "b", "d", "e", "a"]
    t.sort(); // 对数组中的元素进行排序,改变的是原来的数组
    console.log(t);

    // 如果是数字进行排序
    var arr = [33, 10,  1, 22, 12, 222, 30];
    console.log(arr);
    // sort方法是按照字符串进行比较大小规则计算排序的。
    // 如果数组中的元素不是字符串类型会转成字符串后进行比较。
    arr.sort();
    console.log(arr);
  </script>

sort方法的演示2

// 排序的算法是根据字符串比较大小的算法进行排序。
 // 不适合于数字的排序。
var m = [ 3, 20, 10 , 9, 11, 12];
 m.sort();
  console.log(m); //[10, 11, 12, 20, 3, 9]
 
      return a - b;
 m.sort(function(a, b) {
      return a-b;
    });
    console.log(m);//[3, 9, 10, 11, 12, 20]
  备注：  a-b默认升序排列
  b-a则是降序排列

concat()示例：

<script>
    var t = [1, 2, 3];
    console.log(t);//[1, 2, 3]
    // 调用数组的链接方法,不会影响原来的数组，函数会返回一个新的拼接的数组。
    var newArr = t.concat('ss', true, 222);
    console.log(t);  // => [1, 2, 3]
    console.log(newArr);//[1, 2, 3, "ss", true, 222]

    var newArr2 = t.concat(['laoma', 'beijing', 999]);
    console.log(newArr2);//[1, 2, 3, "laoma", "beijing", 999]
    console.log([1, 2,3].concat([9,true, ['22',4, 9], 33]))
  //[1, 2, 3, 9, true, Array(3), 33]
  console.log([1, 2,3,9].concat([9,true, ['22',4, 9], 33]))
  //[1, 2, 3, 9,9, true, Array(3), 33]
  </script>

join方法的演示

<script>
    var t = [1, 2, 3];
    // toString方法会把数组转成字符，重写了原型的方法。
    // 把数组中的元素都转成字符串然后用逗号分隔不同的元素。
    console.log(t.toString());//1,2,3

    // join方法也可以将数组转成字符串，默认跟toString一样。
    console.log(t.join());//1,2,3
    console.log(t);//Array(3)//不改变原来的数组

    // join方法可以传一个参数，用来分隔数组中的元素
    console.log(t.join('-'));//1-2-3
    console.log(t.join('|'));//1|2|3
  </script>

数组的slice方法示例

m = [1,2,3,4,5];
m.slice(2);	//=>[3, 4, 5]
m.slice(-3);	//=>[3, 4, 5]
m.slice(3, 4);//=> [4]
m.slice(-3, -1);//=>[3, 4]

证明对元数组是没有任何影响的
 var t = [0,1,2,3,4,5];
var a2 = t.slice(2, 5); // a2=> [2,3,4]
 console.log(a2);
 console.log(t); // [0, 1, 2, 3, 4, 5] 对原数组没有影响

数组的splice方法示例

对元数组是有影响的
参数：可以接受1个参数，2个参数或者2个以上的参数。
第一个参数是删除数据的索引位置(start)
第二个参数是要删除数组元素的个数(end)
第三个参数开始是要插入到原数组中的元素，插入的位置从第一个参数所在的索引开始。
删除数据

1.对原数组是有影响的
 var t = [0, 1, 2, 3, 4, 5];
  var a1 = t.splice(3); // t=> [0, 1, 2]
  console.log(t);
 console.log(a1); // [3, 4, 5]
 
 2.// 传递两个参数： 第一个参数是要删除的起始索引start,
    // 第二个参数：要删除元素的个数。
    var t = [0, 1, 2, 3, 4, 5];
     var a2 = t.splice(3, 1);  // t=> [0,1, 2, 4, 5]
    console.log(t);//对原数组是有影响的 
    console.log(a2); // a2 =>[3]//且返回删除的元素组成的数组
    
    3. // 如果传递：两个以上的参数
    // 第一个： start
    // 第二个： 删除数据的个数
    // 第三个及后面的参数都 要插入到start索引位置的元素。
    var t = [0, 1, 2, 3, 4, 5];
     var a3 = t.splice(3, 2, 'ass', 'bsdd', 'cs');
     console.log(a3); // a3 => [3, 4]
     console.log(t); // [0, 1, 2, "ass", "bsdd", "cs", 5]
     
     4. // splice的应用。给数组任意位置插入元素
     var t = [0, 1, 2, 3, 4, 5];
     t.splice(3,0,'a');
     console.log(t);// t => [0, 1, 2, "a", 3, 4, 5]
  
  5. // 替换数组中的3 为 'a'
  var t = [0, 1, 2, 3, 4, 5];
   t.splice(3,1,'a');
   console.log(t);    // [0, 1, 2, "a", 4, 5]

4.数组的习题

数组数据：[90, 8, 34, 2, 39, 87, 22, 10]
1.将数组内容进行反序
2.求一个数据数组中的最小值及它的索引
3.求一个数组中的数据的平均值与和。
4.数组的数据进行排序
5.给定一个数组，请去掉数组中的重复数据。
6.冒泡排序算法

1.将数组内容进行反序

<script>
    // 数组反序练习
    var t = [90, 8, 34,  2,  39, 87, 22, 10];
    console.log(t);

    // 第一种方法：
    // reverse()；
     t.reverse();
     console.log(t);

    // 不用reverse方法，自己使用循环实现逆序
    // 第二种方法：创建一个新数组，逆序之间存放原数组的数据内容
  var arr = new Array(t.length);
   for(var i = t.length-1, k =0; i >= 0; i--,k++) {
   arr[k] = t[i];
  }
  简便的写法
  for(var i=0; i<t.length; i++) {
   arr[t.length-i-1] =t[i];  // 直接把原数组中的数据赋值给 新数组对应位置的元素
   }
   console.log(arr);

    // 第三种方法：不增加数组的情况下，之间修改；
    for(var i = 0; i < t.length / 2; i++) {
      // t[i]   t[t.length-1-i]
      var temp = t[i];
      t[i] = t[t.length - 1 - i];
      t[t.length - 1 - i] = temp;
    }
    console.log(t);
  </script>

2.求数组中最小值以及其索引

<script>
    // 求数组的最小值及索引
    var t = [90, 8, 34,  2,  39, 87, 22, 10];
    
    var min,minIndex;
    min = t[0];  // 初始化默认最小值为第一个值
    minIndex = 0;

    // 循环数组中的每个值跟默认的最小值进行比较
    for(var i = 1; i < t.length; i++) {
      if(t[i] < min) {
        min = t[i];
        minIndex = i;
      }
    }
    console.log(min);   // => 2
    console.log(minIndex); // =>3
  </script>

3.求数组的和以及平均值

<script>
    // 求一个数组中的数据的平均值与和。
    var t = [90, 8, 34,  2,  39, 87, 22, 10];

    var sum = 0, average = 0;

    for(var i = 0; i < t.length; i++) {
      sum += t[i];
    }

    console.log('和是：' + sum);
    console.log('平均值是：' + sum / t.length);
  </script>

4.数组的数据进行排序

<script>
    // 数组的数据进行排序
    var t = [90, 8, 34,  2,  39, 87, 22, 10];

    t.sort();
    console.log(t);//[10, 2, 22, 34, 39, 8, 87, 90]

    t.sort((a, b)=>(a-b));
    console.log(t);// [2, 8, 10, 22, 34, 39, 87, 90]

    t.sort((a, b)=>(b-a));
    console.log(t);// [90, 87, 39, 34, 22, 10, 8, 2]

  </script>

5.给定一个数组，请去掉数组中的重复数据

方法一：t.indexOf(9); // -1 0 1 ie8 不支持。所以不用
方法二：遍历老数组中的元素，与此同时再遍历新数组中的元素，如果不存在就插入，存在的话就继续进行下一次的循环
方法三：对象属性的哈希去重练习

方法二：

<script>
    // 给定一个数组，请去掉数组中的重复数据
    var t = [90, 8, 34, 8,  2,  39, 90, 87, 34, 22, 10];
    console.log(t)
    var arr = [];
    // 把原数组中的第一个元素插入到新数组中。
    arr.push(t[0]);
    // 把后续的原数组中的元素插入到新数组中，插入前判断新数组中是否存在元素，如果存在继续下一次循环插入，不存在就把元素插入到新数组中。
    for(var i = 1; i < t.length; i++) {  // 遍历原数组中的所有元素，去掉第一个元素
      // t[i]  =>  arr 
      // if(arr.indexOf(t[i]) == -1) {  //此方法不支持ie8！！！！
      //   arr.push(t[i]);
      // }

      // 遍历新数组，看当前t[i]是否在新数组中
      for(var k = 0; k < arr.length; k++) {
        if(t[i] === arr[k]) {
          // 如果相等，说明已经在新数组中存在，那么就不能再把当前元素插入到新数组中了
          break;  // 立即结束判断是否存在的循环
        }
      }

      if( k === arr.length ) {  // 这个时候遍历出来k已经==arr.length了，判断循环是否到最后，到最后说明新数组中没有此t[i]
        arr.push(t[i]);  // 把原数组的元素插入 到新数组中。
      }
    }

    console.log(arr);//[90, 8, 34, 2, 39, 87, 22, 10]
  </script>

方法三：对象属性的哈希去重练习

<script>
    // 55-对象属性哈希去重练习
     // 给定一个数组，请去掉数组中的重复数据
    var t = [90, 8, 34, 8,  2,  39, 90, 87, 34, 22, 10];
    var h = {};  
    for(var k in t) {
      var str  = t[k]; 
      // console.log(str)
      // 把数组中的元素赋值给str
      h[str] = t[k];   // 把数组中的元素值设置给对象的属性，并给属性值赋值为数组的元素
      // 我们利用了：对象的属性不能重复，如果重复定义后面的会覆盖前面的定义。
      // h[8] = 8;
    }
    console.log(h)//{2: 2, 8: 8, 10: 10, 22: 22, 34: 34, 39: 39, 87: 87, 90: 90}

    var arr = [];
    for(var m in h) {
      
      arr.push(h[m]);
    }
    console.log(arr);
  </script>

6.冒泡排序算法

<script>
    var t = [33, 2, 9, 19, 7, 6, 34, 22, 30];
    console.log(t);//[33, 2, 9, 19, 7, 6, 34, 22, 30]
    // 冒泡排序

    // 循环控制趟数,  i是躺数-1
    for(var i = 0; i < t.length -1; i++) {
      // 每一趟里面： 要对比所有的数据进行交换，把大的值交换到后面的位置。
      //每一趟对比的位置是：数组.length-1-趟数(趟数=i+1)--->for(var k = 0; k <= t.length- 1 - (i +1); k++)
      for(var k = 0; k <= t.length- 1 - i -1; k++) {
        // 进行判断大小然后交换两个数据
        if(t[k] > t[k+1]) {
          var temp = t[k];
          t[k] = t[k+1];
          t[k+1] = temp;
        }
      }
    }
    console.log(t);//[2, 6, 7, 9, 19, 22, 30, 33, 34]
  </script>