在使用vue的过程中，我们经常会用到一些es6的函数。这些函数可以帮助我们解决一些简单但繁琐的操作。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意：filter() 不会对空数组进行检测也不会改变原始数组。
孤狼 | 
2022-07-29 23:50:49 | 
1673°C | 
0条评论 ]let ndata={
nums:[10,22,33,44,55,99,101,120,112,158,522]
};
back1(){
return this.nums.filter(function(n){
return n<100; //条件表达式
});
}上面函数的作用是判断nums数组内的数字是否小于100，如果小于则返回一个新数组。不符合条件的会跳过。
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测也不会改变原始数组。
let ndata={
nums:[10,22,33,44,55,99,101,120,112,158,522]
};
back2(){
return this.nums.map(function(n){
return n*2;
});
}上面函数的作用是将数组nums内的所有数都乘以2，并返回一个新数组
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始运算，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
let ndata={
nums:[10,22,33,44,55,99,101,120,112,158,522]
};
back3(){
return this.nums.reduce(function(pre,n){
return pre+n;
},0);
}上面函数作用是将数组nums内的所有数相加，并返回最终值pre
每次循环都会将nums数组内的一个值赋值给n，然后进入函数处理，最终结果返回给pre带入下次循环。最后的“0”，表示pre的初始值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 高阶函数</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>{{back1()}}</div>
<div>{{back2()}}</div>
<div>{{back3()}}</div>
</div>
<script>
let ndata={
nums:[10,22,33,44,55,99,101,120,112,158,522]
};
const app=new Vue({
el:"#app",
data:ndata,
methods: {
back1(){
return this.nums.filter(function(n){
return n<100;
});
},
back2(){
return this.nums.map(function(n){
return n*2;
});
},
back3(){
return this.nums.reduce(function(pre,n){
return pre+n;
},0);
}
},
});
</script>
</body>
</html>
赞赏一个鸡腿
