zoukankan      html  css  js  c++  java
  • js中map()、some()、every()、filter()的区别

    js的Array对象有map、some、every、filter几个方法都能对数组中的每个对象进行处理,但是他们之间的功能又各有差别,所以在记下。

    • map():通过指定函数处理数组的每个元素,并返回处理后的数组。
    1 var numbers = [4, 9, 16, 25];
    2  
    3 function myFunction() {
    4      console.log(numbers.map(Math.sqrt));
    5 }

    输出结果为:

    2,3,4,5

    map() 方法会将数组中元素依次传入方法中,并将方法的返回结果组成新数组返回。

    传入的function可以有自己的三个形参,currentValue, index,arr分别代表当前元素,元素索引,元素所属数组对象;其中currentValue是必须的。

    注意:map不会改变原数组,map不会检查空数组

    • some():用于检测数组中的元素是否满足指定条件(函数提供)
    复制代码
    1 var ages = [3, 10, 18, 20];
    2 
    3 function checkAdult(age) {
    4     return age >= 18;
    5 }
    6 
    7 function myFunction() {
    8     console.log(ages.some(checkAdult));
    9 }
    复制代码

    输出为:true

    some方法会依次执行数组的每个元素;

    • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测
    • 如果没有满足条件的元素,则返回false
    • function形参和map一样

    注意:some不会改变原数组,some不会检查空数组

    • every:用于检测数组所有元素是否都符合指定条件(通过函数提供)
    复制代码
    1 var ages = [32, 33, 16, 40];
    2 
    3 function checkAdult(age) {
    4     return age >= 18;
    5 }
    6 
    7 function myFunction() {
    8     console.log(ages.every(checkAdult));
    9 }
    复制代码

    输出结果:false

    every和some正好相反:

    • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
    • 如果所有元素都满足条件,则返回 true。
    • function形参同上

    注意:some不会改变原数组,some不会检查空数组

    • filter:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
    复制代码
    1 var ages = [32, 33, 16, 40];
    2 
    3 function checkAdult(age) {
    4     return age >= 18;
    5 }
    6 
    7 function myFunction() {
    8     console.log(ages.filter(checkAdult));
    9 }
    复制代码

    输出结果:

    1
    32,33,40

     filter会根据函数中的筛选条件将返回的结果组成一个新的数组并返回

    本文来自博客园,作者:喆星高照,转载请注明原文链接:https://www.cnblogs.com/houxianzhou/p/13265461.html

  • 相关阅读:
    温故知新 将Date和String类型相互转换
    温故知新 线程
    温故知新 数组
    温故知新 集合
    温故知新 流(字节流与字符流)
    温故知新 jdbc 数据库调取封装
    Reds 持久化 高并发 高可用
    批量修改文件后缀名
    scala之旅-核心语言特性【高阶函数】(十)
    scala之旅-核心语言特性【使用混入组合类】(九)
  • 原文地址:https://www.cnblogs.com/houxianzhou/p/13265461.html
Copyright © 2011-2022 走看看