ES6新特性数组高阶方法every、some、filter、map

1.前言

ES6中有一些数组的方便高阶函数,每个都有不同的使用方法,常用的有四个every、some、filter、map。

2.every()

every()的逻辑:检测每个元素相当于逻辑运算符 且 &&
返回值:true-全部符合 ,false-有不符合
参数:一个带有三个参数的回调函数
语法:Array.every((value,index,array)=>{
return 条件
})
案例1:

<script>
    var nums=[1,23,4,56,75,77,33]
   //value:数组中元素的值,index:元素的下表,array:所遍历的对象
    var x = nums.every((value, index, array) => {
    
    
      console.log('value', value) // 我是谁
      console.log('index', index) // 序号
      console.log('array', array) // 来自哪个数组
      // 三个值的关系是:  value == array[index]
      return value > 0
    })
    //ES6语法糖,当只有一个参数时省略(),函数体只有一行省略{return}
    var x=nums.every(value=>value>0)
   //注:every()遍历数组只要数组中的元素有一个不满足所给的条件,就会返回false,
   //所有都满足的时候则返回true
   console.log(x ? '都是正数' : '非都是正数')
  </script>`

案例2:案例一写了基本的用法,可以用在构造函数的方法中

<script>
    class Emp {
    
    
      constructor(ename, age, married) {
    
    
        this.ename = ename
        this.age = age
        this.married = married
      }
    }
    const emps = [
      new Emp('孙悟空', 18, true),
      new Emp('猪八戒', 32, false),
      new Emp('沙和尚', 38, true),
      new Emp('白龙马', 34, true),
    ]
    console.log(emps)
    // 1. 判断 是否所有员工 都超过20岁
    var x = emps.every(value => {
    
    
      // 数组中每个元素是 Emp 类型的对象
      console.log('value', value)
      // 年龄是对象中的属性
      return value.age > 20
    })
    console.log(x ? '都大于20' : '非都大于20');
     // 2. 判断 是否所有员工 都已婚
    // 注意:married 属性本身就是 布尔类型, 不需要再 == true 来比较
    var x = emps.every(v => v.married)
    console.log(x ? '都结婚' : '非都已婚');
</script>

3.some()

some()逻辑:遍历所有元素只要有一个满足返回true,相当于逻辑运算或 ||
返回值:true-至少有一个符合条件,false-一个都不满足
参数:一个带有三个参数的回调函数
语法:Array.some((value,index,array)=>{
return 条件
})
案例1:

 <script>
    // some: 一些, 至少有一个; 
    // 判断数组中的元素 是否 至少有一个满足条件
    // 类似 逻辑或 || , 有真则真, 全假则假
    var nums = [21, 4, 43, 154, 6, 76]
    // 是否有数字大于100
    //value:数组中元素的值,index:元素的下表,array:所遍历的对象
    var x = nums.some((value, index, array) => {
    
    
      return value > 100
    })
    var x = nums.some(v => v > 100)
    console.log(x ? '有超过100的' : '没有超过100的');
  </script>

案例2:

 <script>
    class Emp {
    
    
      constructor(ename, age, married) {
    
    
        this.ename = ename
        this.age = age
        this.married = married
      }
    }
    const emps = [
      new Emp('孙悟空', 18, true),
      new Emp('猪八戒', 32, false),
      new Emp('沙和尚', 38, true),
      new Emp('白龙马', 34, true),
    ]
    //1. 是否有人年龄小于20
    var x = emps.some(v => v.age < 20)
    console.log(x ? '有小于20' : '没有小于20');
    // 2. 是否有未婚
    var x = emps.some(v => v.married == false)
    // ! 逻辑非
    var x = emps.some(v => !v.married)
    console.log(x ? '有未婚' : '没有未婚');
  </script>

4.filter()

filter()逻辑:遍历整个元素把符合条件的筛选出来
返回值:返回满足条件的元素
参数:一个带有三个参数的回调函数
语法:Array.filter((value,index,array)=>{ 在这里插入代码片
return 条件
})
案例1

 <script>
    // filter: 过滤;  把满足条件的元素过滤出来
    var nums = [12, 32, 43, 54, 7676, 87, 78, 9889]
    // 找出所有的偶数
     //value:数组中元素的值,index:元素的下表,array:所遍历的对象
    var x = nums.filter((value, index, array) => {
    
    
      // 反馈 元素是否满足条件
      return value % 2 == 0
    })
    var x = nums.filter(v => v % 2 == 0)
    console.log(x)
  </script>

案例2:

 <script>
    class Emp {
    
    
      constructor(ename, age, married) {
    
    
        this.ename = ename
        this.age = age
        this.married = married
      }
    }
    const emps = [
      new Emp('孙悟空', 18, true),
      new Emp('猪八戒', 32, false),
      new Emp('沙和尚', 38, true),
      new Emp('白龙马', 34, true),
    ]
    //1. 找出年龄大于20
    var x = emps.filter(v => v.age > 20)
    console.log(x)
    //2. 找出所有已婚
    var x = emps.filter(v => v.married)
    console.log(x)
  </script>

5.map()

map()逻辑:遍历所有元素然后按着自己给的条件进行变化
返回值:返回整个变化后的数组
参数:一个带有三个参数的回调函数
语法:Array.filter((value,index,array)=>{ 在这里插入代码片
return 条件
})
案例1

 <script>
    // map: 映射; 通过一定的规则 把数组中的每个元素进行转换, 得到新的数组
    var nums = [12, 34, 457, 45, 76, 76, 878, 7]

    // 数组中每个元素 翻倍
    var x = nums.map((value, index, array) => {
    
    
      return value * 2
    })
    var x = nums.map(v => v * 2)
    // map 不会修改原数组
    console.log(x)
    /
    var names = ['lucy', 'lily', 'shirley', 'john']
    // 把每个元素变全大写
    var y = names.map(v => v.toUpperCase())
    console.log(y);
  </script>

6.总结

es6中数组的方法很多这四个是比较常用的,其中filter、map应用最多,map在ajax发送请求接受返回的数组时经常使用。

猜你喜欢

转载自blog.csdn.net/m0_45884629/article/details/127743406