js数组常用方法，看这篇就够了

作者: 朴灿灿的dororo | 来源:发表于2020-01-06 14:41 被阅读0次

1、join()（数组转字符串）

① 数组转字符串

var arr = [1,2,3,4];
console.log(arr.join()); //1,2,3,4 默认逗号分隔
console.log(arr.join("+")); //1+2+3+4
console.log(arr); //[1,2,3,4] 原数组不变

② 重复字符串

通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串。

function repeatString(str, n) {
    return new Array(n + 1).join(str);
}
console.log(repeatString(“123”, 3)); // 123123123
console.log(repeatString(“啊”, 5)); // 啊啊啊啊啊

2、push()和pop()（数组尾操作）

① push()

方法可向数组的末尾添加一个或多个元素，并返回新的长度。

var arr = [1,2,3,4];
var count = arr.push(“Jack”,“Sean”);
console.log(count); // 6
console.log(arr); // [1,2,3,4,“Jack”,“Sean”]

② pop()

数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

var arr = [1,2,3,4];
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // [1,2,3,4,“Jack”]

3、shift() 和 unshift()（数组首操作）

① shift()

把数组的第一个元素从其中删除，并返回第一个元素的值。

var arr = [1,2,3,4];
var arr_shift = arr.shift();
console.log(arr); // [2, 3, 4]
console.log(arr_shift); // 1

② unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var fruits_unshift = fruits.unshift("Lemon","Pineapple"); 
console.log(fruits); // ["Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]
console.log(fruits_unshift); // 6

4、sort()（排序）

在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。

var arr = [“a”, “d”, “c”, “b”];
console.log(arr.sort()); // [“a”, “b”, “c”, “d”]

即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：

var arr=[1,100,5,20];
console.log(arr.sort()); // [1, 100, 20, 5]
console.log(arr); // [1, 100, 20, 5] (原数组改变)

为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

升序：

var arr=[1,100,5,20];

function sortNumber(a,b){
    return a - b
};

function sortNumber_1(value1, value2) {   //另一种写法
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}

console.log(arr.sort(sortNumber)); //[1, 5, 20, 100]    
console.log(arr); //[1, 5, 20, 100] (原数组改变)

降序：

var arr=[1,100,5,20];

function sortNumber(a,b){
    return b - a
};

function sortNumber_1(value1, value2) {   //另一种写法
    if (value1 < value2) {
        return 1;
    } else if (value1 > value2) {
        return -1;
    } else {
        return 0;
    }
}

console.log(arr.sort(sortNumber)); //[1, 5, 20, 100]    
console.log(arr); //[1, 5, 20, 100] (原数组改变)

5、reverse() （反转数组）

    var arr=[1,2,3,4];
    console.log(arr.reverse()); // [4,3,2,1]
    console.log(arr); // [4,3,2,1] (原数组改变)

6、concat() （连接两个或多个数组）

将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组，原数组不改变。

var arr = [1,2,3,4];
var arrCopy = arr.concat(5,[6,7]);
console.log(arrCopy); //[1, 2, 3, 4, 5, 6, 7]
console.log(arr); // 1, 2, 3, 4

如果传入的是二维数组：

var arr = [1,2,3,4];
var arrCopy2 = arr.concat([5,[6,7]]);
console.log(arrCopy2); //[1, 2, 3, 4, 5, Array[2]] 会把这一数组项当作一项添加到arrCopy2中
console.log(arrCopy2[5]); //[6, 7]

7、slice()（数组截取）

arr.slice(start , end);

start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arr 中的元素，原数组不变。

var arr = [1,2,3,4,5];  
var arrCopy1 = arr.slice(1);        
var arrCopy2 = arr.slice(0,4);      
var arrCopy3 = arr.slice(1,-2); 
var arrCopy4 = arr.slice(-5,4); 
var arrCopy5 = arr.slice(-4,-1) 
console.log(arrCopy1);  // [2,3,4,5]    
console.log(arrCopy2);  // [1,2,3,4]    
console.log(arrCopy3);  // [2,3]    
console.log(arrCopy4);  // [1,2,3,4]    
console.log(arrCopy5);  // [2,3,4]  
console.log(arr);  // [1,2,3,4,5] (原数组未改变)

8、splice() （删除、插入和替换）

删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2) 会删除数组中的前两项，返回被删除的项。

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6) 会从当前数组的位置 2 开始插入4和6，因为没有删除元素所以返回空数组。

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6) 会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6，返回被替换的项。

var arr = ["张三","李四","王五","小明","小红"];   

//------------删除"王五"---------------------
var arrReplace1 = arr.splice(2,1);      
console.log(arrReplace1);  // ["王五"]    
console.log(arr);  // ["张三", "李四", "小明", "小红"] (原数组改变)  
//删除多个  
var arrReplace2 = arr.splice(1,2);      
console.log(arrReplace2);  //  ["李四", "小明"]     
console.log(arr);  // ["张三", "小红"]  

//------------添加"小刚"---------------------   
var arrReplace3 = arr.splice(1,0,"小刚"); 
console.log(arrReplace3);  
// [] (没有删除元素，所以返回的是空数组)    
console.log(arr);  // ["张三", "小刚", "小红"]    
//添加多个  
var arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");   
console.log(arrReplace4);  // []    
console.log(arr);  // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]  

//------------"王五"替换"小刚"-----------------
var arrReplace5 = arr.splice(1,1,"王五"); 
console.log(arrReplace5);  // ["小刚"]    
console.log(arr);  // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]  
//替换多个  
var arrReplace6 = arr.splice(1,4,"李四"); 
console.log(arrReplace6);  // ["王五", "小红", "刘一", "陈二"]  
console.log(arr);  // ["张三", "李四", "赵六"]

9、indexOf()和 lastIndexOf() （索引方法）

两个方法都返回要查找的项在数组中首次出现的位置，在没找到的情况下返回-1。

① indexOf()

从数组的开头向后查找

② lastIndexOf()

从数组的末尾向前查找

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf(“5”)); //-1

10、forEach()（数组遍历，无返回值）

对数组进行遍历循环，对每一项运行给定函数。没有返回值。

let arr = [1, 2, 3, 4, 5]
let num = arr.forEach(x => x*2)
console.log(num)  // undefined 没有返回值
console.log(arr)  // [1, 2, 3, 4, 5]

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

11、map()（数组遍历，返回新数组）

此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组。

let arr = [1, 2, 3, 4, 5]
let num = arr.forEach(x => x*2)
console.log(num)  // [2, 4, 6, 8, 10] 注意区分forEach()
console.log(arr)  // [1, 2, 3, 4, 5]

12、filter() （过滤）

“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); 　　　　　　　　//[1, 4, 7, 8, 9, 10]

13、every()（判断是否全部满足）

判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
    return x < 10;
}); 
console.log(arr2); 　　　　　　　　//true    所有项都小于10，返回true
var arr3 = arr.every(function(x) {
    return x < 3;
}); 
console.log(arr3); 　　　　　　　　// false  有大于3的项，返回false

14、some() （判断是否部分满足）

判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
    return x < 3;
}); 
console.log(arr2); 　　　　　　　　//true    有满足的项，返回true
var arr3 = arr.some(function(x) {
    return x < 1;
}); 
console.log(arr3); 　　　　　　　　// false  一项都不满足，返回false

15、find() （判断符合条件元素）

返回数组中符合测试函数条件的第一个元素，否则返回undefined 。

let arr=["a","b","c"];
console.log(arr.find((n) => n === "a"));   // a          包含返回该值，
console.log(arr.find((n) => n === "aa"));  // undefined  不包含返回undefined