JS数组方法

javascript中一些常用方法

今天就来说说JS中常用的一些方法，这些方法在日常的开发中是必不可少的，而且这些方法也是一个基础，我们来一起回顾一下。

1.栈方法

栈数据结构的方法是LIFO（后进先出)也就是最先添加的最先被移除发生在栈的顶部。

push()将任意数量添加到数组末尾,返回新的的数组长度。

pop()方法用来“抛出”一个数组末尾的值。我们可以把这个“抛出”的值赋给一个变量存储起来。

var colors = new Array();//创建一个数组
var count = colors.push("red","green");//推入两项
alert(count);//2

count = colors.push("black");//推入另一项
alert(count);//3

var item = colors.pop();//取得最后一项
alert(item);//"black"
alert(colors.length)//2

2.队列方法

队列数据结构的访问规则是FIFO (先进先出)队列在列表的添加项，从列表的前端移除项。

.shift() 就是专门用来处理这类型需求的。它的工作原理类似 .pop()，但它移除的是第一个元素，而不是最后一个。

push()和shift()方法结合
var colors = new Array();//创建一个数组
var count = colors.push("red","blue");//推入两项
alert(count);//2

count = colors.push("black");//推入另一项
alert(count);//3

var item = colors.shift();//取得第一项
alert(item);//red
alert(colors.length)//2

.unshift() 方法用起来就像 .push() 方法一样, 但不是在数组的末尾添加元素，而是在数组的头部添加元素。

var colors = new Array();//创建一个数组
var count = colors.unshift("red","blue");//推入两项
alert(count);//2

count = colors.unshift("black");//推入另一项
alert(count);//3

var item = colors.pop();//取得第一项
alert(item);//blue
alert(colors.length)//2

3.重排序方法

reverse()反转数组的顺序。

sort()升序降序，此方法后台会调用toString()方法进行对比。

var values = [1,2,3,4,5];
values.reverse();
alert(values)//5,4,3,2,1

升序

function compare(value1,value2){
    if (value1 < value2){
        return -1;//如果第一个参数应该位与第二个之前返回负数
    } else if (value1 > value2){
        return 1;//如果第一个参数应该位与第二个之后返回正数
    }else {
        return  0;//如果相等返回0
    }
}
var values = [10,100,23,-1,1232,56,87]
values.sort(compare);
alert(values)// -1,10,23,56,87,100,1232

降序

function compare(value1,value2){
    if (value1 < value2){
        return 1;//如果第一个参数应该位与第二个之后返回负数
    } else if (value1 > value2){
        return -1;//如果第一个参数应该位与第二个之前返回负数
    }else {
        return  0;//如果相等返回0
    }
}
var values = [10,100,23,-1,1232,56,87]
values.sort(compare);
alert(values)// 1232,100,87,56,23,10,-1

推荐使用

升序

var values = [100,19,23,4,5,89,9,20];
values.sort(function(a,b){
    return a-b
})
alert(values)//4,5,9,19,20,23,89,100

降序

values.sort(function(a,b){
    return b-a
})
alert(values)//100,89,23,20,19,9,5,4

4.操作方法

concat()方法允许您连接数组并创建一个全新的数组,concat 操作不会影响原始数组 - 它会将所产生的连接作为新数组返回。

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

slice()基于当前数组中的一个或多个项创建一个新数组,它接收一个或两个参数,即要返回项的起始和结束位置，不会影响原始数组。

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

splice()最强大的方法(删除，插入，替换)。

删

var colors = ["red","green","blue","yellow","black"];
var colors2 = colors.splice(0,3);//从第一位开始删除三位
alert(colors)//yellow,black
alert(colors2)//red,green,blue

增

var colors = ["red","green","blue","yellow","black"];
var colors2 = colors.splice(1,0,"green","blue");//从第一位开始插入三位
alert(colors)//red,green,blue,green,blue,yellow,black
alert(colors2)//

替换

var colors = ["red","green","blue","yellow","black"];
var colors2 = colors.splice(1,2,"greensss","hjh");//从第一位之后删除一位插入三位
alert(colors)//red,greensss,hjh,yellow,black
alert(colors2)//green,blue

5.位置方法

indexOf()从头开始查找,该方法将从头到尾地检索数组，看它是否含有对应的元素。返回第一次出现该元素的位置。如果在数组中没找到指定元素则返回 -1。

lastIndexOf()从末尾查找。

两者在未找到时返回-1,在比较是用全等(===)。

var numbers = [1,3,5,7,9,2,4,6,8,10]
alert(numbers.indexOf(5))//2
alert(numbers.indexOf(5,3))//-1
alert(numbers.indexOf(5,1))//2   
alert(numbers.lastIndexOf(4))//6

6.迭代方法

都接收两个参数

传入这些方法中的函数会接收三个参数(数组项的值，该项在数组中的位置，数组对象本身)。

1.every()
2.some()
3.filter()
4.forEach()
5.map()

这些方法都不会修改数组中的包含值。

(item表数组项的值，index表该项在数组中的位置，array表数组对象本身)。

every()真真为真，真假为假。

var numbers = [1,2,3,4,5,6,5,4,3,2,1,0];
var everyResult = numbers.every(function(item, index, array){
    console.log(item,index,array)
    return (item > 2)
})
//对于该函数来说,传入的函数必须对每一项都返回true,这个方法才返回true,反之.
//该函数对每一项都返回true,则返回true.
alert(everyResult)//false

而该函数只要传入的函数对数组之后得某一项返回true,就会返回true。

some()真假为真，真真为真。

var someResult = numbers.some(function(item, index, array){
    console.log(item,index,array)
    return (item > 2)
})
//如果函数对任一项返回true,则返回true.
alert(someResult)//true

filter()返回真的数组。

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

map()返回每次函数调用结果组成的数组。

var mapResult = numbers.map(function(item, index, array){
    console.log(item,index,array)
    //return (item * 2)
    return (item > 2)
})
alert(mapResult)//2,4,6,8,10,12,10,8,6,4,2,0
//alert(mapResult)//false,false,true,true,true,true,true,true,true,false,false,false

forEach()返回每次函数调用结果组成的数组。

var mapResult = numbers.forEach(function(item, index, array){
    console.log(item,index,array)
    //return (item * 2)
    return (item > 2)
})
//无返回值类似for循环迭代数组一样
alert(mapResult)//undefined

7.归并方法

reduce()从头开始遍历。

reduceRight()从末尾开始遍历。

两者都接收两个参数:一个在每一项上调用的函数和(可选)作为归并基础的初始值。

函数接收四个参数:前一个值/当前值/项的索引值/数组对象 这个函数返回的任何值都会作为第一个参数自动传给下一项。

两者都会迭代数组所有项,然后构建一个最终返回的值。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur
})
var sum = values.reduce((prev, cur, index, array)=>{
    return prev + cur
})
alert(sum)//15

var sum = values.reduceRight((prev, cur, index, array)=>{
    return prev + cur
})
alert(sum)//15