JS数组的高级用法

1、forEach

(1)作用：对数组的每个元素执行一次给定的函数。
(2)参数：回调函数(处理的当前元素，索引，当前操作的数组)、this的值(可选)
(3)返回值：undefined

let arr = [1, 2, 3];
let sum = 0;
arr.forEach(function (value, index, array) {
    console.log('每一个数组元素' + value);
    console.log('每一个数组元素的索引号' + index);
    console.log('数组本身' + array);
    sum += value;
})
console.log(sum); // 6

注意：该方法没有返回值，会修改原数组内容。

2、filter

(1)作用：创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
(2)参数：回调函数(处理的当前元素，索引，当前操作的数组)、this的值(可选)
(3)返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

let arr = [12, 66, 4, 88, 3, 7];
let newArray = arr.filter(function (value, index, array) {
    // return value >= 20; // [66,88]
    return value % 2 == 0;
})
console.log(newArray); // [12,66,4,88]

注意：主要用于筛选数组,该方法不会修改原来数组的值。

3、some

(1)作用：测试数组中是不是至少有1个元素通过了被提供的函数测试。
(2)参数：回调函数(处理的当前元素，索引，当前操作的数组)、this的值(可选)
(3)返回值：数组中有至少一个元素通过回调函数的测试就会返回true；所有元素都没有通过回调函数的测试返回值才会为false。

let arr = [10, 30, 4];
let flag = arr.some(function (value, index) {
    return value >= 20;
})
console.log(flag); // true

let arr1 = ['red', 'pink', 'blue'];
let flag1 = arr1.some(function (value) {
    return value == 'green';
})
console.log(flag1); // false

注意：如果找到第一个满足条件的元素，则终止循环不再继续查找。

4、every

(1)作用：测试一个数组内的所有元素是否都能通过指定函数的测试。
(2)参数：回调函数(处理的当前元素，索引，当前操作的数组)、this的值(可选)
(3)返回值：如果数组中的每个值都满足条件函数，则为 true。否则为 false。

let arr = new Array(10, 30, 4);
let flag1 = arr.every(item => item > 10);
console.log(flag1);//false
let flag2 = arr.every(item => item > 3);
console.log(flag2);//true

5、map

(1)作用：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
(2)参数：回调函数(处理的当前元素，索引，当前操作的数组)、this的值(可选)
(3)返回值：一个由原数组每个元素执行回调函数的结果组成的新数组。

let nums = [1, 2, 3];
let obj = {val: 5};
let newNums = nums.map(function(item,index,array) {
  return item + index + array[index] + this.val; 
  //对第一个元素，1 + 0 + 1 + 5 = 7
  //对第二个元素，2 + 1 + 2 + 5 = 10
  //对第三个元素，3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]

注意：按照某种映射关系产生一个新数组，不能停下来。

6、reduce

(1)作用：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
(2)参数：回调函数(累计器、当前值、当前索引(可选)、当前数组(可选))、initialValue可选(作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。)
(3)返回值：函数累计处理的结果

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

上面的例子index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);

这个例子index是从0开始的，第一次的prev的值是我们设置的初始值0，数组长度是4，reduce函数循环4次。

结论：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback
方法，跳过第一个索引。如果提供initialValue，从索引0开始。

7、sort

(1)作用：用原地算法对数组的元素进行排序，并返回数组
(2)参数：接收一个用于比较的函数，比较函数默认接收两个参数，分别代表比较的两个元素。
(3)返回值：经过比较函数调用的数组，此函数会改变原数组。

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

8、find与findIndex

find方法: 查找符合条件的第一个元素 找到了就返回这个元素没找到就返回undefined
findIndex方法: 查找符合条件的第一个元素 找到了就返回这个元素的下标 没找到返回-1

const array = [5, 12, 8, 130, 44];
const found = array.find(element => element > 10);
console.log(found);// 12
const foundIndex = array.findIndex(element => element > 10)
console.log(foundIndex);// 1

9、splice

(1)作用：删除或替换现有元素或者原地添加新的元素来修改数组。
(2)参数：回调函数(修改的开始位置，要移除的个数，要添加的元素)。
(3)返回值：以数组形式返回被修改的内容。此方法会改变原数组。

// 从索引 2 的位置开始删除 0 个元素，插入5
var arr = [1, 2, 3, 4];
var removed = arr.splice(2, 0, 5);
console.log(arr);// [ 1, 2, 5, 3, 4 ]
console.log(removed); // []

// 从索引 3 的位置开始删除 1 个元素
var arr = [1, 2, 3, 4];
var removed = arr.splice(3, 1);
console.log(arr);// [ 1, 2, 3 ]
console.log(removed); // [4]