An array of new functions:
1. Judgment:
every
(1). every: 判断数组中是否所有元素都符合要求
a. var 判断结果=arr.every(function(元素值, 下标, 当前数组){
return 根据元素值，下标和当前数组，判断当前元素是否符合要求
})
说明: 如果回调函数中的判断条件用不到后两个实参值，可以省略后两个形参。
b. 原理:
1). every中自带for循环，自动遍历.前的数组中每个元素
2). 每遍历一个元素，就自动调用一次回调函数
3). 每次调用回调函数时，都自动传入三个值:
i. 第一个实参值value: 自动收到当前正在遍历的元素值
ii. 第二个实参值i: 自动收到当前正在遍历的元素位置
iii. 第三个实参值arr: 自动收到当前every.前的数组对象
4). 回调函数中用传入的三个值验证当前正在遍历的元素是否符合条件的要求！并将判断结果返回给every()函数
5). 2种情况:
i. 如果本次回调函数返回的true，说明当前元素符合要求！于是every会继续向后遍历，知道遍历结束。如果遍历结束，所有元素的验证结果都返回true，则整个every就返回true，说明整数数组中所有元素都符合要求
ii. 如果本次回调函数返回false！说明当前元素不符合要求！every就没必要继续循环！而是立刻退出执行。整个every()返回false，说明数组不是所有元素都符合要求！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr1=[1,2,3,4,5]; //false
var arr2=[2,4,6,4,2]; //true
//判断哪个数组全由偶数组成:
// 三个变量名都能换
// 但是顺序不能变
// 当前元素值 下标 数组
// ↓ ↓ ↓
var result1=arr1.every(function(value, i, arr){
console.log(`arr1.every()自动调用了一次回调函数；自动传入arr1数组:[${
arr}]的第${
i}个元素值:${
value}。经过回调函数验证，返回${
value%2==0}`)
//每个元素是否都是偶数
return value%2==0;//当前元素值是否为偶数
});
var result2=arr2.every(function(value, i , arr){
console.log(`arr2.every()自动调用了一次回调函数；自动传入arr2数组:[${
arr}]的第${
i}个元素值:${
value}。经过回调函数验证，返回${
value%2==0}`)
return value%2==0;//当前元素值是否为偶数
});
console.log(result1, result2);
</script>
</body>
</html>
运行结果：
arr1.every()自动调用了一次回调函数；自动传入arr1数组:[1,2,3,4,5]的第0个元素值:1。经过回调函数验证，返回false
arr2.every()自动调用了一次回调函数；自动传入arr2数组:[2,4,6,4,2]的第0个元素值:2。经过回调函数验证，返回true
arr2.every()自动调用了一次回调函数；自动传入arr2数组:[2,4,6,4,2]的第1个元素值:4。经过回调函数验证，返回true
arr2.every()自动调用了一次回调函数；自动传入arr2数组:[2,4,6,4,2]的第2个元素值:6。经过回调函数验证，返回true
arr2.every()自动调用了一次回调函数；自动传入arr2数组:[2,4,6,4,2]的第3个元素值:4。经过回调函数验证，返回true
arr2.every()自动调用了一次回调函数；自动传入arr2数组:[2,4,6,4,2]的第4个元素值:2。经过回调函数验证，返回true
false true
some
(2). some: 判断数组中是否包含符合要求的元素
a. var 判断结果=arr.some(function(元素值, 下标, 当前数组){
return 根据元素值，下标和当前数组，判断当前元素是否符合要求
})
b. 原理:
1). some中自带for循环，自动遍历.前的数组中每个元素
2). 每遍历一个元素，就自动调用一次回调函数
3). 每次调用回调函数时，都自动传入三个值:
i. 第一个实参值value: 自动收到当前正在遍历的元素值
ii. 第二个实参值i: 自动收到当前正在遍历的元素位置
iii. 第三个实参值arr: 自动收到当前some.前的数组对象
4). 回调函数中用传入的三个值验证当前正在遍历的元素是否符合条件的要求！并将判断结果返回给some()函数
5). 2种情况:
i. 如果回调函数当前元素的验证结果返回true，说明当前元素符合要求，则some()立刻退出循环，不再继续执行。而且整个some()返回true，说明当前数组包含至少一个符合要求的元素。
ii. 如果回调函数当前元素的验证结果返回false，说明当前元素不符合要求，则some()会继续向后执行！如果所有元素的验证结果都为false，说明数组中并不包含任何一个符合要求的元素。则整个some()返回false！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr1=[1,2,3,4,5]; //true 2次
var arr2=[2,4,6,4,2]; //true 1次
//判断哪个数组包含偶数:
// 三个变量名都能换
// 但是顺序不能变
// 当前元素值 下标 数组
// ↓ ↓ ↓
var result1=arr1.some(function(value, i, arr){
console.log(`arr1.every()自动调用了一次回调函数；自动传入arr1数组:[${
arr}]的第${
i}个元素值:${
value}。经过回调函数验证，返回${
value%2==0}`)
//每个元素是否都是偶数
return value%2==0;//当前元素值是否为偶数
});
var result2=arr2.some(function(value, i , arr){
console.log(`arr2.every()自动调用了一次回调函数；自动传入arr2数组:[${
arr}]的第${
i}个元素值:${
value}。经过回调函数验证，返回${
value%2==0}`)
return value%2==0;//当前元素值是否为偶数
});
console.log(result1, result2);
</script>
</body>
</html>
运行结果：
arr1.every()自动调用了一次回调函数；自动传入arr1数组:[1,2,3,4,5]的第0个元素值:1。经过回调函数验证，返回false
arr1.every()自动调用了一次回调函数；自动传入arr1数组:[1,2,3,4,5]的第1个元素值:2。经过回调函数验证，返回true
arr2.every()自动调用了一次回调函数；自动传入arr2数组:[2,4,6,4,2]的第0个元素值:2。经过回调函数验证，返回true
true true
2. Traverse:
forEach: simply simplify the for loop!
a. arr.forEach(function(value, i, arr){
对value，i或arr执行操作
})
b. 原理:
1). forEach中自带for循环，自动遍历.前的数组中每个元素
2). 每遍历一个元素，就自动调用一次回调函数
3). 每次调用回调函数时，都自动传入三个值:
i. 第一个实参值value: 自动收到当前正在遍历的元素值
ii. 第二个实参值i: 自动收到当前正在遍历的元素位置
iii. 第三个实参值arr: 自动收到当前forEach.前的数组对象
4). 回调函数中对当前元素值，数组中当前位置的元素执行相同的操作，不需要返回值
c. 为什么: for循环已经没有进一步简化的空间了！且每次都写for循环，太麻烦了！
d. 问题: forEach是数组家的函数，只有遍历索引数组时，才能使用forEach。如果遍历类数组对象，虽然也是数字下标，但是不能使用forEach。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr=["亮亮","然然","东东"];
//遍历花名册中每个人名，点到谁，谁喊到！
//for循环
for(var i=0;i<arr.length;i++){
alert(`${
arr[i]} - 到！`)
}
//forEach
// arr.forEach(function(value){
// alert(`${value} - 到!`)
// })
//forEach+箭头函数(暂时不要问！后边详细讲)
//arr.forEach((value)=>{alert(`${value} - 到!`)})
//箭头函数，如果只有一个形参，可省略()
//arr.forEach(value=>{alert(`${value} - 到!`)})
//箭头函数，如果只有一句函数体，可省略{}
//arr.forEach(value=>alert(`${value} - 到!`))
//不愿意写那么长单词
arr.forEach(v=>alert(`${
v} - 到!`))
</script>
</body>
</html>
map: Traverse the value of each element in the original array, after processing, put it into a new array and return!
a. var 新数组=arr.map(function(value, i, arr){
return 加工后的新元素值
})
b. 原理:
1). arr.map()先创建一个空数组等待
2). map()也自带for循环自动遍历原数组中每个元素
3). 每遍历到一个元素，就自动调用一次回调函数
4). 每次调用回调函数时，都自动传入三个值:
i. 第一个实参值value: 自动收到当前正在遍历的元素值
ii. 第二个实参值i: 自动收到当前正在遍历的元素位置
iii. 第三个实参值arr: 自动收到当前map.前的数组对象
5). 回调函数中根据当前传入的元素值等信息，加工出一个新的元素值返回给map()
6). map()会将收到的新元素值放入新数组中相同位置保存起来
7). 遍历结束，map()会将新数组返回出来！——原数组保持不变
c. 何时: 今后只要希望保护原数组不变，返回新数组供其它位置的代码使用时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr=[1,2,3,4,5];
//想对数组中每元素*2，返回新数组，但是，想保持原数组不变！
var arr2=arr.map(function(value,i,arr){
console.log(`arr.map()自动调用了一次回调函数。将原数组[${
arr}]中${
i}位置的旧值${
value}，传入回调函数。经过回调函数加工，返回新元素值${
value*2},自动放入新数组${
i}位置`);
//想把当前元素值*2后的新值放入新数组中？
return value*2;
});
console.log(arr2);
console.log(arr);
</script>
</body>
</html>
运行结果：
arr.map()自动调用了一次回调函数。将原数组[1,2,3,4,5]中0位置的旧值1，传入回调函数。经过回调函数加工，返回新元素值2,自动放入新数组0位置
arr.map()自动调用了一次回调函数。将原数组[1,2,3,4,5]中1位置的旧值2，传入回调函数。经过回调函数加工，返回新元素值4,自动放入新数组1位置
arr.map()自动调用了一次回调函数。将原数组[1,2,3,4,5]中2位置的旧值3，传入回调函数。经过回调函数加工，返回新元素值6,自动放入新数组2位置
arr.map()自动调用了一次回调函数。将原数组[1,2,3,4,5]中3位置的旧值4，传入回调函数。经过回调函数加工，返回新元素值8,自动放入新数组3位置
arr.map()自动调用了一次回调函数。将原数组[1,2,3,4,5]中4位置的旧值5，传入回调函数。经过回调函数加工，返回新元素值10,自动放入新数组4位置
(5) [2, 4, 6, 8, 10]
(5) [1, 2, 3, 4, 5]
3. filter filtering:
Copy the element values that meet the requirements in the original array and put them into the new array to return, and the original array remains unchanged!
(1). var 新数组=arr.filter(function(value,i,arr){
return 判断条件
})
(2). 原理:
a. filter()先创建一个空数组等待
b. filter ()也自带for循环自动遍历原数组中每个元素
c. 每遍历到一个元素，就自动调用一次回调函数
d. 每次调用回调函数时，都自动传入三个值:
1). 第一个实参值value: 自动收到当前正在遍历的元素值
2). 第二个实参值i: 自动收到当前正在遍历的元素位置
3). 第三个实参值arr: 自动收到当前filter.前的数组对象
e. 在回调函数中判断当前传入的元素值是否符合要求，并返回判断结果
f. 如果本次函数调用结果返回true，说明当前元素符合要求，则filter()自动将当前元素追加到新数组中保存。如果本次函数调用结果返回false，说明当前元素不符合要求，则filter()本次什么也不做，而是继续遍历下一个元素。
g. 遍历结束，filter()将新数组返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr=[1,2,3,4,5];
//希望过滤出数组中的偶数，放入新数组返回
var arr2=arr.filter(function(value,i,arr){
console.log(`arr.filter自动调用了一次回调函数。将原数组${
arr}中${
i}位置的元素值${
value}传入回调函数。经过判断返回${
value%2==0}。`)
//判断当前元素是否为偶数
return value%2==0
});
console.log(arr2);
console.log(arr);
</script>
</body>
</html>
运行结果:
arr.filter自动调用了一次回调函数。将原数组1,2,3,4,5中0位置的元素值1传入回调函数。经过判断返回false。
arr.filter自动调用了一次回调函数。将原数组1,2,3,4,5中1位置的元素值2传入回调函数。经过判断返回true。
arr.filter自动调用了一次回调函数。将原数组1,2,3,4,5中2位置的元素值3传入回调函数。经过判断返回false。
arr.filter自动调用了一次回调函数。将原数组1,2,3,4,5中3位置的元素值4传入回调函数。经过判断返回true。
arr.filter自动调用了一次回调函数。将原数组1,2,3,4,5中4位置的元素值5传入回调函数。经过判断返回false。
(2) [2, 4]
(5) [1, 2, 3, 4, 5]
4. Summary:
Traverse each element in the array, and calculate a final conclusion through summation or other summary methods
(1). var 结果=arr.reduce(
function(临时汇总值, 当前元素值, 下标, 当前数组){
return 临时汇总值和当前元素值计算出的新临时汇总值
} ,
起始值
)
(2). 原理:
a. reduce()先用一个变量保存住起始值，遍历过程中，也可保存临时汇总值。
b. reduce()自带for循环，自动遍历原数组中每个元素
c. 每遍历一个元素就自动调用一次回调函数
d. 每次调用回调函数时，都传入保存四个值:
1). 第一个实参值box: 自动传入截止到目前的临时汇总值
2). 第二个实参值value: 自动收到当前正在遍历的元素值
3). 第三个实参值i: 自动收到当前正在遍历的元素位置
4). 第四个实参值arr: 自动收到当前reduce.前的数组对象
e. 回调函数内，可将当前元素的值，汇总到临时汇总值中，形成新的汇总值，并返回给reduce()
f. reduce()接到回调函数返回的新临时汇总值之后，会覆盖之前旧的临时汇总值保存在变量中，为继续汇总下一个元素值做准备！
g. 遍历结束，最后的临时汇总值，就是整个数组中所有元素的最终汇总值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr=[1,2,3,4,5];
//想对数组内容求和
var result=arr.reduce(
function(box,value,i,arr){
console.log(`arr.reduce()自动调用了一次回调函数。传入截止目前的临时汇总值box=${
box}，和当前元素值${
value}，返回box+value的新汇总值${
box+value}`)
return box+value
},
0//从0开始累加
);
console.log(result);
</script>
</body>
</html>
运行结果:
arr.reduce()自动调用了一次回调函数。传入截止目前的临时汇总值box=0，和当前元素值1，返回box+value的新汇总值1
arr.reduce()自动调用了一次回调函数。传入截止目前的临时汇总值box=1，和当前元素值2，返回box+value的新汇总值3
arr.reduce()自动调用了一次回调函数。传入截止目前的临时汇总值box=3，和当前元素值3，返回box+value的新汇总值6
arr.reduce()自动调用了一次回调函数。传入截止目前的临时汇总值box=6，和当前元素值4，返回box+value的新汇总值10
arr.reduce()自动调用了一次回调函数。传入截止目前的临时汇总值box=10，和当前元素值5，返回box+value的新汇总值15
15