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

130 阅读 0 评论 86 点赞

我是靠谱客的博主笑点低发箍，这篇文章主要介绍JS 数组中的forEach、map、filter、find四个方法的使用方法和案例总结，现在分享给大家，希望可以做个参考。

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

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

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

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

forEach用法(Vue案例)：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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>
}
})
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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案例)：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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案例)：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
)
}