js_关于数组（三）

1. 认识数组

js的数组是参考python中的列表来的

• 如果需要存储和处理一些类似的数据的时候，用变量或者对象的属性来存储，就非常的不灵活

• 特点：

  1. js中数组同一个数组，可以存储任意的类型
  2. js中的数组的长度可以动态的更改
  3. 对数组中的元素可以随意的进行增删改

1.1 - 遍历数组中的元素

普通的循环（for）

    var arr = [10, 20, 1, 4, 6, 9, 30];
    for(var i=0; i<arr.length; i++){
        console.log(arr[i]);
    }

    var arr = [10, 20, 1, 4, 6, 9, 30];
    var sum = 0;
    for(var i=0; i<arr.length; i++){
        sum += arr[i];
    }
    console.log(sum);    //80

• 用循环的方式打印出来下面的没有规律的图形

    //用循环额方式打印出来下面的没有规律的图形
    var arr = [7, 4, 1, 7, 10];
    for(var i=0; i<arr.length; i++){
        for(var j=0; j<=arr[i]; j++){
            document.write("*");
        }
        document.write("<br>");
    }

for....in

    var obj = {
        age : 20,
        sex : "male",
        name : "lisi",
        speak : function(){
        }
    }
    for(var attName in obj){
        console.log(attName, obj[attName]);
    }

    var arr = [10, 20, 1, 4, 6, 9, 30];
    for(var i in arr){
        console.log(i,arr[i]);
    }

• 也是用来遍历
• for..in不是主要用来遍历数组，它主要用来遍历对象的属性的
• 用for..in遍历数组的时候，遍历出来的时候数组元素的索引，
• 一般不喜欢使用for...in来遍历数组

for...of遍历

    var arr = [10, 20, 1, 4, 6, 9, 30];
    for(var  e of arr){     //复制了一份给了变量e
        console.log(e);
    }               //10,20,....

    var arr = [{age :10}, {age:20}];
    for(var obj of arr){
        obj.age = 100;
        console.log(obj);
    }
    console.log(arr);    //100/100

• 不能更改下标值/索引值。但是可以更改对象属性值
• 是es6新增的一种遍历，只要有迭代器都可以使用for..of数组，字符串，set, map支持
• 注意：只能读取遍历到的元素，不能更改这个元素

数组的forEach方法可以用来遍历数组

数组提供的一种遍历自己的元素的功能

    var arr = [10, 20, 1, 4, 6, 9, 30];
    arr.forEach(function(element, index){    //回调函数
        console.log(element, index);
    })

    arr.forEach(function(element, index, array))

---

2. 数组的转换方法

2.1 - toString():

把数组转换成一个字符串

• 把每个元素转成字符串之后，再用逗号连接起来

    var arr = [10, 20, 30, 40];
    console.log(arr.toString());
    // 10,20,30,40

2.2 - join():

把数组转换成字符串，中间用的连接符号，可以自定义

    var arr = [10, 20, 30, 40];
    console.log(arr.join(" | "));
    //10 | 20 | 30 | 40

---

3. 数组的比较

    var arr1 = [1];
    var arr2 = [1];
    console.log(arr1 == arr2);   //false
    console.log(arr1 == "1");    //true
    console.log(arr1 == 1);    //true

    var arr = [{}, {age : 20}];
    console.log(arr.toString());
    //[object Object],[object Object]
    //任何对象默认转换成以上。

• {}.toString会变成[object Object]

---

4. 数组的模拟栈的操作

栈：

其实就是操作数组尾部的元素

• push
  • 入栈

  var arr = [10, 20, 30];
  arr.push(100);
  arr.push(100, 200, 300);
  console.log(arr);
  //(7) [10, 20, 30, 100, 100, 200, 300]
  

• pop
  • 删除数组最后一个元素，一次只能删除一个

  var arr = [10, 20, 30];
  arr.push(100);
  arr.push(100, 200, 300);
  console.log(arr);
  arr.pop();
  arr.pop();
  console.log(arr);
  //(5) [10, 20, 30, 100, 100]
  

队列:

操作的数组头部的元素

• shift
  • 删除头部的元素

  var arr = [10, 20, 30];
  arr.shift();
  console.log(arr);
  //(2) [20, 30]
  

• unshift
  • 向数组的头部添加元素

  var arr = [10, 20, 30];
  arr.unshift(1);
  arr.unshift(100, 200);
  console.log(arr);
  //(6) [100, 200, 1, 10, 20, 30]
  

---

5. 数组中元素的倒置（翻转）

• reverse
  • 把数组中的元素倒置，翻转过来

  var arr = [10, 20, 40, 33, 88];
  arr.reverse();
  console.log(arr);
  //(5) [88, 33, 40, 20, 10]
  

• indexOf(<num>[, fromIndex])
  • 返回的是从左开始查找第一次碰到的元素索引
  • 判断是否相等，是使用的严格相等===

  var arr = [10, 20, 40, 40, 33, 88];
  var i = arr.indexOf(40);
  console.log(i);
  // 2
  

  var arr = [10, 20, 40, 44, 40, 33, 88];
  var i = arr.indexOf(40, 3);   //3指从第3索引值位置开始查找
  console.log(i);
  // 4
  

  []指示可给可不给
  <>必须有
  

• lastIndexOf(<num>[, formIndex])
  • 返回的是从右开始查找的元素索引

  var arr = [10, 20, 40, 44, 40, 33, 40, 88];
  var i = arr.lastIndexOf(40);
  console.log(i);
  // 6
  

  • indexOf/lastIndexOf
    • 访问值不存在在数组中时：
    • 将会++返回-1，即说明此元素，并不存在++

    //如果返回-1，说明这个元素。不存在
    var arr = [10, 20, 40, 44, 40, 33, 40, 88];
    var i = arr.indexOf(1000);
    console.log(i);
    //-1
    

• 控制台调试方式

      // 控制台调试方式
      console.log(arr);   //日志
      console.table(arr);  //表格形式
  

---

6. 数组的连接

• concat: 方法并不会修改原数组，而是连接后返回新的数组返回给调用者/ ——————合并

    var arr1 = [10, 20];
    var arr2 = [30, 40];
    var arr3 = [55, 77];
    var newArr = arr1.concat(arr2, arr3);
    console.log(newArr);    //返回新的，不改变原数组
    // for(var e of arr2){
    //     arr1.push(e);
    // }
    // console.log(arr1);  //(4) [10, 20, 30, 40]

    var arr1 = [10, 20];
    var arr2 = [30, 40];
    var a = [...arr1, ...arr2];  //...展开运算符
    console.log(a);

---

7. 数组的切片操作

• slice(from, end): 从from位置开始切，切到end结束，
  • 把切到的元素 组成新的数组返回
  • 不会对原数组造成任何的影响
  • 前面包括，后面不包括
  • 前闭后包

  var arr = [10, 20, 40, 50, 60];
  var a1 = arr.slice(0, 3);  //end-form就是切到的个数
  console.log(a1);    //10， 20， 40
  console.log(arr);
  

  • 注意
    • 如果没有end，就直接切到最后面
    • 如果from也省略，表示从0开始切，这个时候，其实是完成了原数组的复制。
    • 复制都是浅复制
    • 切片的时候，开始位置和结束位置都支持负值
    • -1就表示倒数第一个元素。-2同。

  var arr = [30, 40, 50, 60, 70, 80, 30];
  var i = arr.indexOf(30);
  var j = arr.lastIndexOf(30);
  var a2 = arr.slice(i+1, j);
  console.log(a2);
  

• splice(参数1, 参数2，参数3....):一个方法实现三种操作：添加，删除，替换，
  • 参数1 ：从哪个位置开始操作数组中的元素
  • 参数2： 删除多少个元素， 如果不删就是0
  • [参数3们]： 表示添加的元素

  var arr = [10, 20, 30, 40, 50, 60, 70];
  //删除操作
  console.log(arr.splice(2, 3));
  arr.splice(0, 0, 100, 200, 300);
  console.log(arr);
  

---

8. 数组的排列算法

需要对数组中的元素进行排序

• 冒泡排序

  var arr = [10, 2, 3, 8, 20, 9];
  for(var j=0; j<arr.length-1; j++){
      for(var i=0; i<arr.length-1-j; i++){
          if(arr[i] > arr[i+1]){
              var temp = arr[i];
              arr[i] = arr[i+1];
              arr[i+1] = temp;
          }
      }
  }
  console.log(arr);
  

• 插入排序
• 选择排序
• 希尔排序
• 归并排序
• 快速排序

---

9. JS自带的排序

• sort: 默认情况是按照字符串来进行排序的
  • sort永远是把“小”的放前面，“大”的放后面

  /*
  如果参数函数的返回值
  >0      认为a > b
  =0      认为a == b
  <0      认为a < b
   */
  var arr = [10, 2, 3, 8, 20, 9];
  arr.sort(function(a, b){
      return a-b;
      // if(a > b){
      //     return 1;
      // }else if(a == b){
      //     return 0;
      // }else{
      //     return 1;
      // }
  });
  console.log(arr);   //数字的写法排序
  

10. 判断数组的类型

1. instanceof
   • arr instancceof Array
   • 一般不建议使用，容易有bug

   var arr = [];
   function foo(arr){
       if(!(arr instanceof Array)) return; //判断数组类型
       var a = arr.slice(0);
   }
   foo(10);//不判断会出错
   

2. Array.isArray(arr)
   • ==直接定义在函数对象上的方法，就叫静态方法==
   • 函数名.静态方法（）

   console.log(Array.isArray(arr));  
   console.log(typeof arr);   //object
   console.log(Object.prototype.toString.call(arr));  //object array
   

---

11. 二维数组

JS中的二位数组，并不是真正的二维数组，使用一维数组模拟出来的

• var arr = [[], []]; //多维数组/二维数组

    var arr = [
        [10, 20],
        [100, 200],
        [300]
    ];   //多维数组/二维数组
    // console.log(arr[0][0]);    //10
    for(var i=0; i<arr.length; i++){
        // var a = arr[i];
        for(var j=0; j<arr[i].length; j++){
            console.log(arr[i][j]);
        }
    }    // 10, 20, 100, 200, 300

---

12. 数组的去重

    var arr = [10, 10, 10, 10, 20, 1, 3, 10, 20, 4, 4];
    function toHeavy(arr){
        for(var i=0; i<arr.length; i++){
            var num = arr[i];
            // for(var j=i+1; j<arr.length; j++){
            //     if(num == arr[j]){
            //         arr.splice(j, 1);
            //         j--;
            //     }
            // }
            for(var j=arr.length-1; j>=i+1; j--){
                if(num == arr[j]){
                    arr.splice(j, 1);   //从后往前
                }
            }
        }
    }
    function toHeavy1(arr){
        var set = new Set(arr);
        arr.length = 0;
        arr.push(...set);
    }
    toHeavy1(arr);
    console.log(arr);

---

13. 数组的一些其他方法

    //所有的数组，都增加一个可以计算所有的元素的和的功能
    Array.prototype.sum = function(){
        var sum = 0;
        for(var i=0; i<this.length; i++){    //this就是用户创建的那些数组
            sum += this[i];
        }
        return sum;
    }
    var arr = [10, 20];
    var arr2 = [20, 30];
    console.log(arr.sum());   //30
    console.log(arr2.sum());    //50

    var a = new Array(10, 20, 30);
    console.log(a.sum());       //60

---