vue常用高阶函数及综合实例


Posted in Vue.js onFebruary 25, 2021

一. 常用的数组的高阶函数

假设, 现在有一个数组, 我们要对数组做如下一些列操作

  1. 找出小于100的数字:
  2. 将小于100的数字, 全部乘以2:
  3. 在2的基础上, 对所有数求和:

通常我们会怎么做呢?

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <p>找出小于100的数字:</p>
 <p>将小于100的数字, 全部乘以2: </p>
 <p>对所有数求和:</p>

 <button @click="getNum()">计算</button>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
  el: "#app",
  data: {
   nums: [10, 20, 100, 30, 320, 55, 80, 210],
   num1:0,
   num2:0,
   num3:0
  },
  methods: {
   getNum(){
    // 1. 找出<100的数字
    let newNum1 = []
    for(let num of this.nums) {
     if (num < 100) {
      newNum1.push(num)
     }
    }
    this.num1=newNum1
    console.log(newNum1)


    // 2. 对小于100的数字*2
    let newNum2 = []
    for(let num of newNum1) {
     newNum2.push(num * 2)
    }
    this.num2 = newNum2
    console.log(newNum2)

    // 3. 对小于100的数字*2后求和
    let newNum3 = 0;
    for(let num of newNum2) {
     newNum3 += num
    }
    this.num3 = newNum3
    console.log(newNum3)
   }
  }
 })
</script>
</body>
</html>

在上面的demo中, 我们全部都是使用循环来进行计算, 并且最后达到了我们想要的效果. 点击计算按钮, 查看计算结果:

vue常用高阶函数及综合实例

在js高阶函数里面, 有一些高阶函数是可以直接计算得到上面的效果的. 下面主要介绍三个高阶函数

  • filter
  • map
  • reduce

1. filter函数

filter()方法会创建一个新数组,原数组的每个元素传入回调函数中,回调函数中有return返回值,若返回值为true,这个元素保存到新数组中;若返回值为false,则该元素不保存到新数组中;原数组不发生改变。

  • 语法: array.filter(function(currentValue,index,arr), thisValue)
  • 参数

vue常用高阶函数及综合实例

举例1: 返回数组中<100的元素

getNums() {
 // 来看看filter的用法 let num1 = [10 ,20, 100, 30, 320, 55. 80, 210]
 let newNum1 = this.nums.filter(function (num) {
  return num < 100;
 })
 console.log(newNum1)
}
  • filter()函数的入参是一个function, 出参是一个新的数组
  • function函数也有参, 这里只传入了第一个入参, 表示: 循环遍历时的数组元素.
  • function的返回值类型是true或false, 如果返回结果是true, 则返回新数组中有这个元素, 返回结果是false, 则返回新数组中没有这个元素

举例2:利用filter,可以巧妙地去除Array的重复元素:

filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum2 = this.nums.filter(function(element, index, self) {
 return self.indexOf(element) == index
})

运行结果

[10, 20, 100, 30, 320, 55, 80, 210]

去除重复元素依靠的是indexOf总是返回第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等,因此被filter滤掉了。

2. map函数

方法返回一个新数组,新数组中的每一个元素为原始数组对应每一个元素调用函数处理后的值;不会对空数组进行编辑,不改变原来的数组。

  • 语法:array.every(function(item,index,array){})
  • 参数:

vue常用高阶函数及综合实例

举例1: 求数组中所有元素*2后的数组

let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum1 = this.nums.map(function (num) {
 return num * 2;
})

console.log(newNum1)

输出结果:

[20, 40, 200, 60, 640, 110, 160, 420, 40, 110, 640]

3. reduce函数

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,数组中被删除或从未被赋值的元素不处理.

  • 语法:arr.reduce(callback,[initialValue])
  • 参数

vue常用高阶函数及综合实例

案例1: 求一个数组的和

// reduce的用法
let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum1 = this.nums.reduce(function (total, num) {
 return num + total;
}, 0)
console.log(newNum1)

二. 综合案例1

结合filter, map, reduce三个函数, 获取数组中<100的元素, 然后对这些元素同意*5, 最后求*5后的所有元素的和

// reduce的用法
let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum1 = this.nums.filter(function (number) {
 return number < 100
}).map(function (number) {
 return number * 5
}).reduce(function (total, num) {
 return num + total;
}, 0)
console.log(newNum1)

输出结果: 1220

其实还有更简单的算法, lambda表达式

// reduce的用法
let nums = [10, 20, 320]
let newNum11 =
nums.filter(num => num < 100).map(num => num * 5, this).reduce((total, num) => total + num)
console.log(newNum11)

执行结果: 150

三.综合案例2

显示一个列表, 选中那个那个变色, 使用vue实现

vue常用高阶函数及综合实例

可以思考两分钟, 看看, 如何来设计.

在vue中, 这个过程将非常简单

  • 第一步: 定义了一个isCurrentIndex用来记录当前选中元素的下标.
  • 第二步: 在class属性中设置 :isCurrentIndex == index. 表示选中元素的下标显示红色, 其他不显示红色.
  • 第三步: 定义一个click事件, 每次点击事件, 修改选中的下标值

代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  .action {
   color: red;
  }
 </style>
</head>
<body>
<div id="app">
 <ul>
  <li v-for="(item, index) in languages" :class="{action:isCurrentIndex == index}" @click="changeCurrentIndex(index)"> {{index}}--{{item}}</li>
 </ul>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   languages: ["java", "php", "python", "go", "c语言"],
   isCurrentIndex:0
  },
  methods: {
   changeCurrentIndex(index) {
    this.isCurrentIndex = index
   }
  }
 });
</script>
</body>
</html>

四. 综合案例3

我们要做一个表格, 具体内容如下

vue常用高阶函数及综合实例

主要有哪些东西呢?

  1. 有n本书, 书有书名, 出版日期, 价格, 数量, 操作
  2. 价格保留两位小数, 数量可增减, 最多减到0,
  3. 操作可以删除表格 ,当表格没有数据时显示无数据
  4. 随时计算总价格.

下面来看看这个代码如何实现, 结合我们之前学过的js高阶函数

第一步: 定义了n本书, 放在vue的data属性里面

data: {
 books: [
  {name:"java设计模式", publishDate:"1998-10-21", price: 58.00, count: 1},
  {name:"go语言实战分析", publishDate:"2018-5-12", price: 70.00, count: 1},
  {name:"vue深入浅出", publishDate:"2019-08-09", price: 46.89, count: 1},
  {name:"jquery实战", publishDate:"2014-02-29", price: 39.98, count: 1}
 ],
 total: 0
},

定义了一个总价格, 用来保存计算后的总价格

第二步: 画table

<div id="app">
 <table border="1">
  <thead>
   <tr>
    <td>序号</td>
    <td>书名</td>
    <td>出版日期</td>
    <td>价格</td>
    <td>购买数量</td>
    <td>操作</td>
   </tr>
  </thead>

  <tbody v-if="books.length==0">
   <tr>
    <td colspan="6" >没有数据</td>
   </tr>
  </tbody>

  <tbody v-else>
   <tr v-for="(item, index) in books" >
    <td>{{index+1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.publishDate}}</td>
    <td>{{item.price| priceUnit}} </td>
    <td>
     <button @click="sub(index)">-</button>
     {{item.count}}
     <button @click="add(index)">+</button>
    </td>
    <td>
     <button @click="del(index)">删除</button>
   </tr>
  </tbody>
 </table>
 <label id="sum">总价: {{getTotal() | priceUnit}} </label>
</div>

在这里我们循环遍历了data数据, 然后对价格进行了处理, 增加了单位, 对数量增加了增减的button. 最后定义了一个删除功能

第三步. 使用过滤器格式化价格

在对价格进行格式化的时候, 使用了管道符.这是过滤器的写法. 不加过滤器之前, 价格是58. 加了过滤器之后是: $58.00, 增加了一个美元符号, 价格保留两位小数

因为不止有一个地方会用到加单位, 所以, 我们将其定义为一个方法. 如下写法

filters: {
 priceUnit(price) {
  return "$" + price.toFixed(2)
 }
}

这里定义了过滤器的写法. 类似于methods. 里面定义一个方法. 其实这个方法可不可以放在methods中呢? 也可以, 但是放在filters有一个好处. 可以使用管道符写法

<td>{{item.price | priceUnit}} </td>

使用过滤器, 会自动将 | 前面的值作为参数传递给priceUnit

第四步: 定义methods, 对图书数量进行增减, 且做少不能少于0

sub(index) {
 if (this.books[index].count <= 0) {
  this.books[index].coun = 0;
 } else {
  this.books[index].count --;
 }
},
add(index) {
 this.books[index].count ++;
},

这个就不多说了, 普通函数写法

第五步: 计算总额

计算总额有多种写法, 常规写法

getTotal() {
 let totalPrice = 0;
 for(let i = 0; i < this.books.length; i++) {

  totalPrice += this.books[i].price * this.books[i].count;
 }
 
 return totalPrice;
},

循环遍历books, 价格和数量乘积的和

推荐使用js的高阶函数

getTotal() {
 // 使用数组的高阶函数计算每种书的价格总和
 return this.books.map((book)=>book.price * book.count).reduce((total,num) => total + num)
},

在回顾一下

map是对数组的每一个元素执行操作

reduce是对数组中所有元素求和

第六步: 删除表格行

del(index){
 this.books.splice(index,1)
}

删除行, 使用splice删除指定的data中的元素, 就可以了

到此这篇关于vue常用高阶函数及综合案例的文章就介绍到这了,更多相关vue常用高阶函数及实例内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue中computed和watch有哪些区别
Dec 19 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 #Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 #Vue.js
用vite搭建vue3应用的实现方法
Feb 22 #Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 #Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 #Vue.js
Vue实现todo应用的示例
Feb 20 #Vue.js
基于vue的video播放器的实现示例
Feb 19 #Vue.js
You might like
PHP如何将XML转成数组
2016/04/04 PHP
常用PHP封装分页工具类
2017/01/14 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
Python 深入理解yield
2008/09/06 Python
Python中join函数简单代码示例
2018/01/09 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python调用私有属性的方法总结
2020/07/24 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
Java如何格式化日期
2012/08/07 面试题
软件测试面试题
2015/10/21 面试题
多媒体专业自我鉴定
2014/02/28 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
中学生清明节演讲稿
2015/03/18 职场文书