超全数组方法总结

首先我们需要与其他语言区分的是：JS数组的每一项可以保存任何类型的数据。
创建数组的基本方式有两种：

//第一种：
var colors = new Array();
可以直接向Array构造函数传递数组中应该包含的项
var colors = new Array("red","blue","green");
但是如果只给数组传一个值，且这个值是数值的话，则会按照该数值创建包含给定项数的数组
var colors = new Array(3);//创建一个包含3项的数组
var colors = new Array("Greg");//创建一个包含1项，即字符串"Greg"的数组
//第二种:
var colors = ["red","blue","green"];//创建一个含三个字符串的数组
var names = [];//创建一个空数组
取数组长度
alert(colors.length);//3
colors[2] = "black";//修改第三项
colors[3] = "brown";//新增第四项

length属性不只是只读的，可以通过这个属性从数组的末尾移除项或从数组中添加新项

var colors = ["red","blue","green"];//创建一个含三个字符串的数组
colors.length = 2;//此操作移除了最后一项
alert(colors[2]);//undefined
colors[colors.length] = "black";//添加一种颜色
colors[colors.length] = "brown";//再添加一种颜色

理解以上内容后，下面我们就来介绍数组的各种方法

检测数组

Array.isArray()方法

确定某个值是不是数组
if(Array.isArray(value)){
//对数组执行某些操作
}

转换方法

ValueOf()方法

valueOf()返回数组本身

toString()方法

toString()返回由数组中的每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
调用数组的toLocaleString()方法，创建一个数组值的以逗号分隔的字符串。

var colors = ["red", "blue", "green"];
    console.log("toString():" + colors.toString());
    console.log("valueOf():" + colors.valueOf());
    console.log("toLocaleString():" + colors.toLocaleString());
    console.log("colors:" + colors);

join()方法

join()方法，只接受一个参数，即用作分隔符的字符串，返回包含所有数组项的字符串。

var colors = ["red", "blue", "green"];
alert(colors.join(","));//red,blue,green
alert(colors.join( ));//red,blue,green
alert(colors.join("||"));//red||blue||green

栈方法

• 栈方法
  我们知道栈是一种后进先出的数据结构，栈顶插入和删除，JS为数组提供了push()和pop()方法来实现类似的栈行为。

push()方法

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

pop()方法

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

var colors = ["red","green"];
var count = colors.push("blue");
alert(count);//3
var item = colors.pop();
alert(item);//"blue"

队列方法

• 队列方法
  队列是一种先进先出的数据结构，队尾插入，对头删除。用push()和shift()可以完成类似操作。
  push()前面已经说过，这里不再赘述。

shift()方法

shift()方法：移除数组中的第一项，并返回该项

var colors = ["red","green","blue"];
var count = colors.shift();
alert(count);//"red"
alert(colors.length);//2

unshift()方法

除此之外，还有一个unshift()方法：在数组前端添加任意多个项，并返回数组的长度。

var colors = new Array();
var count = colors.unshift("red","green");
alert(count);//2
alert(colors);//"red","green"

重排序方法

reverse()方法

reverse():反转数组

sort()方法

sort()如果不接收一个比较函数作为参数的话，一般会出现错误，如下:

var value = [0,1,5,10,15];
value.sort();
alert(values);//0,1,10,15,5

这是因为sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串。
若在sort()方法中传入比较函数：

function compare(value1, value2) {//升序
      if (value1 < value2) {
        return -1;
      } else if (value1 > value2) {
        return 1;
      } else {
        return 0;
      }
      }
      
       function compare(value1, value2) {//升序
       return value1 - value2;
       }
       
       function compare(value1, value2) {//降序
      if (value1 < value2) {
        return 1;
      } else if (value1 > value2) {
        return -1;
      } else {
        return 0;
      }
    }
    
    function compare(value1, value2) {//降序
       return value2 - value1;
     } 
    
    var values = [0, 1, 5, 10, 15];
    values.sort(compare);
    console.log(values);//返回一个数组 
    

操作方法

concat()方法

这个方法会先创建一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新创建的数组。

var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow",["black","brown"]);
alert(colors);//red,green,blue
alert(colors2);//red,green,blue,yellow,black,brown

slice()方法

基于原数组中的一个或多个项创建一个新数组

var colors = ["red","green","blue","yellow","purple"];
var colors2 = colors.slice(1);
var color3 = colors.slice(1,4);
alert(colors2);//green,blue,yellow,purple
alert(colors3);//green,blue,yellow

splice方法

splice()方法始终返回一个一个数组，该数组包含从原数组中删除的项。

• 删除：指定两个参数，要删除的第一项的位置和要删除的项数
• 插入：提供了三个参数，起始位置、0（要删除的项数）、要插入的项。也就是若用splice方法实现插入的话，第二个参数要是0
• 替换：指定三个参数，起始位置、要删除的项数、要插入的任意数量的项。插入的项数不必与删除的项数相等。

var colors = ["red","green","blue"];
var removed = colors.splice(0,1);//删除第一项
alert(colors);//green,blue
alert(removed);//red

removed = colors.splice(1,0,"yellow","orange");//从位置1开始插入两项
alert(colors);//green,yellow,orange,blue
alert(removed);//返回一个空数组

removed = colors.splice(1,1,"red","purple");//从位置1开始，删除一项，插入两项
alert(colors);//green,red,purple,orange,blue
alert(removed);//yellow

位置方法

两个方法都接收两个参数：要查找的项和（可选）表示查找起点位置的索引。

indexOf方法

从数组开头（位置0）开始向后查找

var str = '改革春风吹满地，春天来了';
        console.log(str.indexOf('春')); //2
        console.log(str.indexOf('春', 3)); //8 //从索引号是 3 的位置开始往后查找

lastIndexOf方法

从数组的末尾开始向前查找

迭代方法

以下五个迭代方法，每个方法都接收两个参数：在每一项上运行的函数和（可选）运行该函数的作用域对象—影响this的值。
对于方法中的函数，会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身

every()方法

• every():对数组中的每一项运行给定函数，如果该函数对每一项都返回true,则返回true.

some()方法

• some():对数组中的每一项运行给定函数，如果该函数对任一项都返回true,则返回true.

filter()方法

• filter():对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。

map()方法

• map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

forEach()方法

• forEach():对数组中的每一项运行给定函数,这个方法没有返回值

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    var everyResult = numbers.every(function (item, index, array) {
      return (item > 2);
    });
    console.log(everyResult);

    var someResult = numbers.some(function (item, index, array) {
      return (item > 2);
    });

    console.log(someResult);
    var filterResult = numbers.filter(function (item, index, array) {
      return (item > 2);
    });
    console.log(filterResult);

    var mapResult = numbers.map(function (item, index, array) {
      return item * 2;
    });
    console.log(mapResult);

    numbers.forEach(function (item, index, array) {
      console.log(item);
    })
    numbers.forEach(element => {
      console.log(element);
    });

归并方法

接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
传给这两个方法的函数接收四个参数：前一个值、当前值、项的索引和数组对象。

reduce()方法

从数组第一项逐个遍历到最后

 /* 
    第一次执行回调函数，prev是1，cur是2。第二次，prev是3（1加2的结果），cur是3（数组的第三项）。
    */
    var values = [1, 2, 3, 4, 5];
    var sum = values.reduce(function (prev, cur, index, array) {
      return prev + cur;
    })
    console.log(sum);//15

reduceRight()方法

从数组最后一项开始，向前遍历到第一项

好啦，内容就是这些，如有问题欢迎加入Web前端交流QQ群：827389615，一起讨论学习吖！