数组的常用方法（详解）

数组常用方法

1.arrayObject.shift();无参数，删除数组的第一项，返回删除项，原数组改变。

  //例如
  var arr = [1,2,3];
  arr.shift();   //返回结果为[1]，原数组为[2,3]

2.arrayObject.unshift(num1[,num2...]);将元素插入到数组的起始位置,返回新数组的长度，原数组改变。

  //例如
  var arr = [1,2,3];
  arr.unshift(4,5);   //返回结果为5，原数组为[4,5,1,2,3]

3.arrayObject.pop();无参数，删除数组的最后项，返回删除项，原数组改变。

  var arr = [1,2,3];
  arr.pop();   //返回结果为[3]，原数组为[1,2]

4.arrayObject.push(num1[,num2...]);插入到数组的末尾，返回新数组的长度，原数组改变。

  var arr = [1,2,3,9];
  arr.push(7,8); //返回结果为6，原数组为[1,2,3,9,7,8]

5.arrayObject.splice(index,length[,num1,num2...]);index参数必选，从索引index处删除length个（若length不传，则从index处删除至末尾），用num1，num2...代替删除的内容，返回删除项，原数组改变。

  var arr = [1,2,3,9];
  arr.splice(1,2,11);  //返回结果为[2,3],原数组为[1,11,9]

6.arrayObject.slice(start,end);截取，返回截取后的数组，原数组不变。

start:必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2指倒数第二个元素，以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么截取的数组包含从start到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

  var arr = [0,1,2,3,4,5,6,7,8];
  var newArr = arr.slice(2,6);
  var newArr1 = arr.slice(-2);
  console.log(newArr); //[ 2, 3, 4, 5 ]
  console.log(newArr1); //[ 7, 8]
  console.log(arr); //原数组不变[ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]

7.arrayObject.concat(num1[,num2...]);合并数组，返回合并后的数组，原数组不改变。

  var arr = [1,2,3];
  arr.concat(4,5);  //返回结果为[1,2,3,4,5],原数组为[1,2,3]

8.arrayObject.reverse();数组倒序，返回倒序后的数组，原数组改变。

    var arr = [1,2,3];
    arr.reverse();  //返回结果为[3,2,1],原数组为[3,2,1]

9.arrayObject.sort(function);对数组的元素排序，返回排序后的数组，原数组改变

数组在原数组上进行排序，不生成副本。

    var arr = [11,22,3];
    arr.sort(function(a,b) {
      return a-b;  //由大到小排列，b-a为由小到大
    }); 
    console.log(arr);//返回结果为[3,11,22],原数组为[3,11,22]

若无参数，则按照字符编码的顺序进行排序，需要将数组的元素都转换成字符串（如有必要），以便进行比较。

  var arr = ['3','11', '22', '1'];
  arr.sort();  //结果为[ '1', '11', '22', '3' ]

若比较的为对象数组

   //需求：对age进行排序
   let objArr = [
       {"name": "Kenny", "age": 24},
       {"name": "Alice", "age": 18},
       {"name": "Leo", "age": 52},
       {"name": "Kiki", "age": 22},
   ];
   objArr.sort(function (a, b) {
       var ageA = a.age;
       var ageB = b.age;
       if (ageA < ageB) {
           return -1;
       } else if (ageA > ageB) {
           return 1;
       } else {
           return 0;
       }
   });
   console.log(objArr);
   /*结果
   [ { name: 'Alice', age: 18 },
   { name: 'Kiki', age: 22 },
   { name: 'Kenny', age: 24 },
   { name: 'Leo', age: 52 } ]*/

数组为汉字，按照汉字的Unicode编码来排序。

   var arr = ['北','京','我','爱','你'];
   //汉字对应的Unicode编码：u5317  u4eac  u6211  u7231  u4f60
   arr.sort(function (a,b) {
       return a.localeCompare(b);
   });
   console.log(arr); //[ '京', '你', '北', '我', '爱' ]

10.arrayObject.join(separator)将数组的元素组成一个字符串，以separator分开，若不传参数，则默认以逗号分开;返回组成后的字符串，原数组不变。

var arr = [0,1,2,3,4,5,6,7,8];
var str = arr.join('*');
console.log(str); //返回的结果为：'0*1*2*3*4*5*6*7*8'

11.arrayObject.indexOf(num1[,start])从数组start位置往后查询，若start不传，则默认从数组索引0处开始往后查询；返回查到的元素的索引，若该元素不存在这个数组中，则返回-1。（ES5新增）

此方法可用于判断某一个元素是否存在于数组中。

var arr = [1,2,3];
var index = arr.indexOf(3);
var index1 = arr.indexOf(5);
console.log(index); //返回的结果为：2
console.log(index1); //返回的结果为：-1

12.arrayObject.lastindexOf(num1[,start])用法同indexOf一致，从数组start位置往前查询，若start不传，则默认从数组最后一项开始往前查询，返回查到的元素的索引，若该元素不存在这个数组中，则返回-1。（ES5新增）

var arr = [0,1,2,3,2];
var lastIndex = arr.lastIndexOf(2);
var lastIndex1 = arr.lastIndexOf(2,3);
console.log(lastIndex); //结果为4
console.log(lastIndex1); //结果为2

13.arrayObject.toString();将数组转换为字符串，并返回结果,原数组不变。

 > 返回值与没有参数的 join() 方法返回的字符串相同。

  var arr = [0,1,2,3];
  var str = arr.toString();
  console.log(str); //结果为'0,1,2,3';

14.Array.prototype.slice.call();类数组转数组,原数组不变。

var obj = {length:4,0:'hello',1:'word',2:'bei',3:'jing'};
var arr = Array.prototype.slice.call(obj);
console.log(arr);//结果：[ 'hello', 'word', 'bei', 'jing' ]

该方法不兼容，顺带写一个类数组转数组兼容处理的方法（如下）。

var toArray = function (obj) {
    var ary = [];
    try {
        ary = Array.prototype.slice.call(obj);
    } catch (e) {
        for (var i = 0; i < obj.length; i++) {
            ary.push(obj[i]);
        }
    }
    return ary;
};

15.ES5新增的遍历数组方法：forEach、map、filter、find，原数组均不改变。

• arrayObject.forEach(callback[,thisObj])（callback参数为function，thisObj参数为this指向）遍历数组中的每一项，无返回值。

var arr = [2 ,3, 4];
arr.forEach(function(item,index,self){
    //item 数组的每一项，依次为：2，3,4
    //index 对应的数组索引，依次为：0，1,2
    //self 数组本身，依次为：[2 ,3, 4]，[2 ,3, 4],[2 ,3, 4]
});

forEach的封装

Array.prototype.myForEach = function (callback, context) {
    context = context || window;
    if ('forEach' in Array.prototype) {
        this.forEach(callback, context);
        return;
    } else {
        for (var i = 0; i < this.length; i++) {
            callback.call(context, this[i], i, this);
        }
    }
}

• arrayObject.map(callback[,thisObj])：映射，基本用法跟forEach类似，但是有返回值，返回值是一个数组，记录了每一个回调函数的返回值。

//有返回值的情况
var arr = [1, 2, 3, 4];
var arr1 = arr.map(function (item, index, self) {
    return item*10;
});
console.log(arr1);//输出：[ 10, 20, 30, 40 ]
//无返回值的情况
var arr2 = arr.map(function (item, index, self) {});
console.log(arr2);//输出：[ undefined, undefined, undefined, undefined ]

map的封装

  Array.prototype.myMap = function (callback, context) {
      context = context || window;
      if ('map' in Array.prototype) {
          return this.map(callback, context);
      } else {
          var ary = [];
          for (var i = 0; i < this.length; i++) {
              var res = callback.call(context, this[i], i, this);
              ary.push(res);
          }
          return ary;
      }
  }

• arrayObject.filter(callback[,thisObj])：过滤，返回过滤后的数组，基本用法跟map非常类似，callback返回值弱等于（==）true或者fasle,若为true,则表示通过（该元素保留下来了，继续查找下一项），false表示不通过(继续查找下一项)。

   //过滤偶数
   var arr = [1, 2, 3, 4, 5, 6];
   var arr1 = arr.filter(function (item, index, self) {
       return item % 2 == 0;
   });
   console.log(arr1);//输出结果为：[ 2, 4, 6 ]

• arrayObject.find(callback[,thisObj]);查找，返回符合符合条件的数组，基本用法跟filter类似，callback返回值弱等于（==）true或者fasle,若为true,则表示找到该项，并返回，不再继续查找下一项，false表示未找到(继续查找下一项)。

区别：filter返回所有符合条件的值（相当于find all），find返回第一个符合条件的值。

   //查找第一个值为偶数
      var arr = [1, 2, 3, 4, 5, 6];
      var arr1 = arr.find(function (item, index, self) {
          return item % 2 == 0;
      });
      console.log(arr1);//输出结果为：[2]