1.高阶函数英文叫Higher-order function。那么什么是高阶函数？
- JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
2.至少满足下列一个条件的函数：
- .接收一个或多个函数作为输入参数
- 输出一个函数
3.总结： 高阶函数的功能很大程度上可以用普通的函数实现，但是高阶函数使代码更加抽象容易理解，使功能代码更加简洁，提高了代码的可读性和执行效率, 在函数复杂时可以很便捷地实现需要的功能。
<div id="app">
<button @click="forofDemo">高阶函数Forof</button>
<button @click="filterDemo">高阶函数Filter(筛选组成新数组)</button>
<button @click="MapDemo">高阶函数Map(对每一项进行操作返回操作后的数组数据)</button>
<button @click="reduceDemo">高阶函数Reduce(数组汇总函数)</button>
<button @click="numBookPrice">图书价格总和</button>
<button @click="forObj">循环对象</button>
</div>
<script src="VueDemo/VueDemo/VueJs/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
bookArrList: [{
id: 1,
name: "三国演义",
date: "2016-02-15",
price: 55.00,
count: 1
}, {
id: 2,
name: "水浒传",
date: "2013-02-15",
price: 35.50,
count: 1
}, {
id: 3,
name: "西游记",
date: "2015-02-15",
price: 78.00,
count: 1
}, {
id: 4,
name: "红楼梦",
date: "2017-02-15",
price: 85.00,
count: 1
}],
arrNum: [120, 100, 110, 200, 200],
objP: [{
name: "zs",
age: 14,
sex: "男"
}, {
name: "ls",
age: 15,
sex: "男"
}]
},
methods: {
forObj() {
for (const item of this.objP) {
console.log(item.name + item.age + item.sex)//zs14男 \r ls15男
}
},
forofDemo() {
var i = 0
//for of循环 iterator指的是当前对象(项) 不是索引
for (const iterator of this.arrNum) {
i += iterator
}
console.log(i)
},
filterDemo() {
let newArr = this.arrNum.filter(function (item) {
return item > 100
})
console.log(newArr)
//品牌列表摘录
var newlist02 = this.NewsList.filter(item => {
if (item.name.includes(kw)) { //string.includes(str) 判断字符串中是否包含某个字符串，如果包含返回为true
return item; //如果包含返回当前项
}
});
return newlist02;
},
MapDemo() {
let arr = this.arrNum.map(function (item) {
return item + 2
})
console.log(arr)
},
reduceDemo() {
let num = this.arrNum.reduce(function (preValue, val) {
//preValue 上一次返回的值 val 循环的当前值 第二参数‘0’为preValue初始值
return preValue + val
//0--100
//100-200
//-- -- 总和
}, 0)
console.log(num)
},
//图书实例
numBookPrice() {
var bookNum = this.bookArrList.reduce(function (preValue, val) {
//val指的是循环的当前项 --- book对象
return preValue + (val.price * val.count)
}, 0)
console.log(bookNum)
},
//另外几个函数补充
deleteDemo() {
//通过数组的新方法findIndex方法
var index = this.NewsList.findIndex(item => {
if (item.id == id) {
return true; //如果该项符合条件，return true返回该项索引并终止循环
}
})
this.NewsList.splice(index, 1);
//----02
//2.使用数组的some方法，遍历该数组，一旦符合某个条件终止循环，返回true终止循环
this.NewsList.some((item, i) => {
if (item.id == id) {
//找到了调用数组的splice方法删除该组数据，并返回true
this.NewsList.splice(i, 1);
return true;//return true终止循环
}
})
},
//补充--------------------------------------------------------------------------------
De() {
// this.fruteArry.pop();//删除最后一项
// this.fruteArry.push('榴莲'); //追加一个元素
// var obj = this.fruteArry.shift(); //删除前面的元素,返回值是删除的元素
// var obj = this.fruteArry.unshift("Apple"); //在前面添加，返回新的数组长度
// var obj = this.numArry.sort(); //默认排序，按最左边的数字进行排序
var arr2 = this.numArry.sort((a, b) => {
return a - b; //升序(没有><)
});
// var obj = this.fruteArry.reverse();//反转
//更新对象，没有对象的变异方法，要使用Vue的$set函数来更新
// objVue.$set(this.objZs, "sayHi", "Hellow World"); //1.更新对象2.更新目标属性3.更新值
//已有属性执行更新操作，没有的属性执行添加操作
//删除对象属性
// Vue.delete(this.objZs, "name"); //使用Vue函数
// objVue.$delete(this.objZs, "name"); //使用Vue对象(实例)加$
}
},
})
</script>
