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

组的响应式操作

//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]

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

时间: 2020-07-29

Vue.js中provide/inject实现响应式数据更新的方法示例

vue.js官方文档:https://cn.vuejs.org/v2/api/#provide-inject 首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么? parent父页面: export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word '} } created() { setTimeout(()=>{

Vue data的数据响应式到底是如何实现的

研究过程 一般形式 data:{ n:0 } :以这样的方式存储数据,vue能够监听其变化吗?显然是不能的. 使用Obj.defineProperty let data1 = {} Object.defineProperty(data1, 'n', { value: 0 }) 为什么要使用defineProperty呢?这不是把一般形式复杂化了吗? 引出主角getter setter. 如果我们想对数据监听进行处理呢?(假设修改的数据必须>=0) let data2 = {} data2._n

稍微学一下Vue的数据响应式(Vue2及Vue3区别)

什么是数据响应式 从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom. 换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改. 因此实现数据响应式有两个重点问题: 如何知道数据发生了变化? 如何知道数据变化后哪里需要修改? 对于第一个问题,如何知道数据发生了变化,Vue3 之前使用了 ES5 的一个 API Object.defineProperty Vue

vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)

为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果. 解决问题: 以背景方式显示 无法获取按钮焦点,触发不了点击事件 实现过程 安装vue-particles npm install vue-particles --save-dev 全局配置vue-particles 在main.js里面: import VueParticles from 'vue-particles' Vue.use(VueP

使用Vue.set()方法实现响应式修改数组数据步骤

在页面中显示数组数据时发现了一个问题,当在methods方法中修改数组数据后,虽然数组已经发生改变,但是改变后的数据并没有渲染到页面上.这是因为在VUE中,如果在实例创建之后添加新的属性或者改变属性到实例上,它将不会触发视图更新. 而Vue.set()方法能够确保响应式对象被创建后仍然是响应式的,同时触发视图更新,动态响应数据的变化. 用法如下: Vue.set(object,index,value) object:要更改的数据源(数组或对象) index:数据的索引(第几项) value:修改

Vue项目打包压缩的实现(让页面更快响应)

影响网页响应速度的因素有很多,例如:http请求次数太多.服务器本身处理请求太久.请求内容太大.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长. 我的一个小项目,仅有三四个页面,但因为服务器带宽太小了,加载时间过长的问题尤为明显,于是采用路由懒加载和gzip压缩的方式优化了一下,访问速度得到了显著提升. 一.路由懒加载:分割代码块 Vue支持异步组件,

vue在响应头response中获取自定义headers操作

日常开发,我们可能会为了安全问题,保证第三方无法通过伪造返回报文欺骗前端,需要在返回报文中添加自定义参数,用于验证身份,后端添加自定义参数,前端校验自定义参数通过后才会执行相应的操作. 系统为了安全会去掉自定义头,如果不做任何处理,前端无法通过javascript访问自定义头,所以需要在接口返回中添加这样的操作. response['Cookie'] ='13231231231' #自定义头 添加后接口返回信息如以下截图: 控制台打印headers信息如以下截图: 要正确打印需要在接口返回中设置

Vue3.0 响应式系统源码逐行分析讲解

前言 关于响应式原理想必大家都很清楚了,下面我将会根据响应式API来具体讲解Vue3.0中的实现原理, 另外我只会针对get,set进行深入分析,本文包含以下API实现,推荐大家顺序阅读 effect reactive readonly computed ref 对了,大家一定要先知道怎么用哦~ 引子 先来段代码,大家可以直接复制哦,注意引用的文件 <!DOCTYPE html> <html lang="en"> <head> <meta ch

茶余饭后聊聊Vue3.0响应式数据那些事儿

"别再更新了,实在是学不动了"这句话道出了多少前端开发者的心声,"不幸"的是 Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本,这意味着 Vue3.0 快要和我们见面了.既来之则安之,扶我起来我要开始讲了.Vue3.0 为了达到更快.更小.更易于维护.更贴近原生.对开发者更友好的目的,在很多方面进行了重构: 使用 Typescript 放弃 class 采用 function-based API 重构 complier 重构 virtual

你了解vue3.0响应式数据怎么实现吗

从 Proxy 说起 什么是Proxy proxy翻译过来的意思就是"代理",ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层"拦截",返回一个新的代理对象,之后所有在Proxy中被拦截的属性,都可以定制化一些新的流程在上面,先看一个最简单的例子 const target = {}; // 要被代理的原对象 // 用于描述代理过程的handler const handler = { get: function (target,

vue响应式系统之observe、watcher、dep的源码解析

Vue的响应式系统 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身,而不用手动处理数据到视图的渲染,避免了繁琐的 DOM 操作,提高了开发效率. vue 的响应式系统依赖于三个重要的类:Dep 类.Watcher 类.Observer 类,然后使用发布订阅模式的思想将他们揉合在一起(不了解发布订阅模式的可以看我之前的文章发布订阅模式与观察者模式). Obser

这应该是最详细的响应式系统讲解了

前言 本文从一个简单的双向绑定开始,逐步升级到由defineProperty和Proxy分别实现的响应式系统,注重入手思路,抓住关键细节,希望能对你有所帮助. 一.极简双向绑定 首先从最简单的双向绑定入手: // html <input type="text" id="input"> <span id="span"></span> // js let input = document.getElementByI

Vue如何实现响应式系统

前言 最近深入学习了Vue实现响应式的部分源码,将我的些许收获和思考记录下来,希望能对看到这篇文章的人有所帮助.有什么问题欢迎指出,大家共同进步. 什么是响应式系统 一句话概括:数据变更驱动视图更新.这样我们就可以以"数据驱动"的思维来编写我们的代码,更多的关注业务,而不是dom操作.其实Vue响应式的实现是一个变化追踪和变化应用的过程. vue响应式原理 以数据劫持方式,拦截数据变化:以依赖收集方式,触发视图更新.利用es5 Object.defineProperty拦截数据的set

100行代码理解和分析vue2.0响应式架构

分享前啰嗦 我之前介绍过vue1.0如何实现observer和watcher.本想继续写下去,可是vue2.0横空出世..所以直接看vue2.0吧.这篇文章在公司分享过,终于写出来了.我们采用用最精简的代码,还原vue2.0响应式架构实现. 以前写的那篇 vue 源码分析之如何实现 observer 和 watcher可以作为本次分享的参考. 不过不看也没关系,但是最好了解下Object.defineProperty 本文分享什么 理解vue2.0的响应式架构,就是下面这张图 顺带介绍他比rea

浅谈实现vue2.0响应式的基本思路

最近看了vue2.0源码关于响应式的实现,以下博文将通过简单的代码还原vue2.0关于响应式的实现思路. 注意,这里只是实现思路的还原,对于里面各种细节的实现,比如说数组里面数据的操作的监听,以及对象嵌套这些细节本实例都不会涉及到,如果想了解更加细节的实现,可以通过阅读源码 observer文件夹以及instance文件夹里面的state文件具体了解. 首先,我们先定义好实现vue对象的结构 class Vue { constructor(options) { this.$options = o

PHP+Mysql无刷新问答评论系统(源码)

自己写的一个评论系统源码分享给大家,包括有表情,还有评论机制.用户名是随机的 针对某一篇文章进行评论 function subcomment() { $data['uid'] = getUserid(); $data['mtype'] = I("post.mtype", 0, 'int'); if ($data['uid'] == '') { echo json_encode(array("code" => -1)); } else { $content =

C语言银行储蓄系统源码

本文为大家分享了C语言银行储蓄系统源码,实现银行的各项功能,供大家参考,具体内容如下 #include <stdio.h> #include <stdlib.h> #include <conio.h> #include <string.h> void openaccount();//开户 void save();//存款 void withdraw();//取款 void showAccount();//查询 void transferAccounts();