JS 常用的数组 API 总结

Question

forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。

• 该循环不能使用 break 结束，同时 return 语句也仅是结束本次循环，要结束循环必须使用 try...catch 抛出一个异常，不推荐这么做。
• 该 api 无返回值，所以无法链式调用。

// 直接上代码
let arr = ['lee', 26, 'male', true, undefined];
arr.forEach((value, index, arrSelf) => {
    console.log(value, index);
}) 

// 关于 thisArg 直接搬了 MDN 上的例子
function Counter() {
    this.sum = 0;
    this.count = 0;
}

Counter.prototype.add = function(array) {
    array.forEach(function(entry) {
        this.sum += entry;
        ++this.count;
    }, this);
    //console.log(this);
};

var obj = new Counter();
obj.add([1, 3, 5, 7]);

obj.count; 
// 4 === (1+1+1+1)
obj.sum;
// 16 === (1+3+5+7)

map()

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

• 该方法不会修改原数组，有返回值，返回的是你在回调函数里面执行的操作过后的数据。
• 这个方法不要做过滤处理，过滤处理请使用 filter()。

let arr = [2, 4, 6, 8];
let newarr = arr.map((value, index, arrSelf) => {
    return value * 2;
})
console.log(newarr); // [4, 8, 12, 16]

filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

• 该方法不会修改原数组，有返回值，返回的是你在回调函数里面执行的筛选过后的数据。

let arr = [2, 4, 6, 8];
let newarr = arr.filter((value, index, arrSelf) => {
    return value > 4;
})
console.log(newarr); // [6, 8]

some()

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。数组中有至少一个元素通过回调函数的测试就会返回 true；所有元素都没有通过回调函数的测试返回值才会为 false。

• 如果用一个空数组进行测试，在任何情况下它返回的都是 false。
• 该方法不会修改原数组，有返回值，返回值为布尔值。
• 只要你的判断有一个满足了条件，就直接返回 true 了，后面的不会再执行。

let arr = [2, 4, 6, 8];
let newarr = arr.some((value, index, arrSelf) => {
    console.log(value); // 输出：2 4 6
    return value > 4;
})
console.log(newarr);  // true

every()

这个方法功能跟 some()相反，every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。如果回调函数的每一次返回都为真值，返回 true ，否则返回 false。

• 若收到一个空数组，此方法在一切情况下都会返回 true。
• 该方法不会修改原数组，有返回值，返回值为布尔值。
• 只要你的判断有一个满足不了条件，就直接返回 false 了，后面的不会再执行。

let arr = [2, 4, 6, 8];
let newarr = arr.every((value, index, arrSelf) => {
    console.log(value); // 输出：2
    return value > 3;
})
console.log(newarr); // false

reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行)，将其结果汇总为单个返回值。不一定在数学意义上的叠加计算，这里叠加指：可以利用前遍历操作的结果到下一次遍历使用，重复叠加使用下去。

• 不修改原数组，返回新的数组。
• arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

accumulator 累计器
currentValue 当前值
currentIndex 当前索引
array 数组

• 回调函数第一次执行时，accumulator 和 currentValue 的取值有两种情况：如果调用 reduce()时提供了 initialValue，accumulator 取值为 initialValue，currentValue 取数组中的第一个值；如果没有提供 initialValue，那么 accumulator 取数组中的第一个值，currentValue 取数组中的第二个值。
• 在没有初始值的空数组上调用 reduce 将报错。 Uncaught TypeError: Reduce of empty array with no initial value
  举个 MDN 上累加求和的例子：

let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum);

find()、findIndex()、indexOf()、includes()、lastIndexOf()

这几个比计较类似，我放在了一起总结。

find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

• 该方法不会修改原数组，有返回值，返回值为满足你条件的第一个元素。
• 只要找到满足了你条件的第一个元素，就直接返回这个值，后面的不会再执行。

let arr = [2, 4, 6, 8, 6];
let newarr = arr.find((value, index, arrSelf) => {
    console.log(value); // 2 4 6
    return value == 6;
})
console.log(newarr); // 6

findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。这个跟上面那个区别就是一个返回值，一个返回索引。

• 该方法不会修改原数组，有返回值，返回值为满足你条件的第一个元素的索引或-1。
• 只要找到满足了你条件的第一个元素，就直接返回这个值，后面的不会再执行。

let arr = [2, 4, 6, 8, 6];
let newarr = arr.findIndex((value, index, arrSelf) => {
    console.log(value); // 2 4 6
    return value == 6;
})
console.log(newarr); // 2

includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false

• 该方法不会修改原数组，有返回值，返回值为布尔值。
• 对象数组不能使用 includes 方法来检测。
• 参数有两个：arr.includes(要查找的值 [, 起始索引值])，给起始索引值时，查找过程包含索引值，默认是从头开始查。

let arr = [2, 4, 6, 8,];
let newarr = arr.includes(6, 2);
console.log(newarr);  // true

indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

• 该方法不会修改原数组，有返回值，返回值为满足你条件的第一个元素的索引或-1。
• 参数有两个：arr.includes(要查找的值 [, 起始索引值])，给起始索引值时，查找过程包含索引值，默认是从头开始查。

let arr = [2, 4, 6, 8,];
let newarr = arr.indexOf(6, 2);
console.log(newarr); // 2

lastIndexOf()

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

sort()

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的。

• 该方法不会修改原数组，不会有返回值，直接在原数组上操作。

很多情况我们的数组里面的元素需要排序，并且是数字的情况，如果按照默认的排序法，则排序出来的结果并不是我们想要的，比如以下代码：

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // [1, 100000, 21, 30, 4]

• 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这- 一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；
• 如果 compareFunction(a, b) 大于 0 ， a 会被排列到 b 之后。

所以我们一般需要给它提供一个回调函数，然后再来排序，比如升序

const array1 = [1, 30, 4, 21, 100000];
array1.sort((a, b) => {
    return a - b;
});
console.log(array1); // [1, 4, 21, 30, 100000]

降序

const array1 = [1, 30, 4, 21, 100000];
array1.sort((a, b) => {
    return b - a;
});
console.log(array1); // [100000, 30, 21, 4, 1]

join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组

返回值由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括 end）。原始数组不会被改变。

push、pop()

这个是操作数组的尾部。

unshift()、shift()

这个是操作数组的头部

• unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有数组)。
• shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

reverse()

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。