js数组常用方法，看这篇就够了
2020-01-06 本文已影响0人
朴灿灿的dororo
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
