Jacinda

Appearance

On this page
🎨 作者：Jacinda 📔 阅读量：

filter ​

前提 ​

针对接口返回的数据，假设需要显示符合条件的数据，那么就可以用到 filter函数。其次，后端如果没给定条件，前端可以自行往里添加一个参数，作为 flag，便于我们根据条件进行渲染数据

示例 ​

js
api.getZeroListData().then(res => {
    let random1 = parseInt(Math.random()* 1000);
    let resZeroFilter = res.data.filter( item => item.isindex == '1').map( (item,index) => {
        return Object.assign(item, { flag: 'zero',comment: random1+index*2 });
    }).slice(0,2)
    this.recommendList.push(...resZeroFilter)
});

代码解读 ​

首先，上述代码的功能是，先过滤我需要显示的数组，并且往每一个item里添加一个标识属性，以及随机评论数，以至于我可以用switch进行分类跳转不同页面。然后再对返回的数据进行截取，只显示两条数据。

用到的函数有：

  • filter
  • map
  • Object.assign
  • slice
  • Math.random

因此，上述代码，首先我先对数组里的元素进行筛选，利用 filter 函数，只返回某个属性为'1'的元素。由于过滤完，它本身还是一个数组，只不过是里面的元素改变了。所以，在这基础上，对这个数组进行遍历 map，往里面添加两个属性，一个是flag，一个是随机评论数，这里用到的就是Object.assign。最后，再对数组做截取 slice，只取前两条数据。

filter ​

用于对Array进行过滤，可以理解为有条件的筛选，然后返回符合要求的元素的新数组。返回值还是Array类型，只是元素做了改变。

示例 ​

对数组进行筛选，只保留奇数

js
let arr = [1, 2, 4, 5, 6, 9, 10, 15];
// 写法一
let res = arr.filter(function (x) {
    return x % 2 !== 0;
});
res  // [1, 5, 9, 15]

// 写法二 (比较常用)
let res = arr.filter( item => 
    item % 2 !== 0
);
res  // [1, 5, 9, 15]

map ​

map其实与filter差不多，只不过是针对数组进行遍历，然后在遍历的过程中根据需求，对每个元素做改变，并返回一个新的数组。

示例1 ​

对数组里的每个元素乘2

js
let arr = [1, 2, 4, 5];
let res = arr.map( item => 
    item * 2
);
//res   [2, 4, 8, 10]

示例2 ​

先遍历arr，获取到数组里的每一个item. 我需要往每一个item里添加一个新的属性，由于数组里的item，是一个对象，这时就可以用Object.assign，对每一个item去添加。最后返回一个新的数组。

js
let arr = [
    {name: '111'},
    {name: '222'},
];
let res = arr.map( item => {
    return Object.assign(item, { flag: 'zero' });
})
//打印res Array [Object { name: "111", flag: "zero" }, Object { name: "222", flag: "zero" }]

Object.assign ​

用于对目标对象，进行添加新的属性。 如果目标对象与新属性同名，则目标对象的值会被覆盖。

Object.assign( 目标对象(需要修改的对象)，源对象(指我们需要添加的新属性))

具体代码和演示结果，参考上方。

slice ​

用于对Array里的元素进行截取，从给定的 start 参数开始，到给定的 end 参数处结束，但不包括。 [start,end)

示例1 ​

对数组进行截取，去第三到第四个元素。

js
let arr = [1, 2, 4, 5, 6, 9, 10, 15];

let res = arr.slice(2,4)

//res [4, 5]

示例2 ​

截取最后三个元素，可以以负数开头

js
let arr = [1, 2, 4, 5, 6, 9, 10, 15];

let res = arr.slice(-3)

//res [9, 10, 15]

Math.random ​

可根据条件，获取随机数

示例1 ​

获取1000以内的随机整数。

js
let random1 = parseInt(Math.random()* 1000);

//Math.random() * n   这里的n指代限定范围

Copyright © 2023-present Jacinda