javascript 数组的常用方法总结

前言

主要讨论一下数组的方法，
     1、splice和slice的区别
     2、pop和push
     3、shift和unshift
     4、join
     5、forEach(es5)
     6、Array.isArray(es5)
     7、filter和map区别(es5)
     8、some和every区别(es5)
     9、reduce和reduceRight的区别(es5)
     10、indexOf和lastIndexOf(es5)

一、splice和slice的区别

这两个方法是在太像了，但是用处却完全不一样。javascript是外国人开发的，当然不能从表面来看，实质它们的英文意思却相差很远，这个英文不好的人呀~
      splice  译为剪切
      slice    译为切片、部分、划分
      splice用于用于插入、删除或替换数组的元素（注：同样会返回删除或者替换的数组，但会改变原来数组）。

slice可提取字符串的某个部分，并以新的字符串返回被提取的部分（注：返回提取的部分，但是不会改变原来数组）。

       splice (start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

数组从 start下标开始，删除deleteCount 个元素，并且可以在这个位置开始添加 n个元素(注意：deleteCount是删除的个数，而不是删除到哪里)

当deleteCount 为0 的时候，item不为零，也就是在数组的test的start位置最前面插入新的元素，因为deleteCount为0，也就是删除的数据为空。

 var test = [0,1,2,3,4,5];
 var changeTest = test.splice(0,0,1);
 console.log(test);
 console.log(changeTest);

 //console    [1, 0, 1, 2, 3, 4, 5]
 //console    [];

 var test = [0,1,2,3,4,5];
 var changeTest = test.splice(1,0,1);
 console.log(test);
 console.log(changeTest);

 //console    [0, 1, 1, 2, 3, 4, 5]
 //console    []

当参数只有 start，deleteCount时，就是从start 下标开始删除deleteCount 个数组的元素，并且返回

 var test = [0,1,2,3,4,5];
 var changeTest = test.splice(0,1);
 console.log(test);
 console.log(changeTest);
 //console    [1, 2, 3, 4, 5]
 //console    [0]

 var test = [0,1,2,3,4,5];
 var changeTest = test.splice(1,3);
 console.log(test);
 console.log(changeTest);
 //console [0, 4, 5]
 //console [1, 2, 3]

当参数只有start参数时，就是删除 从start下标起至最后 的元素，并且返回

 var test = [0,1,2,3,4,5];
 var changeTest = test.splice(1);
 console.log(test);
 console.log(changeTest);
 //console [0]
 //console [1, 2, 3, 4, 5]

当参数 为负的时 则该参数规定的是从数组元素的尾部开始算起的位置 （-1 指的是 数组中倒数第一个元素， -2 指的是，数组中倒数第    二个元素。）

 var test = [0,1,2,3,4,5];
 var changeTest = test.splice(-2,1);
 console.log(test);
 console.log(changeTest);
 //console [0, 1, 2, 3, 5]
 //console [4]

 slice（start，end）

对于数组对象来说，slice 方法提取 从 start下标起，以end下标为结尾一段元素（但不包括end下标的元素），然后返回新的数组，对原   数组没有任何是影响。（注：end是下表的结尾，slice中第二个参数跟splice第二个参数的区别）

 var test = [0,1,2,3,4,5];
 var changeTest = test.slice(0,2);
 console.log(test);
 console.log(changeTest);
 //console [0, 1, 2, 3, 4, 5]
 //console [0, 1]

当参数为负时 则该参数 是从 数组的末尾 索引 开始算起，（-1 指的是 数组中倒数第一个元素， -2 指的是，数组中倒数第二个元素。）

 var test = [0,1,2,3,4,5];
 var changeTest = test.slice(-2,-1);
 console.log(test);
 console.log(changeTest);
 //console [0, 1, 2, 3, 4, 5]
 //console [4]

当参数为一个参数，当为一个参数时，提取 是以 start下标起 至末尾的 部分元素。当start 为0 时，相当于克隆一个新的数组

 var test = [0,1,2,3,4,5];
 var changeTest = test.slice(0);
 changeTest.push(1);
 console.log(test);
 console.log(changeTest);
 //console [0, 1, 2, 3, 4, 5]
 //console [0, 1, 2, 3, 4, 5, 1]

二、pop和push的区别

pop和push是数组的非常常用的一对方法。

push()方法可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后的数组长度。

             var arr = [];
             var newArr = arr.push("pop");
             console.dir(arr);
             console.dir(newArr);
             //console ["pop"]
             //console 1

pop()方法则从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

             var arr = ["p","o","p"];
             var newArr = arr.pop();
             console.log(arr);
             console.log(newArr);
             //console ["p", "o"]
             //console p

其实这两个方法就可以构成了一个简单得数据结构栈，栈是指后进先出，正好符合我们得这两个方法。

             function stack(arr){
                 this.stack = arr || [];
             }
             stack.prototype = {
                 pop: function(){
                     return this.stack.pop();
                 },
                 push: function(arr){
                     return this.stack.push(arr);
                 },
                 print: function(){
                     console.log(this.stack);
                 },
                 getLength: function(){
                     return this.stack.length;
                 }
             }

             var stackArr = new stack();
             stackArr.push('a');
             stackArr.push('b');
             stackArr.print();
             stackArr.pop();
             stackArr.print();
             //console  ["a", "b"]
             //console ["a"]

三、shift和unshift的区别

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。这个方法跟push正好相反，功能也相对。

     var arr = ["abc"];
     var newArr = arr.unshift("pop");
     console.log(arr);
     console.log(newArr);
     //console ["pop","abc"]
     //console 2

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。这个方法pop正好相反，功能也相对。

             var arr = ["p","o","p"];
             var newArr = arr.shift();
             console.log(arr);
             console.log(newArr);
             //console ["o", "p"]
             //console p

学到这连个方法，建立一个简单得队列也就非常的容易，队列就是指先进先出。

             function queue(arr){
                 this.queue = arr || [];
             }
             queue.prototype = {
                 remove: function(){
                     return this.queue.shift();
                 },
                 add: function(arr){
                     return this.queue.unshift(arr);
                 },
                 print: function(){
                     console.log(this.queue);
                 },
                 getLength: function(){
                     return this.queue.length;
                 }
             }

             var queueArr = new queue();
             queueArr.add('a');
             queueArr.add('b');
             queueArr.print();
             queueArr.remove();
             queueArr.print();
             //console  ["b", "a"]
             //console ["a"]

四、join(数组转化字符串)

join() 方法用于把数组中的所有元素放入一个字符串(原数组不变)。

元素是通过指定的分隔符进行分隔的。

             var test = [1,2,3,4,5,6];
             var res1 = test.join(',');
             var res2 = test.join('|');
             console.log(test);
             console.log(res1);
             console.log(res2);

             //console  [1, 2, 3, 4, 5, 6]
             //console  1,2,3,4,5,6
             //console  1|2|3|4|5|6

五、forEach(es5新方法)

下面复习一下es5,各个浏览器对es5的支持程度有所不同，因此用这个方法的同学就需要注意了喽，可见前端的程序员有多么苦逼了，兼容各种css不说，连js也有兼容的问题。不过移动端得童鞋就不用担心了。目前大部分浏览器是支持的。不过不用担心，在不支持的浏览器下我们可以扩展一下这个方法。

forEach 定义为数组中的每个元素执行指定操作。其实就是可以遍历数组，但是需要注意了，回调函数的第一个值为value，第二个值为key，第三个值为数组

             var test = ["a","b","c","d","e"];
             test.forEach(function(v, k, arr){
                 console.log("key"+k,"值"+v);
                 console.log("数组"+arr);
             });

             //console key0 值a
             //console 数组a,b,c,d,e
             //console key1 值b
             //console 数组a,b,c,d,e
             //console key2 值c
             //console 数组a,b,c,d,e
             //console key3 值d
             //console 数组a,b,c,d,e
             //console key4 值e
             //console 数组a,b,c,d,e

如果不支持的浏览器，可以扩展

  if (Array.prototype.forEach === undefined) Array.prototype.forEach = function(callback){
      var i,len = this.length;
      if(callback && typeof callback == "function"){
           for(i = 0; i < len; i++){
               callback.call(this, this[i], i, this);
           }
      }
  }

六、isArray(es5新方法)

说起判断数组的类型

var arr = [1,2,3,1]; 
alert(arr instanceof Array); // true

var arr = [1,2,3,1]; 
alert(arr.constructor === Array); // true

上述有些漏洞的，当你在多个frame中，由于每个iframe都有一套自己的执行环境，跨frame实例化的对象彼此是不共享原型链的，因此导致上述检测代码失效，有人提出用

function isArrayFn (o) { 
    return Object.prototype.toString.call(o) === '[object Array]'; 
} 
var arr = [1,2,3,1]; 
alert(isArrayFn(arr));// true

当然原声的isArray这个方法就解决了所有的问题，但是ie8以及以前得浏览器是不支持的。

扩展这个方法

if(Array.isArray === undefined) Array.isArray = function(o){
    return Object.prototype.toString.call(o) === '[object Array]';
}　

七、filter和map区别(es5新方法)

filter从字面意思就可以看出来是过滤的意思，也就是过滤数组的意思，当回调函数返回真，那么就把这个元素保留在新的数组中，这个方法并不会改变原数组。  

 var arr1 = "Charles, Hector, Joy, Mars,Jonson".split(",");
 var arr2 = arr1.filter(
 function(item, index) {
     if (item.indexOf("o") > -1) {
         return true;
     }
 });

 console.log(arr1);
 console.log(arr2)  

 //console ["Charles", " Hector", " Joy", " Mars", "Jonson"]
 //console [" Hector", " Joy", "Jonson"]

    map的意思就是遍历，跟forEach类似，不过如果是改变数组最好用map

 var arr1 = "Charles, Hector, Joy, Mars,Jonson".split(",");
 var arr2 = arr1.map(
 function(item, index) {
     if (item.indexOf("o") > -1) {
         return item;
     }else{
          return "name";
      }
 });

 console.log(arr1);
 console.log(arr2)  

 //console ["Charles", " Hector", " Joy", " Mars", "Jonson"]
 //console ["name", " Hector", " Joy", "name", "Jonson"]         

八、some和every区别(es5新方法)

some是判断数组有没有符合条件的元素，有的话就返回true，every是对数组的每个元素进行一个callback的条件检查，查看是否存在有不符合条件的元素。
     注意当遍历every时，只要有一个return false，则返回false，只有每一个都返回true的时候才为true。
     some是当只有一个返回true，就返回true。    

 var arr1 = "Charles, Hector, Joy, Mars,Jonson".split(",");
 var arr2 = arr1.some(
 function(item, index) {
     if (item.indexOf("o") > -1) {
         return true
     }else{
          return false;
      }
 });

 console.log(arr1);
 console.log(arr2)  

 //console ["Charles", " Hector", " Joy", " Mars", "Jonson"]
 //console true

 var arr1 = "Charles, Hector, Joy, Mars,Jonson".split(",");
 var arr2 = arr1.every(
 function(item, index) {
     if (item.indexOf("o") > -1) {
         return true
     }else{
          return false;
      }
 });

 console.log(arr1);
 console.log(arr2)  

 //console ["Charles", " Hector", " Joy", " Mars", "Jonson"]
 //console false

九、reduce和reduceRight的区别(es5新方法)

reduce 和reduceRight对数组中的所有元素调用指定的回调函数。 该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。第一个参数是累加结果，第二个数是下一个数据。reduce和reduceRight一个是从正向，一个是从反向遍历。

 var test = ["a","b","c","d"];
 test.reduce(function(a,b){
    console.dir(a+","+b);
    return a+b;
 })
 //console a,b
 //console ab,c
 //console abc,d
 //console "abcd"
 var test = ["a","b","c","d"];
 test.reduceRight(function(a,b){
    console.dir(a+","+b);
    return a+b;
 })
 //console d,c
 //console dc,b
 //console dcb,a
 //console "dcba"

十、indexOf和lastIndexOf(es5新方法)

lastIndexOf(searchvalue, fromindex) 和indexOf 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置。第一个参数必选就是需要查找的数据，第二个参数可选，为开始的位置。他们得区别就是indexOf从前网后搜索，而lastIndexOf是从后往前搜索。

 console.log(["Hello", "javaScript", "ECMAScript","javaScript" ,"HTML5"].indexOf("javaScript"));
 console.log(["Hello", "javaScript", "ECMAScript","javaScript" ,"HTML5"].indexOf("javaScript",2));
 console.log(["Hello", "javaScript", "ECMAScript","javaScript" ,"HTML5"].lastIndexOf("javaScript"));
 console.log(["Hello", "javaScript", "ECMAScript","javaScript" ,"HTML5"].lastIndexOf("javaScript",2));
 //console 1
 //console 3
 //console 3
 //console 1