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 相关文章推荐
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
JavaScript数组去重实现方法小结
Jan 17 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 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
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python项目跨域问题解决方案
2020/06/22 Python
python ssh 执行shell命令的示例
2020/09/29 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
DOM和JQuery对象有什么区别
2016/11/11 面试题
大一期末自我鉴定
2013/12/13 职场文书
自我评价200字分享
2013/12/17 职场文书
2014年冬季防火方案
2014/05/21 职场文书
作文评语集锦
2014/12/25 职场文书
小学信息技术教学反思
2016/02/16 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python