1
掌握 Array的内置方法,完全可以不写for循环,解决各种业务场景

Array.prototype.every ( callbackfn [ , thisArg ] ) 函数

语法说明

  1. 第一个参数是回调函数callbackfn 必须有并且是个函数,这个函数接受三个参数并且返回 Boolean值,也就是 true或者false
  2. every函数会在排序遍历当前数组中的每个元素的时候调用一次 callbackfn一直到 callbackfn返回 false的时候结束遍历
  3. 第二个参数是 thisArg ;非必须,如果提供了这个参数;那么这个参数会被赋值给 callbackfn中的 this如果没有提供,那么callbackfn中的thisundefined ;当然在nodejs中会是 global 对象
  4. 回调函数callbackfn 有三个参数,分别是:当前遍历的元素、当前遍历元素的角标、当前遍历的数组对象
  5. every函数不会修改原生数组,但是这个原始的数组可以在callbackfn中被修改
  6. every函数只会遍历数组当前的元素,在遍历过程中添加或者删除的元素都不会被遍历,但是修改的会被遍历
  7. 空数组,会直接返回 true
  8. 如果回调函数没有返回,every只会遍历第一元素,并且返回 false

代码示例

// 判断数组里面的元素的值,都是小于2
let arr = [1,2,3];
let result = arr.every(function(num,index,arr){
    return num<2
})
console.log(result); // 此处输出 false

业务场景

01 判断数组中的数据是否都满足某种条件

示例需求:一个班级的学生必须都是男生
// gender:1->男生 0->女生
let studentList = [
  {
      name:'章三',
      gender:1
  },
  {
      name:'李四',
      gender:1
  },
  {
      name:'王二麻子',
      gender:0
  },
]

let result = studentList.every(function(st){
    return st.gender === 1
})
console.log(result) // 输出false

02 单纯的遍历全部元素,并且当满足某种条件的时候,修改元素

示例需求:一个班级的学生如果是男生,修改他显示的颜色是红色
// gender:1->男生 0->女生
let studentList = [
  {
      name:'章三',
      gender:1
  },
  {
      name:'李四',
      gender:1
  },
  {
      name:'王二麻子',
      gender:0
  },
]

let result = studentList.every(function(st){
    if(st.gender === 1){
      st.color = 'red'
    }
    return true; // 让遍历执行完,如果不写,会只遍历第一个元素
})
console.log(result) // 输出 true

Array.prototype.some ( callbackfn [ , thisArg ] )

语法说明

every非常类型,唯一的区别在第7条和第8条
(7). 如果是空数组,some函数返回false
(8). 如果回调函数没有返回,some遍历所有元素,并且返回 false

示例代码

every类似

业务场景

every类似

使用 everysome的注意事项

  1. 这2个函数都是ES6中的函数,支持浏览器 ie9+,如果需要兼容低版本需要借助第三方工具库实现,例如:lodash.js或者underscore.js
  2. 回调函数,如果没有设置返回值,那么默认会返回null 也就是会被转换为 false
  3. 回调函数 返回false; every会中断遍历 而some会继续遍历

Array.prototype.filter ( callbackfn [ , thisArg ] )

语法说明

基本的语法和之前的 every类似;唯一的区别是,filter会返回一个新的数组

代码示例

every类似

业务场景

过滤班级学生中的男生

// gender:1->男生 0->女生
let studentList = [
  {
      name:'章三',
      gender:1
  },
  {
      name:'李四',
      gender:1
  },
  {
      name:'王二麻子',
      gender:0
  },
]

let maleList = studentList.filter(function(st){
    return st.gender === 1
})
console.log(maleList) // 输出 [/** 全部的男生 **/]

未完待续


无名小卒
1.3k 声望20 粉丝

没有一瞬间的脱胎换骨,编程是一次次的试探,也是一次且行且至的寻觅