Js中的.map()方法-取数组，.sort()方法-数据排序，.slice()方法-数据切片，.filter()方法-过滤器的使用，.reduce()方法

总的数据

以下面的数据为例来分析更加清晰

// 共10组数据
[{
    "name": "商家1",
    "value": 99
}, {
    "name": "商家2",
    "value": 102
}, {
    "name": "商家3",
    "value": 83
}, {
    "name": "商家4",
    "value": 49
}, {
    "name": "商家5",
    "value": 200
}, {
    "name": "商家6",
    "value": 152
}, {
    "name": "商家7",
    "value": 76
}, {
    "name": "商家8",
    "value": 23
}, {
    "name": "商家9",
    "value": 87
}, {
    "name": "商家10",
    "value": 223
}]

.sort()

// 总数据是this.allData，通过.sort()按照每一项value值进行排序
this.allData.sort((a, b) => {
        return a.value - b.value // 从小达大排序
        // 若要从大达小排序，则：return b.value - a.value
      })

.slice()

// 总数据是this.allData
// 将排好序的数据通过slice方法切成了5份
const showData = this.allData.slice(0, 5)

// 如下：
[{
    "name": "商家8",
    "value": 23
}, {
    "name": "商家4",
    "value": 49
}, {
    "name": "商家14",
    "value": 57
}, {
    "name": "商家7",
    "value": 76
}, {
    "name": "商家3",
    "value": 83
}]

// 可以通过控制start和end的值来处理数据，动态获取当前需要的数据
const showData = this.allData.slice(start, end)

.map()

// 通过map赋给一个新的数组
// 将切片后的数据showData通过map方法循环导出单个属性name及其值
const sellerNames = showData.map((item) => {
        return item.name
      })

// 假设是前面排好序的切成5个的name
```javascript
["商家8", "商家4", "商家14", "商家7", "商家3"]
// 分别对应：从小到大
[23, 49, 57, 76, 83]

.filter()

filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素

// 删掉偶数，只保留奇数
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

// 把一个Array中的空字符串删掉
var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
arr; // ['A', 'B', 'C']

回调函数

// filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，
// 表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：
var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});
// 利用filter，可以巧妙地去除Array的重复元素：
'use strict';
 
var
    r,
    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
 
    r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});
 
alert(r.toString());
// indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了，所以重复的元素仅会保留第一个位置的元素

// 尝试用filter()筛选出素数
'use strict';
 
function get_primes(arr) {
var s = arr.filter(function(x){
   if(x<4)return x!=1;
   var i=2;
   for(;i<=x/2;++i)
   if(x%i==0)return false;
   return true;
});
return s;
}
 
// 测试:
var
    x,
    r,
    arr = [];
for (x = 1; x < 100; x++) {
    arr.push(x);
}
r = get_primes(arr);
if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
    alert('测试通过!');
} else {
    alert('测试失败: ' + r.toString());
}

.reduce()

Reduce方法是指将多个值缩减为一个。然而，笔者发现，与“减少”相比，把它想成是“积累”更容易操作。

该方法通过定义起点来运行。当该方法迭代每个值时，该起点将被修改并向下传递。

这是将一系列数字相加的经典案例。假设正在计算某人最喜欢的慈善机构的捐款总额：

const donations = [5, 20, 100, 80, 75];
let total = 0;
for(let i=0; i < donations.length; i++) {
	total += donations[i];
}

与.map()和.filter()不同，.reduce()方法的回调需要两个参数：累加器和当前值。累加器将是第一个参数，是“向下传递”值。

const donations = [5, 20, 100, 80, 75];
let total = donations.reduce((total,donation)=> {
	return total + donation;
});

还可以将第二个参数传递给 .reduce()函数本身，作为累加器的起始值。假设加上昨天总共450美元的捐款。

const donations = [5, 20, 100, 80, 75];
let total = donations.reduce((total,donation)=> {
	return total + donation;
}, 450);

如有任何问题，欢迎下方评论区交流