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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 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
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
Vue.use源码分析
2017/04/22 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
实例讲解python函数式编程
2014/06/09 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
python 从list中随机取值的方法
2020/11/16 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
门卫岗位安全职责
2013/12/13 职场文书
房地产还款计划书
2014/01/10 职场文书
教师考核鉴定意见
2015/06/05 职场文书