JavaScript数组方法教学(2)

今天来教大家学习一下几个数组方法,学不会别勉强,遇到困难要学会放弃。

  • array.forEach()
  • array.map()
  • array.filter()
  • array.every()
  • array.some()
  • array.find()
  • array.findIndex()
  • array.reduce()

for Each

定义:array.forEach()方法使用指定函数遍历数组。就是为数组中的每一个元素调用函数。
*注释:对于没有值的数组元素,不执行forEach() 方法。

语法:

 array.forEach(function(item, index, arr), thisValue)

参数:
function:第一个参数是一个函数,必选
thisValue:第二个参数是设置this指向,默认值undefined,可选。
当执行forEach()方法的时候,每个数组元素都会调用一次函数参数。

调用函数的时候,可以在函数内传入以下三个参数

item: 数组中的一个元素元素,必须。
index: 数组索引,可选。
arr: 当前数组,可选。

返回值:返回undefined

示例1:
求数组的和

 var arr2 = [3,6,7,8]
      var  arr3 = 0
        arr2.forEach(function (item, index, arr2) {
           arr3 += item
        })
        console.log(arr3)
//返回 24

示例2:
求数组的和

   var arr = [1,2,3]
        arr.forEach(function(item,index,arr){
            console.log((item,index,arr))
            //console.log(1,0,[1,2,3])
        })
//返回 Array(3) [ 1, 2, 3 ]  Array(3) [ 1, 2, 3 ] Array(3) [ 1, 2, 3 ]

array.every()

定义:检验数组中的所有元素是否都通过了设定的条件(被作为函数提供)。every() 方法对数组中存在的每个元素执行一次函数。
语法:

array.every(function(currentValue, index, arr), thisValue)

参数:
返回值:布尔值。如果数组中的所有元素都通过设定的条件,则返回 true,否则返回 false.
示例:检查survey数组中的answer元素是否都相等。

 var survey = [
            { name: "Steve", answer: "Yes" },
            { name: "Jessica", answer: "Yes" },
            { name: "Peter", answer: "Yes" },
            { name: "Elaine", answer: "No" }
        ];

        function jy(el, index, arr) {
            if (index === 0) {
                return true;
            } else {
                return (el.answer === arr[index - 1].answer);
            }
        }

        function mm() {
            console.log(survey.every(jy))
        }
        console.log(mm())//返回false

array.filter()

定义:创建数组,其中填充了所有通过测试的数组元素(作为函数提供)。
语法:

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

参数:

第一个参数:function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数:
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数:thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空,则值 "undefined" 将作为其 "this" 值传递。
返回值:包含所有通过测试的数组元素的数组。如果没有元素通过测试,则返回一个空数组。
示例:

 <p>获取数组中等于或大于 10 的每个元素。</p>、
   <p id="ccc"></p>
 var arr = [20,30,10,17]
        function bj(num){
            return num > 10;
        }
        document.querySelector("#ccc").innerHTML = arr.filter(bj)
//页面输出为20,30,17

array.find()

定义:返回数组中第一个通过测试的元素的值
语法:

array.find(function(currentValue, index, arr), thisValue)

参数:

第一个参数:function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数:
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数:thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空,就是undefined。

返回值: 如果数组中的任何元素通过测试,则返回数组元素值,否则返回 undefined。

示例:获取数组中第一个值为 18 或更大的元素的值

var arr = [3, 10, 18, 20];
function fn(age) {
  return age >= 19;
}
console.log(arr.find(fn))//返回20

array.findeIndex()

定义:返回数组中通过条件的第一个元素的索引
语法:

array.findIndex(function(currentValue, index, arr), thisValue)

参数:

第一个参数:function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数:
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数:thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空,就是undefined。

返回值:如果数组中的任何元素通过条件,则返回数组元素索引,否则返回 -1。
示例:获取数组中第一个值等于或大于 19 的元素的索引

var arr = [3, 10, 18, 20];
function fn(age) {
  return age >= 19;
}
console.log(arr.findIndex(fn))//返回4

array.map()

定义:使用为每个数组元素调用函数的结果创建新数组。
语法:

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

参数:

第一个参数:function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数:
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数:thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空,就是undefined。

返回值:数组,包含为原始数组中的每个元素调用提供的函数的结果。
示例:将arr数组里的每个元素乘以2

 const arr = [4, 9, 16, 25];
        console.log(arr.map(fn))
        function fn(num) {
        return num * 2;
        }//返回[8,18,32,50]

array.reduce()

定义:将数组缩减为单个值。数组的每个元素从左到右执行提供的函数。
语法:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数:

第一个参数:function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数:
total:用于存储数组之和的变量
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数:thisValue

作为初始值传递给函数的值。

返回值:返回上次调用回调函数的累积结果。

示例:从头开始减去数组中的数字

  var arr = [100,20,30]
        function fn(total, num) {
       return total - num;
       }
       console.log(arr.reduce(fn))//返回50

array.some()

定义:检查数组中的任何元素是否通过特定条件
语法:

array.some(function(currentValue, index, arr), thisValue)

参数:

第一个参数:function(currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数:
sum:用于存储数组之和的变量。
currentValue 必需。当前元素。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象

第二个参数:thisValue

可选。要传递给函数以用作其 "this" 值的值。
如果此参数为空,则值 "undefined" 将作为其 "this" 值传递。

返回值:布尔值。如果数组中的任何元素通过测试,则返回 true,否则返回 false。
示例:检测有没有大于15的数字

 var arr = [3, 10, 18, 20];
function fn1(aaa) {
  return aaa >= 15
}
 console.log( arr.some(fn1))//返回true
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容