JavaScript数组方法总结

220 阅读6分钟

JavaScript中提供了多种数组方法,如下:

  1. 转换方法—toLocaleString()方法、toString()方法、valueOf()方法
  2. 栈方法——push()方法、pop()方法
  3. 队列方法——shift()方法、unshift()方法
  4. 重排序方法——reverse()方法、sort()方法
  5. 操作方法——concat()方法、slice()方法、splice()方法
  6. 位置方法——indexOf()方法、lastIndexOf()方法
  7. 迭代方法——every()方法、filter()方法、forEach()方法、map()方法、some()方法
  8. 归并方法——reduce()方法、reduceRight()方法

转换方法:

①:toString()方法返回由数组中每个值的字符串形式拼接并且以逗号相隔的字符串
②:valueOf()方法返回的还是数组
③:toLocaleString()方法也会返回一个数组值以逗号相隔的字符串,但与toString()方法不同的是在返回日期对象时格式不同


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

//toLocaleString()方法与toString()方法在返回日期对象时格式不同
var today=new Date();
console.log(today.toString());    //    Sun Mar 05 2017 12:57:11 GMT+0800 (中国标准时间)
console.log(today.toLocaleString());    //    2017/3/5 下午12:57:11


栈方法:

①:push()方法可以接受任意数量的参数,逐个添加到数组末尾,返回修改后数组的长度
②:pop()方法从数组末尾移除最后一项,返回被移除的项
具体看下面例子:

var arr=new Array();    //使用构造函数创建数组
var count=arr.push("red","blue");    //push()返回数组长度

console.log("count="+count);    //count=2
console.log(arr);    //red,blue

count=arr.push("black");    //count=3

var item=arr.pop();
console.log("item="+item);//pop返回被移除的项--item=black


队列方法:

①:shift()方法移除数组的第一次项并返回该项
②:unshift()方法在数组前端添加任意项,并返回新数组的长度

具体看一下例子:

var colors=new Array();    //创建数组
var count=colors.unshift("red","green");    //在数组前端添加两项
console.log(count);    //2

count=colors.unshift("black");     //此时数组各项顺序为"black","red","green"
console.log(count)    //3

item=colors.shift();
console.log(item);    //black

由栈方法跟队列方法可知,在这两种方法中添加数组项的方法返回新数组的长度,移除数组项的方法返回被移除项


  1. 重排序方法:

①:reverse()方法可以反转数组项的顺序
②:sort()方法对数组进行升序排序,但sort()方法会调用每个数组项的toString()转型方法,所以sort()方法比较的是字符串,所以为了能正确排序,要将一个排序函数作为参数传给sort()方法。
具体例子如下:

//reverse()方法
var values=[0,1,5,10,15];
values.reverse();
console.log(values);    //15,10,5,1,0

//无参数sort()方法
values.sort();
console.log(values);    //0,1,10,15,5

//将比较函数作为参数传给sort()方法
//此比较函数用于数值类型或者其valueOf()方法会返回数值类型的对象类型
function compare(value1,value2){
    return value1-value2;    //升序,若要降序则return value2-value1;
}
values.sort(compare);
console.log(values);    //0,1,5,10,15

//使用另外一种比较函数一样可以解决,并适用于大多数数据类型
function compare2(value1,value2){
    if(value1<value2){
        return -1;
    }
    else if(value1>value2){
        return 1;
    }
    else{
        return 0;
    }
}
values.sort(compare2);
console.log(values);    //0,1,5,10,15
//用字符串数据类型检验
var colors=["red","blue","green","black"];
colors.sort(compare2);
console.log(colors);    //black,blue,green,red

colors.sort(compare);
cosole.log(colors);    //返回原函数,不进行排序

操作方法:

①:concat()方法用于连接两个或多个数组,不改变现有数组,只是返回被连接数组的一个副本
②:slice()方法能基于当前数组中的一个或多个项创建一个数组,接受一个或两个参数,即返回项的开始跟结束位置
③:splice()方法,(返回数组)使用这种方法的方式有三种,如下:

若要删除的项数为0,则返回空数组;若不为0,则返回由被移除项所组成的数组

  • 删除:可以删除任意数量的项,只需指定两个参数,要删除的第一项和要删除的项数
  • 插入:可以向指定位置插入任意数量的项:只需指定三个参数,起始位置、0(要删除的项数)、要插入的项
  • 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定三个参数,起始位置、要删除的项数和要插入的任意数量的项

具体例子如下:

//删除
var colors=["red","green","blue"];
var removed=colors.splice(0,1);    //删除colors数组0的位置的项
console.log(colors);    //green,blue
console.log(removed);    //red,返回数组只包含一项

//插入
removed=colors.splice(1,0,"yellow","orange");    //从colors数组1的位置插入两项
console.log(colors);    //green,yellow,orange,blue
cosole.log(removed);    //因为删除项数为0,所以返回空数组

//替换
removed=colors.splice(1,1,"red","purple");    //删除colors数组1的位置的项,并在此插入两项
console.log(colors);    //green,red,purple,orange,blue
console.log(removed);    //yellow,返回数组只包含一项


  1. 位置方法:

indexOf()方法跟lastIndexOf()方法都接受两个参数,要查找的项跟查找起点位置的索引(可选)。其中indexOf()方法从开头(索引为0)的位置往后找,而lastIndexOf()方法从末尾开始向前找。
在比较第一个参数与数组中的每一项时是使用全等操作符进行严格比较的,若没有找到则返回-1。

具体看下面例子:


var numbers = [1,2,3,4,5,4,3,2,1];

console.log(numbers.indexOf(4));    //3
console.log(numbers.lastIndexOf(4));    //5

console.log(numbers.indexOf(4,4));  //5
console.log(numbers.lastIndexOf(4,4));  //3

var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];

var morePeople = [person];

console.log(people.indexOf(person));    //-1
console.log(morePeople.indexOf(person));    //0

console.log(morePeople);

迭代方法:

ECMAScript 5
为数组定义了五个迭代方法,每种方法接受两个参数,要在每一项上运行的函数跟运行该函数的作用对象--影响this的值(可选),而传入这些方法的函数要接收三个参数:数组项的值,该项在数组中的位置和数组对象本身。
①:every()方法对数组中的每一项运行给定的函数,如果该函数对一项都返回true,则返回true。(相当于逻辑与)
②:filter()方法对数组中的每一项运行给定的函数,返回该函数会返回true的项组成的数组。
③:forEach()方法对数组中的每一项运行给定的函数,没有返回值
④:map()方法对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组。
⑤:some()方法对数组中的每一项运行给定的函数,如果该函数对一项返回true,则返回true。(相当于逻辑或)

具体看下面例子:

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);   // false

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

var forEachResult = numbers.forEach(function(item, index, array) {
    //执行具体操作,无返回值
})

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

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

归并方法:

ECMAScript5新增了两个归并数组的方法:reduce()和reduceRight()方法,这两个方法都会迭代数组的所有项,构建一个最终返回的值。
这两个方法接收两个参数:一个在每一项上调用的函数和(可选)作为归并 基础的初始值。
而作为参数的函数接收四个参数:前一个值、当前值、项的索引值、数组对象,并且这个函数的任何返回值都会作为该函数的第一个参数自动传给下一项。

具体看下面例子:

var numbers = [1,2,3,4,5];
var sum = numbers.reduce(function(pre, cur, index, array) {
    return pre + cur;
});
console.log(sum);    // 15

而reduceRight()方法的作用类似,只是方向相反,具体看下面例子:

var numbers = [1,2,3,4,5];
var sum = numbers.reduceRight(function(pre, cur, index, array) {
    return pre + cur;
});
console.log(sum);    // 15