上一节，讲到如何引入lin-ui自定义组件
现在将讲解如何利用JS的原生方法处理数据问题。
集合当中：find、filter、map、reduce、some的使用
菜单
find函数讲解
find方法返回数组中第一个通过测试的元素的值
如果为空，则返回undefined
var stu =[]
var stu1 = {"name": "张三","gender": "男", "age": 20};
var stu2 = {"name": "李四","gender": "女", "age": 18};
var stu3 = {"name": "王五","gender": "女", "age": 30};
stu.push(stu1)
stu.push(stu2)
stu.push(stu3)
var cb1 = stu.find((element) => (element.name == '李四'));
//返回数据 {name: "李四", gender: "女", age: 18}
var cb2 = stu.find((element) => (element.gender == '女'));
//返回数据 {name: "李四", gender: "女", age: 18}
var cb3 = stu.find((element) => (element.age >= 20 && element.gender == '女'));
// 返回数据 {name: "王五", gender: "女", age: 30}
var cb4 = stu.find((element) => (element.age >= 30 && element.gender == '男'));
console.log(cb4);
// 返回数据 undefinedfindIndex函数讲解
返回第一个匹配条件的索引，注意索引是从0开始
如果没有相匹配的索引时，返回-1
var stu =[]
var stu1 = {"name": "张三","gender": "男", "age": 20};
var stu2 = {"name": "李四","gender": "女", "age": 18};
var stu3 = {"name": "王五","gender": "女", "age": 30};
stu.push(stu1)
stu.push(stu2)
stu.push(stu3)
var cb1 = stu.findIndex((element) => (element.name == '李四'));
// 返回数据1 索引号
var cb2 = stu.findIndex((element) => (element.gender == '女'));
// 有个结果满足，但返回索引1 只返回一个
var cb3 = stu.findIndex((element) => (element.age >= 20 && element.gender == '女'));
// 返回数据2 索引号
var cb4 = stu.findIndex((element) => (element.age >= 30 && element.gender == '男'));
// 没有相匹配的数据，返回-1forEach函数讲解
无返回值，不改变原数组，仅仅只是遍历
var stu =[]
var stu1 = {"name": "张三","gender": "男", "age": 20};
var stu2 = {"name": "李四","gender": "女", "age": 18};
var stu3 = {"name": "王五","gender": "女", "age": 30};
stu.push(stu1)
stu.push(stu2)
stu.push(stu3)
var username = [];
stu.forEach(s=>{
//获得单个对象
console.log(s);
//获取索引
var i = stu.indexOf(s);
console.log(i)
username.push(s.name)
})
console.log(username);
map函数讲解
map可以用作循环处理；也可以用作修改此数组的数据，但如果需要修改数组数据的时候，需要return
var stu =[]
var stu1 = {"name": "张三","gender": "男", "age": 20};
var stu2 = {"name": "李四","gender": "女", "age": 18};
var stu3 = {"name": "王五","gender": "女", "age": 30};
stu.push(stu1)
stu.push(stu2)
stu.push(stu3)
var username = [];
var stunew = stu.map(s=>{
console.log(s);
s.name=s.name+",您好"
return s;
})
console.log(stunew)
filter函数讲解
filter函数可以看成是一个过滤函数，返回符合条件的元素的数组
var stu =[]
var stu1 = {"name": "张三","gender": "男", "age": 20};
var stu2 = {"name": "李四","gender": "女", "age": 18};
var stu3 = {"name": "王五","gender": "女", "age": 30};
stu.push(stu1)
stu.push(stu2)
stu.push(stu3)
var cb1 = stu.filter(s=> {
return s.name == '李四'
})
// 返回名字=李四的数组
var cb2 = stu.filter(s=> {
return s.age >= 18 && s.gender == '女'
})
//返回符合条件的两个数组
var cb3 = stu.filter(element => { return element.age >= 30 && element.gender == '男'});
//返回为空some函数讲解
返回布尔值，遍历数组的每一项，若其中一项为 true，则返回false；
var stu =[]
var stu1 = {"name": "张三","gender": "男", "age": 20,"company":"fox"};
var stu2 = {"name": "李四","gender": "女", "age": 18,"company":"fox"};
var stu3 = {"name": "王五","gender": "女", "age": 30,"company":"fox"};
stu.push(stu1)
stu.push(stu2)
stu.push(stu3)
var cb1 = stu.some(s=> {
return s.name == '李四'
})
//数组中有一项有条件满足，返回true
var cb2 = stu.some(s=> {
return s.company=='fox1'
})
////数组中没有一项有条件满足，返回falseevery函数讲解
返回布尔值，遍历数组的每一项，若其中一项不满足条件为 false，则返回true；
var stu =[]
var stu1 = {"name": "张三","gender": "男", "age": 20,"company":"fox"};
var stu2 = {"name": "李四","gender": "女", "age": 18,"company":"fox"};
var stu3 = {"name": "王五","gender": "女", "age": 30,"company":"fox"};
stu.push(stu1)
stu.push(stu2)
stu.push(stu3)
var cb1 = stu.every(s=> {
return s.name == '李四'
})
//数组中有一项条件不满足，返回false
var cb2 = stu.every(s=> {
return s.company=='fox'
})
////数组中所有条件满足，返回trueconcat函数讲解
方法不会更改现有数组，而是返回一个新数组，但不会去重
var stu =[]
var stu1 = {"name": "张三","gender": "男", "age": 20,"company":"fox"};
var stu2 = {"name": "李四","gender": "女", "age": 18,"company":"fox"};
var stu3 = {"name": "王五","gender": "女", "age": 30,"company":"fox"};
stu.push(stu1)
stu.push(stu2)
stu.push(stu3)
var atu1 = {"name": "李四2","gender": "女", "age": 18,"company":"fox"};
var atu2 = {"name": "王五","gender": "女", "age": 30,"company":"fox"};
var atu =[]
atu.push(atu1)
atu.push(atu2)
var Volvo = stu.concat(atu);
console.log(Volvo)小程序改造示例：
1、修改theme.js，使用find方法
import { Http } from "../../utils/http.js"
import {config} from "../comfig/config.js"
export class Theme{
static locationA = "t-1"
static locationE = "t-2"
static locationF = "t-3"
static locationH = "t-4"
themes = []
async GetThemes(){
const names = `${Theme.locationA},${Theme.locationE},${Theme.locationF},${Theme.locationH}`;
const themesData = await Http.request({
url:"theme/by/names",
data:{
names:names
}
})
this.themes = themesData;
}
async getHomelocationA(){
return this.themes.find(t=>t.name===Theme.locationA);
}
async getHomelocationE(){
return this.themes.find(t=>t.name===Theme.locationE);
}
async getHomelocationF(){
return this.themes.find(t=>t.name===Theme.locationF);
}
async getHomelocationH(){
return this.themes.find(t=>t.name===Theme.locationH);
}
}
2、修改home.js调用的函数
// pages/home/home.js
import { Banner } from "../model/banner.js";
import { category } from "../model/category.js";
import { Theme } from "../model/theme.js"
import { Activity } from "../model/activity.js"
Page({
/**
* 页面的初始数据
*/
data: {
WebTitle:"Fox_Test",
topTheme: null,
themeE:null,
bannerB:null,
grid:[],
activity:null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad : async function(){
this.initAllDate();
},
initAllDate: async function(){
const themes = new Theme();
await themes.GetThemes();
const themeA = await themes.getHomelocationA();
const themeE = await themes.getHomelocationA();
const bannerB = await Banner.getHomeLocationB();
const grid = await category.getGridCategory();
const activityD =await Activity.getHomeLocationD();
this.setData({
activityD:activityD,
topTheme:themeA,
themeE:themeE,
bannerB:bannerB,
grid:grid
})
}
})
下一步，我们将通过面向对象的方式，改造自定义组件。并讲解小程序中的外部样式类。