一、数组基础

1.1、数组的基础知识

  1.         // 数组基础
  2.         var arr = [1, 2, 3, 4, 5];
  3.         console.log(arr.length);
  4.         arr.push(6);
  5.         console.log(arr);

1.2、声明数组和声明对象的三种形式

1.3、声明数组的三种形式

所有数组的都继承与Array.prototype

  1.         // 声明数组和声明对象的三种形式
  2.         var arr1 = [1, 2, 3, 4, 5]; // 数组字面量声明方式
  3.         var arr2 = new Array(11, 22, 33); // 通过系统内置构造函数Array方式声明数组  不推荐
  4.         var arr3 = Array(111, 222, 333); // 不使用
  6.         console.log(arr1, arr2, arr3);
  8.         // 所有数组的都继承与Array.prototype
  9.         console.log(arr1.__proto__);
  10.         console.log(arr2.__proto__);
  11.         console.log(arr3.__proto__);

1.4、数组是特殊的对象

  • index数数组的下标「索引值」它是从0开始，逐级递增的

  • obj.name => JS引擎内部会隐式转换为 obj[‘name’]

    1.       // 数组是特殊的对象
    2.       var arr = [1, 2, 3, 4, 5];
    3.                       // 0  1  2  3  4
    4.                       // index数数组的下标「索引值」它是从0开始，逐级递增的
    6.       var obj = {
    7.           0: 1,
    8.           1: 2,
    9.           2: 3,
    10.           3: 4,
    11.           4: 5
    12.       }
    14.       console.log(arr[2]);
    15.       console.log(obj[2]);
    17.       var person = {
    18.           name: '张三',
    19.           age: 19
    20.       }
    22.       // obj.name => JS引擎内部会隐式转换为 obj['name']

    1.5、稀松数组

  • 系统内置的构造函数Array不能声明稀松数组 ```javascript

    1.   // 稀松数组
    2.   // 数组不一定每一位都有值
    3.   // 系统内置的构造函数Array不能声明稀松数组
    4.   var arr1 = [1, 2, 3, , , , 5, 7,]; //稀松数组，最后一个逗号可以不写
    5.   // var arr2 = new Array(, 1, 3, 5); // 报错，系统内置的构造函数Array不能声明稀松数组
    6.   var arr3 = new Array(5); // [, , , , , ,] 这里的数字代表的是数组长度
    8.   console.log(arr1);
    9.   // console.log(arr2);
    10.   console.log(arr3);
  1. <a name="YhUWJ"></a>
  2. ## 1.6、数组的增改查
  3. ```javascript
  4.         // 数组的增改查
  5.         var arr = [1, 2, 3, 4, 5];
  7.         console.log(arr[5]);
  9.         // 增
  10.         arr[5] = 6;
  11.         console.log(arr);
  13.         // 改
  14.         arr[0] = 100;
  15.         console.log(arr);
  17.         // 查
  18.         console.log(arr[3]);
  21.         // 写成对象的形式
  22.         var obj = {
  23.             0: 1,
  24.             1: 2,
  25.             2: 3,
  26.             3: 4, 
  27.             4: 5
  28.         }
  30.         console.log(obj[5]);

二、数组常用的方法一「这些方法都会改变原有数组」

2.1、增：push/unshift

2.1.1、push方法

  • 向数组末尾追加内容

  • 返回值：执行系统内置的构造函数Array.prototype上的push方法后，返回的数组长度

    1.       // 数组常用的方法一「这些方法都会修改原来的数组」
    2.       // push/unshift
    4.       // 继承与系统构造函数Array.prototype上的方法
    5.       // push: 向数组末尾增加内容
    6.       // 返回值：执行系统内置构造函数上的push方法后，返回的数组长度
    7.       console.log(Array.prototype);
    8.       var arr = [1, 2, 3, 4, 5];
    9.       arr.push(6, 7, 8);
    10.       console.log(arr);

    2.1.2、unshift方法

  • 向数组开始追加内容

  • 返回值：执行系统内置构造函数Array.prototype上的unshift方法后，返回的数组长度

    1.       // unshift: 向数组开始追加内容
    2.       // 返回值: 执行系统内置构造函数Array.prototype上的unshift方法后，返回的数组长度
    3.       var arr = [33, 44, 55, 66];
    4.       arr.unshift(11, 22);
    5.       console.log(arr);

    2.1.3、重写push方法

    1.       // 重写push方法
    2.       Array.prototype.myPush = function(arr){
    3.           for(var i = 0; i < arguments.length; i++){
    4.               this[this.length] = arguments[i];
    5.           }
    7.           return this.length;
    8.       }
    10.       var arr = [1, 2, 3, 4, 5];
    11.       arr.myPush(6, 7, 8);
    12.       console.log(arr);

    2.2、删：pop/shift「不需要参数」

    2.2.1、pop方法

  • 删除数组最后一项

  • 参数：注意不需要参数

  • 返回值：执行系统构造函数Array.prototype上的pop方法后，返回数组被删除的那一项的值

    1.       // pop/shift
    2.       // pop: 删除数组最后一项，不需要参数
    3.       // 返回值：执行Array.prototype上的pop方法后，返回数组被删除的那一项
    4.       var arr = [1, 2, 3, 4, 5];
    5.       arr.pop();
    6.       console.log(arr);

    2.2.2、shift方法

  • 删除数组第一项

  • 参数：注意不需要参数

  • 返回值：执行Array.prototype上的shift方法后，返回数组被删除的那一项的值

    1.       // shift: 删除数组的第一项
    2.       // 参数: 不需要参数
    3.       // 返回值: 执行Array.prototype上的shift方法后，返回数组被删除的那一项的值
    4.       var arr = [1, 2, 3, 4, 5];
    5.       arr.shift();
    7.       console.log(arr);

    2.3、splice方法

    2.3.1、splice方法实现增、删

  • arr.splice(开始项的索引，剪切的长度，剪切后最后一位开始添加数据)

  • splice支持负数索引

  • splice方法可以实现数组的增、删

    1.       // splice(开始向的索引，剪切的长度，剪切后最后一位开始添加数据)
    2.       // splice支持负数索引
    4.       // splice实现删除
    5.       var arr1 = ['a', 'b', 'c', 'd', 'e', 'g'];
    6.       arr1.splice(1, 2); // 从下标1开始，剪切两项
    7.       console.log(arr1);
    9.       // splice实现新增
    10.       var arr2 = ['a', 'b', 'c', 'd', 'e', 'g'];
    11.       arr2.splice(5, 0 , 'f');
    12.       console.log(arr2);
    14.       // splice支持负数索引
    15.       var arr3 = ['a', 'b', 'c', 'd', 'e', 'g'];
    16.       arr3.splice(-1, 0, 'f');
    17.       console.log(arr3);

    2.3.2、重写splice方法

    1.       // 重写splice方法
    2.       Array.prototype.mySplice = function(arr, index){
    3.           if(index >= 0){
    4.               index += 0;
    5.           }else{
    6.               index += this.length;
    7.           }
    9.           return index;
    10.       }
    12.       // 三目运算符版
    13.       Array.prototype.mySplice = function(arr, index){
    14.           return index += index >= 0 ? 0 : this.length;
    15.       }
    17.       var arr = ['a', 'b', 'c', 'd', 'e', 'g'];
    18.       console.log(arr.mySplice(arr, 3));
    19.       console.log(arr.mySplice(arr, -2));

    2.4、数组排序：reverse/sort

    2.4.1、reverse方法

  • 实现数组倒序

  • 参数：不需要参数

  • 返回值：执行Array.prototype上的reverse方法后，返回重新排序后的数组

    1.       // 数组排序：reverse/sort
    2.       // reverse: 实现数组倒序
    3.       // 参数：不需要参数
    4.       // 返回值：执行Array.prototype上的reverse方法后，返回排序后的数组
    5.       var arr = [4, 3, 2, 1];
    6.       arr.reverse();
    7.       console.log(arr);

    2.4. 2、sort方法「重点」

  • sort方法是按照ASCII码表来实现数组排序的

  • 返回值：执行Array.prototype上的sort方法，返回排序后的数组
    • 负值：a排在前面
    • 正值：b排在前面
    • 0：保持不变

  • 如果sort方法不传递参数，那就只能实现简单的排序

    2.       // sort：实现数组排序
    3.       // 参数：可以不要参数，也可以传递一个返回苏
    4.       // 返回值：负值：a排在前面；
    5.       //              正值：b排在前面
    6.       //              0：保持不变
    8.       // 不传递参数：只能实现简单的排序
    9.       var arr1 = [-1, 6, 4, 7, 9, 8, -5];
    10.       arr1.sort();
    11.       console.log(arr1);
    13.       var arr2 = ['b', 'z', 'h', 'i', 'a'];
    14.       arr2.sort();
    15.       console.log(arr2)

  • sort方法传递一个函数可以实现万能的排序

    1.       // 传递一个函数参数，可以实现万能排序
    2.       var arr3 = [27, 49, 5, 7];
    3.       // arr3.sort();
    4.       // console.log(arr3);
    5.       arr3.sort(function(a, b){
    6.           if(a > b){
    7.               return 1;
    8.           }else{
    9.               return -1;
    10.           }
    11.       });
    13.       // 简写
    14.       // arr3.sort(function(a, b){
    15.       //     return a - b;
    16.       // });
    18.       console.log(arr3);

    2.4.3、实例排序

    1.       // 排序实例
    2.       // 按照年龄从小到大排序
    3.       var arr = [
    4.           {
    5.               son: 'Jenny',
    6.               age: 18
    7.           },
    8.           {
    9.               son: 'Jone',
    10.               age: 10
    11.           },
    12.           {
    13.               son: 'Ben',
    14.               age: 16
    15.           },
    16.           {
    17.               son: 'Crytal',
    18.               age: 3
    19.           },
    20.           {
    21.               son: 'Lucy',
    22.               age: 11
    23.           }
    24.       ];
    26.       arr.sort(function(a, b){
    27.           if(a.age > b.age){
    28.               return 1;
    29.           }else{
    30.               return -1;
    31.           }
    32.       });
    34.       console.log(arr);
    1.       // 排序实例二
    2.       // 按照字符串长度排序
    3.       var arr = ['12345', '1', '1234', '12', '1234567'];
    4.       arr.sort(function(a, b){
    5.           if(a.length > b.length){
    6.               return 1;
    7.           }else{
    8.               return -1;
    9.           }
    10.       });
    12.       console.log(arr);

    三、作业

  • 用mySplice方法实现myUnshift方法

  • 请按照字节数实现下列数组的排序 [‘我爱你’, ‘OK’, ‘Hello’, ‘你说WHAT’, ‘可以’]