<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 输出新的数组,数组中所有元素值小于100-->
<h2>{{message}}</h2>
<h2 v-for="item of nums">{{item}}</h2>
<button @click="btn1click">测试filter</button>
<button @click="btn2click">测试map</button>
<button @click="btn3click">测试reduce</button>
</div>
<script src="../js/vue.js"></script>
<script>
/*高阶函数:filter\map\reduce
const app=new Vue({
el:'#app',
data:{
message:'你好',
nums:[10,20,130,40,50,80,1000,150,158]
},
methods:{
btn1click() {
/*
filter的使用
filter方法解析: filter 方法返回一个新的数组,其中的元素:返回结果为true时n入数组,否则不入*/
this.nums = this.nums.filter(function (n) {
return n < 100;
})
},
/*
map的使用
map方法解析: map 方法返回一个新的数组,其中的元素:对元素进行返回的操作*/
btn2click(){
this.nums=this.nums.map(function(n){
return n*100;
})
},
/*
reduce 的使用
reduce 方法解析: reduce 方法对所有内容进行汇总
*/
btn3click(){
this.message=this.nums.reduce(function(privalue,n){
return privalue+n;
})
},
}
})
</script>
</body>
</html>
button1:
数组中删除了小于100的数据
button2:
原数组中所有的元素*100
button3:
数据汇总