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>
)
}