js数组方法汇总

Posted 2021-02-08 fqh123

下面主要汇总一下数组的方法

数组方法：

1、检测是否为数组的方法：Array.isArrray();

    var arr=[1,2,3,4,5];
    var str=‘string‘;
    console.log(Array.isArray(arr));//true
    console.log(Array.isArray(str));//false

2、转换方法：toLocaleString()、toString()、valueOf()

valueOf():返回数组本身

toString():返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

toLocaleString()：调用的是每一项的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

3、join()方法：用于将数组以指定符号分隔成字符串数组

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

4、栈方法  push()、pop()方法

push():接收任意数量的参数，把他没逐个添加到数组末尾，并返回修改后的数组长度！（不是修改后的数组）；

pop():从数组末尾移除最后一项，返回移除的项

    var colors=new Array();
    var count=colors.push("red","green","blue");
    console.log(colors)//["red", "green", "blue"]
    console.log(count);//3

    var item=colors.pop();
    console.log(colors)//["red", "green"]
    console.log(item);//blue

5、队列方法  shift()、unshift()

shift():与pop()方法对应，能够移除数组中的第一个项并且返回该项

unshift():与push()方法对应，能够在数组前面添加若干项

    var colors=["red"];
    var count=colors.unshift("green","blue");
    console.log(colors)//["green", "blue", "red"]
    console.log(count);//3

    var item=colors.shift();
    console.log(colors)//["blue", "red"]
    console.log(item);//green

6、重排序方法    reverse()、sort()

reverse():会翻转数组项的顺序

sort():默认按字符编码的大小升序排列，通常我们会传入一个比较函数作为参数来对数字数组进行排序

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

    numberArr.sort();
    console.log(numberArr);//[0, 1, 10, 15, 5]  按字符编码大小升序排序（此方法会先调用toString()方法）

    //定义一个比较函数
    function compare(value1,value2){
        if(value1<value2){
            return -1;
        }else if(value1>value2){
            return 1;
        }else{
            return 0;
        }
    }
    numberArr.sort(compare);
    console.log(numberArr);//[0, 1, 5, 10, 15]
    // 若想降序排序，将大于号小于号颠倒即可

7、操作方法  concat()、slice()、splice()

concat():数组合并，此方法会将传递给它的一个或多个数组中的每一项添加到结果数组的后面

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

slice():截取数组，接收一或两个参数，返回索引之间的数组项组成的一个数组（包括开头不包括结尾）

当一个参数时是截取从此索引开始到末尾的数组

当两个参数时是截取两个索引之间的数组

当参数为负数时，可以用数组长度加上此参数，截取俩参数之间的项

    var colors=["red", "blue", "green", "black", "yellow", "brown"];
    var colors2=colors.slice(2);
    var colors3=colors.slice(1,4);
    var colors4=colors.slice(-2,-1);
    console.log(colors2);//["green", "black", "yellow", "brown"]
    console.log(colors3);//["blue", "green", "black"]
    console.log(colors4);//["yellow"]  与slice(4,5)一样

splice():一个非常强大的方法，可以完成数组的删除、插入、替换工作、

接收两个或三个或更多参数：第一个参数指定开始的索引、第二个参数指定删除的长度、第三个参数及后面的参数指定插入的项，删除返回的项

    var colors=["red", "blue", "green","yellow","brown"];
    var colors2=colors.splice(0,1);//删除第一项
    console.log(colors2);//["red"]
    console.log(colors);//["blue", "green", "yellow", "brown"]
    var colors3=colors.splice(1,0,"哈哈","恰恰");//在索引1并插入两项
    console.log(colors3);//[]
    console.log(colors);//["blue", "哈哈", "恰恰", "green", "yellow", "brown"]
    var colors4=colors.splice(3,1,"替换");//替换索引为3的项
    console.log(colors4);//["green"]
    console.log(colors);//  ["blue", "哈哈", "恰恰", "替换", "yellow", "brown"]

8、位置方法  indexOf()、lastIndexOf()

接收1或2个参数

indexof();从前向后查找匹配到的第一项，若有第二个参数，则从第二个参数指定的索引开始向后查找，返回匹配第一项所在的索引，没匹配到则返回-1

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
    console.log(numbers.indexOf(6));//-1
    console.log(numbers.lastIndexOf(6));//-1

9、迭代与归并方法 every()、filter()、forEach()、map()、some()、reduce()、reduceRight()

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

var some=numbers.some(function(item,index,arr){

 return (item>2);

})

console.log(some)//true 有一个返回true最终就返回true

var every=numbers.every(function(item,index,arr){

 return (item>2);

})

console.log(every)//false 全部为true才是true

var filter=numbers.filter(function(item,index,arr){

 return (item>2);

})

console.log(filter)//[3, 4, 5, 4, 3] 满足条件的项组成一个数组

var map=numbers.map(function(item,index,arr){

 return (item*2)

})

console.log(map)// [2, 4, 6, 8, 10, 8, 6, 4, 2] 返回每个项执行的结果

var foreach=numbers.forEach(function(item,index,arr){

 console.log(item)

})//相当于for循环 给每一个项执行一个函数 无返回值

var reduce=numbers.reduce(function(prev,cur,index,arr){

 return prev+cur;

})

console.log(reduce)//25

var reduceright=numbers.reduceRight(function(prev,cur,index,arr){

 return prev+cur;

})

console.log(reduceright)//25