数组常用方法

数组添加、删除元素

• push：在数组末尾添加元素。
• unshift：在数组开头添加元素。
• pop：从数组末尾删除元素。
• shift：从数组开头删除元素。

// 添加元素
const arr = [];
arr.push(1);
console.log(arr); // [1];

arr.unshift(0);
console.log(arr); // [0, 1];

//删除元素
const arr = [0, 1];
arr.pop();
console.log(arr);// [0]

arr.shift();
console.log(arr);// []

通过内置的push和unshift方法可以给数组添加元素，同时改变数组长度。如果使用unshift方法，会在数组开头添加元素。但同时也会改变后面元素的索引（访问元素的下标）。

pop和shift方法可以删除数组的元素，使用shift从数组开头删除一个元素。改变了数组的长度，后面元素的索引也改变了。

性能考虑：pop和push方法只影响最后一个元素。shift和unshift方法修改第一个元素，之后每一个元素的索引都需要调整。因此pop和push方法比shift和unshift方法要快很多。非特殊情况下不建议使用shift和unshift方法。

注意： 这四个方法的返回值都是数组的长度。

还可以通过内置splice方法删除元素。

//删除元素
const fruit = ["apple", "banana", "orange", "pear"];

const removedItems = fruit.splice(1, 2);
console.log(removedItems);// ["banana"]
console.log(fruit);//["apple", "pear"]

splice具有两个参数：起始索引和需要移除的元素个数（如果第二个参数不传，会一直删除元素直到数组末尾）。

在本例中banana元素的索引是1，就从这个元素开始删除两个元素banana和orange。这个方法会改变原数组。返回的是删除的元素。

数组常用操作

forEach方法遍历

forEach接收一个回调函数为参数，回调函数又接收两个参数，第一个是数组中的每一项，第二个是对应的索引。

const fruit = ["apple", "banana", "orange", "pear"];
fruit.forEach((item, index) => {
    console.log(item,index);// apple 0、 banana 1、 orange 2、 pear 3
});

查找数组索引

indexOf返回元素对应索引。若没有则返回-1。

const fruit = ["apple", "banana", "orange", "pear"];
console.log(fruit.indexOf("banana"));// 1
console.log(fruit.indexOf("grape"));// -1

有些情况下，当不具有目标元素的引用时，可以使用findIndex，也是indexOf方法一样的返回值。

const result = fruit.findIndex((item, index) => {
    if (item.name === 'banana') {
        return true
    };
});// 1

测试数组元素

处理集合元素时，常用遇到需要知道数组的全部元素或者部分元素是否满足某些条件。数组具有内置的方法some和every。

const fruit = [
    { name: "apple", price: 10 },
    { name: "banana", price: 20, },
    { name: "orange", price: 30 },
    { name: "pear", price: 40 },
];
const state = fruit.some(item => {
     console.log(item.name);// apple banana orange
    if (item.price >= 30) {
        return true;
    }
});// true

some接收的参数也是和forEach一样的。some方法从数组的第一项开始执行回调函数，直到返回true。如果有一次返回true，那么some方法就返回true。否则，some方法返回false。本例中发现遍历第三次的时候进入了if判断，然后返回true，整个方法结束，后边的不在遍历。

const state = fruit.every(item => {
    console.log(item.name);// apple banana orange pear
    if (item.price >= 10) {
        return true;
    }
});//true

every方法接收回调函数，对集合中的每个item对象检查price是否大于等于10。当发现每一个price都满足要求时every返回true。当发现有一个price不满足大于等于10。方法结束。返回false。

查找数组元素

查找数组元素，并返回第一个满足条件的元素。直到最后所有元素都没有满足,则返回undefined。

const fruit = [
    { name: "apple", price: 10 },
    { name: "banana", price: 20, },
    { name: "orange", price: 30 },
    { name: "pear", price: 40 },
];
// 使用find方法查找满足回调函数中指定条件的第一个元素
const result1 = fruit.find(item => {
    if (item.name === "orange") {
        return true
    }
}); // { name: "orange", price: 30 }

// 如果没有找到满足条件的元素，find方法返回undefined
const result2 = fruit.find(item => item.name === "grape");
/* item.name === "grape" 表达式的返回值是true或false。在箭头函数中省略大括号的话，返回表达式的结果。
   在这里当遍历完都没有说有的结果都是false，所以返回的是空数组。
*/ 

如果查找满足条件的多个元素，可以使用filter方法。filter最终返回的是所有满足条件的元素，如果一个都没有，则返回的是空数组。filter不会改变原数组，返回的是筛选后的新数组。

const result1 = fruit.filter(item => {
    if (item.price > 20) {
        return true
    }
});//[{ name: "orange", price: 30 },{ name: "pear", price: 40 }]

//解构了item
const result2 = fruit.filter(({ price }) => price > 40);// []

数组排序

array.sort((a, b) => a - b);

Javascript引擎实现了排序算法。我们需要提供回调函数，告诉排序算法相邻的两个数组元素的关系(a是数组中的第一项，b是数组中的下一项)。可能有如下几种。

• 如果回调函数的返回值小于0，元素a应该排在元素b之前。
• 如果回调函数的返回值等于0，元素a和元素b排在相同的位置。
• 如果回调函数的返回值大于0，元素a应该排在元素b之后。

const fruit = [
    { name: "apple", price: 10 },
    { name: "banana", price: 20, },
    { name: "orange", price: 30 },
    { name: "pear", price: 40 },
];
fruit.sort((item2, item1) => {
    if (item1.price > item2.price) { return 1; }
    if (item1.price < item2.price) { return -1; }
    return 0;
});

第一次遍历，item2和item1分别是数组中的第二项和第一项，发现进入第二个if，那么item2应该排在item1之前，所以banana排在apple的前面。最后遍历结束价格呈现降序的顺序。注意，sort方法会返回排序后的数组，但是也会改变原数组的顺序。

sort方法也可以不接受参数，默认升序排序。

reverse方法，颠倒数组中元素的顺序。改变原数组顺序，也返回改变后的数组。

const numbers = [2, 4, 1, 3, 0];
numbers.reverse();//[0, 3, 1, 4, 2]

合计数组元素

numbers.reduce((total, currentValue) => total + currentValue, initilValuve);

reduce方法接收两个参数，回调函数（必须）和传递给回调函数的初始值（可选）。回调函数参数total（必需）初始值、currentValue（必需）当前元素）。当前元素所属的数组对象。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, currentValue,currentIndex,arr) => {
    return total + currentValue;
}, 1);//11

数组每一项进行修改

numbers.map(item => item * 2);

map也是接收一个回调函数为参数，参数和forEach方法一致。map会数组中的每一项元素进行修改，可以显式返回这一项。

const numbers = [1, 2, 3, 4];
const reulst = numbers.map(item => item * 2);// [2, 4, 6, 8]
console.log(numbers);//[1, 2, 3, 4]

例子中每一项都乘以2，返回计算后的结果，组成新数组的一项，对每一项元素都乘以2直到遍历结束。map方法不会改变原数组，返回一个改变后的新数组。

小结

forEach、findIndex、some、every、find、filter、map这些方法都都接收两个参数:

• function(currentValue,index,arr)：必填。函数接收3个参数currentValue当前元素、idnex索引、arr当前元素属于的数组对象。
• thisValue：可选。传递给函数，作为函数内部使用，用作this的值。如果忽略this的值，就指向当前的数组。