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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
React key值的作用和使用详解
Aug 23 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
Vue 实现登录界面验证码功能
Jan 03 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表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
初识ThinkPHP控制器
2016/04/07 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python中的字符串查找操作方法总结
2016/06/27 Python
Python学习入门之区块链详解
2017/07/25 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python性能测试工具locust的使用
2020/12/28 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
大宝sod蜜广告词
2014/03/21 职场文书
质量承诺书范文
2014/03/27 职场文书
python glom模块的使用简介
2021/04/13 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers