① 浅谈JS的Array对象方法

写在前面：

语法：`array.method(function(currentValue,index,arr),thisValue)`

每个数组元素都会调用function()函数，都会给function函数传入当前数组元素值、索引、当前数组，函数通过形参个数选择处理，当形参个数为0时，默认处理currentvalue

//两种写法：
//1将函数写在方法内部作为参数
number.map(function(currentValue,index,arr){return currentValue * currentValue});
//2 将函数独立声明，然后在方法内部直接通过名字使用，原因见开篇第一句。
function checkAdult(currentValue,index,arr) {
    return currentValue>= document.getElementById("ageToCheck").value;
}
 ages.filter(checkAdult);

3 方法的两个参数，第一个是函数，为必须参数。第二是thisValue，为可选参数。
在第一个必选参数的函数中，大部分为三个参数，第一个为必选项，是当前元素值，第二个是可选，为当前元素的索引，第三个为可选项，为当前元素所在数组。

 function()函数必选    --> currentValue参数必选  为当前数组元素值
                         -->  index 参数可选     为当前数组元素索引
                         -->  arr参数可选        为当前元素所在数组
    thisValue可选

1JavaScript Array map() 方法
语法：

  array.map(function(currentValue,index,arr),thisValue);

参数说明：
见开头
返回一个新数组，数组中的元素为原始数组元素调用函数后的处理值.

//返回原始数组中的平方根
 let number = [4,9,16,25];
  function myFunction(){
        x=document.getElementById("demo");
        x.innerHTML = number.map(Math.sqrt);//function 函数为Math.sqrt,参数默认为数组元素值
     // x.innerHTML = number.map(function(currentValue,index,arr){return currentValue * currentValue});结果同上
    }

2 JavaScript Array forEach()方法

• forEach()的时候传递的那个函数，会根据数组的长度执行
• 数组的长度是多少，这个函数function()就会执行多少回
  语法
  array.forEach(function(currentValue,index,arr),thisValue);
  参数说明：
  见开头
  功能
  遍历数组以对数组元素进行处理

var arr = [1, 2, 3];
// 使用 forEach 遍历数组
arr.forEach(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
})

3 JavaScript Array filter()方法
功能：
和 map 的使用方式类似，按照我们的条件来筛选数组
把原始数组中满足条件的筛选出来，filter()方法创建一个新的数组，返回新的数组，并不改变原始数组
语法：

   array.filter(function(currentValue,index,arr),thisValue);

参数说明：
见开头
返回值：
返回数组，包含了符号条件的所有元素，若没有符合条件的则返回为空数组
代码示例：

 
<p>点击按钮返回数组 ages 中所有元素都大于输入框指定数值的元素。</p>
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>所有大于指定数组的元素有？ <span id="demo"></span></p>
<script>
var ages = [32, 33, 12, 40];
function checkAdult(currentValue,index,arr) {
    return currentValue>= document.getElementById("ageToCheck").value;
}
//调用的第二种方法
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
</script>

4 JavaScript Array find()方法
作用：查找数组中第一个满足条件的元素

语法： array.find(function(currentValue,index,arr),thisValue);
参数说明：
见开头

返回值：

当数组中的元素在测试条件时返回true时 find()返回符合条件的元素，之后的值不会再调用函数
当测试条件返回false find()返回undefined

代码示例：

var ages = [3,10,19,20];
    function checkAdult(item,index,arr){
            return item>=2;
     }
 // find()方法返回通过测试的数组的第一个元素的值
 //  find()方法 为数组中的每个元素都调用一次函数执行
  function myFun(){
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
    }

5 JavaScript Array findIndex()方法
作用：查找数组中第一个满足条件的元素下标

语法： array.findIndex(function(currentValue,index,arr),thisValue);
参数说明：
见开头

返回值：

当数组中的元素在测试条件时返回true时 find()返回符合条件的元素下标，之后的值不会再调用函数
当测试条件返回false find()返回-1

代码示例：

 var ages = [3, 10, 18, 20];
function checkAdult(item,index,arr){
	return item>=18;
		}
// 输出2
function myFunction() {
document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
	}

6 JavaScript Array reduce()方法
语法： arr.reduce(function(total,item,index,arr),initalValue)

初次调用时，total是数组中第一个元素，item从数组下标1开始的数组元素值，index是从数组下标1开始的数组元素下标 ，arr是当前元素所在的数组

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

参数 描述
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
函数参数:
参数 描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值