JS 数组中的forEach、map、filter、find四个方法的使用方法和案例总结

1. forEach() ：主要用于循环遍历数组，forEach不会返回新数组，允许对原数组进行修改。

2. map() ： 主要用于循环遍历数组，也可在内使用条件语句，map会返回一个新数组，不会改变原来的数组。

3. filter() ：主要用于筛选过滤数组，返回符合筛选条件的数据，filter会返回一个新数组，不会改变原数组。

4. find() ：主要用于查找数组的数据，只要查找到第一项符合条件的数据，直接返回，若没有找到符合条件的数据返回undefined。find会返回具体的结果，不会改变原数组。

forEach用法(Vue案例)：

searchPatient(state, x) {
      // state.searchResult = x
      function expireTime(time) {
        Date.prototype.format = function (format) {
         ......
        }
        let date = new Date(time);
        let expireTime = date.format("yyyy-MM-dd");
        return expireTime
      }
      //x是一个数组里面有四个对象
      x.forEach(item => {
        //x的每一项的registrationDate重新赋值
        item.registrationDate = expireTime(item.registrationDate)
      });
      state.searchResult = x
    }

map用法(React案例)：

const routerList=[
    {
        path:"/",//通用拦截，后台管理界面统一先登录
        name:"登录1",
        redirect:"/Login",//拦截路径
        meta:{
            require:false//是否需要登录
        }
    },
    {
        path:"/Login",
        name:"登录",
        component:Login,//登录页面的组件
        meta:{
            require: false//是否需要登录
        }
    },
    {
        path:"/IndexPage",//系统主入口
        name:"系统主入口",
        component:IndexPage,//登录页面的组件
        meta:{
            require: true//是否需要登录
        },
        role:['admin','user1','user2'],//被允许进入该界面的用户
        children:[
            //首页
            {
                path:"/IndexPage/Home",
                name:"首页",
                component:Home,//登录页面的组件
                meta:{
                    require: true//是否需要登录
                },
                role:['admin','user1','user2'],//被允许进入该界面的用户
            },
            //关于
            {
                path:"/IndexPage/About",
                name:"关于",
                component:About,//登录页面的组件
                meta:{
                    require: true//是否需要登录
                },
                role:['admin','user1','user2'],//被允许进入该界面的用户
            }
        ]
    }
]

util = (routerList) => {
        return routerList.map((item) => {
            //比如点击登录时，登录就没有children
            if (item.children) {//如果有children属性就代表有子组件
                return <Route key={item.name} path={item.path} render={() =>
                    /*-------函数中返回要渲染的组件--------*/
                    <item.component {...this.props}>
                        {this.util(item.children)}
                    </item.component>
                }></Route>
            } else {//没有子组件
                //直接返回组件
                return <Route key={item.name} exact path={item.path} component={item.component}></Route>
            }
        })
    }

filter用法(Vue案例)：

data() {
    return {
      myTableData: [
        {
          num: "1",
          content: "这是第一个病历内容",
          time: "2019-11-12 12:08:28",
          people: "妞妞",
        },
        {
          num: "2",
          content: "这是第二个病历内容",
          time: "2019-11-12 12:08:29",
          people: "小猪",
        },
        {
          num: "3",
          content: "这是第三个病历内容",
          time: "2019-11-12 12:08:20",
          people: "小熊",
        }
      ],
      searchVal: "",
    };
  }
 
methods: {
    //搜索病历信息
    //每次改变input框值时就改变this.myTableData的值
    inputChange() { //循环每一项，只要被循环项的content的属性值含有输入的searchVal值，就加进newList；反之，就无东西加进newList
      let newlist = this.myTableData.filter(
        (item) => item.content.indexOf(this.searchVal) > -1
      );
      this.myTableData = newlist;
    }
  }

find用法(React案例)：

const DetailData = [
  { id: '01', content: '你好,01' },
  { id: '02', content: '你好,02' },
  { id: '03', content: '你好,03' },
]
export default class Detail extends Component {
  render() {
    //3.接收params参数
    const { id, title } = this.props.match.params//解构赋值

    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id //如果某一项对象的id和我传过来的Id相等，findResult就等于这一项数据，findResult就等于这一条符合条件的新数据
    }) || {}

    return (
      <ul>
        <li>id:{id}</li>
        <li>title:{title}</li>
        <li>content:{findResult.content}</li>
      </ul>
    )
  }