拒绝写for循环，前端工程师必须掌握的Array的原生函数

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

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

语法说明

1. 第一个参数是回调函数callbackfn 必须有并且是个函数，这个函数接受三个参数并且返回 Boolean值，也就是 true或者false
2. every函数会在排序遍历当前数组中的每个元素的时候调用一次 callbackfn一直到 callbackfn返回 false的时候结束遍历
3. 第二个参数是 thisArg ；非必须，如果提供了这个参数；那么这个参数会被赋值给 callbackfn中的 this如果没有提供，那么callbackfn中的this 是 undefined ;当然在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类似

使用 every和some的注意事项

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) // 输出 [/** 全部的男生 **/]

未完待续