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