Vue数组响应式操作及高阶函数使用代码详解


Posted in Javascript onAugust 01, 2020

组的响应式操作

//this.letters.push('123');//在末尾添加一个元素

//this.letters.pop();//从末尾删除一个元素
//this.letters.unshift('111');//在开端添加一个元素
//this.letters.shift();//从开端删除一个元素
//this.letters.splice(1,2);//从下标为1的元素开始删除两个元素
//this.letters.splice(1,2,'777','888');//从下标为1的元素开始删除两个元素,并插入一个新元素
//this.letters.splice(1, 0, '777', '888'); //在下标为1处插入两个元素
//this.letters.splice(2);//保留前2个元素,其他的删除掉

高阶函数

1、filter过滤函数

filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。

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

const nums = [2,3,5,1,77,55,100,200];
let newArray = nums.filter(function (n) {
  //小于100就是true,进入newArray数组
  return n < 100;
})
console.log(newArray);//[2,3,5,1,77,55]

2、map高阶函数

map函数同样会遍历数组每一项,传入回调函数为参数,num是map遍历的每一项,回调函数function返回值会被添加到新数组中

const nums = [2,3,5,1,77,55,100,200];
let newArray = nums.filter(function (n) {
  //小于100就是true,进入newArray数组
  return n < 100;
})
console.log(newArray);//[2,3,5,1,77,55]

3、reduce高阶函数

reduce函数同样会遍历数组每一项,传入回调函数和‘0'为参数,0表示回调函数中preValue初始值为0,回调函数中参数preValue是每一次回调函数function返回的值,currentValue是当前值

const nums = [2,3,5,1,77,55,100,200];
let new3Array = nums.reduce(function (preValue,currentValue) {
  //数组为[2,3,5,1,77,55,100,200],则回调函数第一次返回值为0+2=2,第二次preValue为2,返回值为2+3=5,以此类推直到遍历完成
  return preValue+currentValue;
},0);//第二个参数0是preValue的初始值
console.log(new3Array);//443

4、sort排序算法

因为Array的sort()方法默认把所有元素先转换为String再排序,结果'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。如果不知道sort()方法的默认排序规则,直接对数字排序,绝对栽进坑里!

//要按数字大小排序,我们可以这么写:
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
  if (x < y) {
    return -1;
  }
  if (x > y) {
    return 1;
  }
  return 0;
}); // [1, 2, 10, 20]

//如果要倒序排序,我们可以把大的数放前面:
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
  if (x < y) {
    return 1;
  }
  if (x > y) {
    return -1;
  }
  return 0;
}); // [20, 10, 2, 1]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js select option对象小结
Dec 20 Javascript
js控制table合并具体实现
Feb 20 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
javascript运动详解
Jul 06 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
vue 组件简介
Jul 31 #Javascript
three.js 制作动态二维码的示例代码
Jul 31 #Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 #Javascript
vue抽出组件并传值实例
Jul 31 #Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 #Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 #Javascript
原生JS实现记忆翻牌游戏
Jul 31 #Javascript
You might like
PHP执行速率优化技巧小结
2008/03/15 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP网络操作函数汇总
2015/05/18 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
什么是规则表达式
2012/05/03 面试题
电气技术员岗位职责
2013/11/19 职场文书
音乐教学反思
2014/02/02 职场文书
大学社团活动总结
2014/04/26 职场文书
产品销售计划书
2014/05/04 职场文书
护士医德医风自我评价
2014/09/15 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技