JS数组的二十种方法

---

前言

在平时开发中，我们会用到很多数组方法，这些方法可以很快速的得到我们想要的结果，但是方法太多容易忘记，因此我整理了二十个方法加深印象

---

一、push 和 pop

push 一般用来给数组最后添加元素

let arr1 = [1, 2, 3];
arr1.push(4);
console.log(arr1); // [1, 2, 3, 4]

pop 正好相反，用来删除最后一个元素

let arr2 = [1, 2, 3];
arr2.pop();
console.log(arr2); // [1, 2]

二、shift 和 unshift

shift 用来删除数组第一个元素，返回值是删除的元素的值

let arr3 = [1, 2, 3];
arr3.shift();
console.log(arr3); // [2, 3]

unshift 是将一个或多个元素添加到数组开头(返回值是数组的长度)

let arr4 = [4, 5, 6];
arr4.unshift(1, 2, 3);
console.log(arr4); // [1, 2, 3, 4, 5, 6]

三、sort 和 reverse

sort是对数组进行排序，并返回数组
升序

let arr5 = [1, 3, 2, 4, 6, 5];
arr5.sort(function (a, b) {
    return a - b;
});
console.log(arr5); // [1, 2, 3, 4, 5, 6]

降序

arr5.sort(function (a, b) {
    return b - a;
});
console.log(arr5); // [6, 5, 4, 3, 2, 1]

reverse倒序数组

let arr6 = [1, 2, 3, 4, 5, 6];
arr6.reverse();
console.log(arr6); // [6, 5, 4, 3, 2, 1]

四、slice

slice(begin, end),截取数组,不包括结束下标的元素(返回值是一个新数组)

let arr7 = [1, 2, 3, 4, 5, 6];
console.log(arr7.slice(1, 3)); // [2, 3]

五、join

join(), 指定一个字符串来分隔数组的每个元素,并返回一个字符串,没有参数默认是逗号

let arr8 = [1, 2, 3, 4, 5, 6];
console.log(arr8.join()); // 1,2,3,4,5,6  
console.log(arr8.join('_')); // 1_2_3_4_5_6

六、indexOf 和 includes

indexOf(searchElement, fromIndex),查找元素, 找到返回下标,否则返回-1
第一个参数表示要查找的元素，第二个参数表示开始查找的位置

let arr9 = [1, 2, 3];
console.log(arr9.indexOf(3)); // 2 

includes(),数组是否包含指定的值，如果有返回 true，没有返回 false
这里可以有两个参数，第一个参数是指定的值，第二个是开始查找的位置

let arr10 = [1, 2, 3, 4, 5];
console.log(arr10.includes(2)) // true

七、find 和 findIndex

find(callback),返回数组中满足函数的第一个元素的值，否则返回 undefined

let arr11 = [1, 2, 3, 4, 5];
function test(el) {
    if (el > 2) return el
}
const el = arr11.find(test);
console.log(el); // 3

findIndex(callback),返回数组中满足函数的第一个元素的索引，没有找到对应元素则返回-1
这个和 find 差不多，只是返回的是索引值

let arr12 = [1, 2, 3, 4, 5];
function test1(el) {
    if (el > 4) return el
}
const el1 = arr12.findIndex(test1);
console.log(el1); // 4

八、map 和 forEach

map(),创建一个新数组，新数组的元素是原数组元素执行函数的的返回值
比如我们要让一个数组里的值全部 *2

let arr13 = [1, 2, 3, 4, 5];
let newArr = arr13.map(x => x * 2);
console.log(newArr); // [2, 4, 6, 8, 10]

forEach(), 遍历数组，将数组的元素作为参数传进函数，并替换掉原来的元素值

let arr14 = [1, 2, 3, 4, 5];
arr14.forEach(function (x) {
    return x * 2
}); 
console.log(arr14) // [1, 2, 3, 4, 5]

九、filter

filter(),创建一个新数组，新数组中的元素是原来数组中符合条件的所有元素

let arr15 = [1, 2, 3, 4, 5];
let newArr1 = arr15.filter(function (x) {
    return x > 2
})
console.log(newArr1); // [3,4,5]

十、every 和 some

every(),数组内的所有元素是否满足函数,它返回一个布尔值

let arr16 = [1, 2, 3, 4, 5];
function fn(x) {
    return x > 2
}
console.log(arr16.every(fn)); // false

some(),数组内的元素是否满足函数,它返回一个布尔值
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测

let arr17 = [1, 2, 3, 4, 5];
function fn(x) {
    return x > 2
}
console.log(arr17.some(fn)); // true

十一、reduce

reduce(),对数组中的每个元素按序执行函数，每一次运行函数会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

let arr18 = [1, 2, 3, 4, 5];
let array = arr18.reduce(function (pre, cur) {
    console.log('上一次的值是', pre, '当前的值是', cur);
    las = pre + cur
    return las;
})
console.log(array);
// 上一次的值是 1 当前的值是 2
// 上一次的值是 3 当前的值是 3
// 上一次的值是 6 当前的值是 4
// 上一次的值是 10 当前的值是 5
// 15

十二、concat

concat(),合并数组

let arr19 = [1, 2, 3];
let arr20 = [4, 5];
let arr21 = arr19.concat(arr20);
console.log(arr21) // [1, 2, 3, 4, 5]

十三、splice

splice(),可以用来增删改

let arr22 = [1, 2, 3, 4, 5];
arr22.splice(1, 1); //从索引为一的元素开始，删除一个元素
console.log(arr22); // [1, 3, 4, 5]
arr22.splice(1, 0, 6); //从索引为一的元素开始，删除零个元素,插入一个值为6的元素
console.log(arr22); // [1, 6, 3, 4, 5]
arr22.splice(1, 1, 2); //从索引为一的元素开始，删除一个元素,插入一个值为2的元素
console.log(arr22); // [1, 2, 3, 4, 5]

---

总结

JS的数组的方法就写到这里，介绍的不全但还是比较常见的