Vue中构造数组数据之map和forEach方法实现

目录
  • 一、手写实现
  • 二、二者区别
  • 三、使用场景

数组操作是前端最重要的数据操作，构造数组数据，又是数组操作中很常见的。本文将梳理下map和forEach方法在Vue项目中的使用。

想要深入理解这两个方法，一定要手写几次简易的实现，理解其中的要义。这里只考虑核心部分，一些边界问题就忽略了。

一、手写实现

简易map方法：

Array.prototype.myMap = function(callback) {
    const res = [];
    for (let i = 0; i < this.length; i++) {
        // 这里将回调函数的执行结果push进了新数组，
        // 因此map方法在回调函数中一定要有return。
        res.push(callback(this[i], i, this));
}
    return res;
}

简易forEach方法：

Array.prototype.myForEach = function (fn, context) {
  context = context || arguments[1];
  let len = this.length;
  let k = 0;
  while (k < len) {
    if (k in this) {
      fn.call(context, this[k], k, this);
    };
    k++;
  }
};

二、二者区别

相同点：

1，都对数组的循环语句做了封装（while循环）。

2，map能做的事，forEach也能做，反之亦然。

3，两者都可以修改原数组，通过回调函数实现。当然两者的回调函数都可以不对原数组做修改。

4，在两个方法中使用return，只能结束当前这一次循环，不能结束整个循环，因为return是写在回调函数中的。

不同点：

1，map方法返回一个新数组；forEach方法返回undefined。

2，map可链式调用，forEach不可以。因为forEach总是返回undefined。

3，除了抛出异常，没有办法终止或跳出forEach循环。

三、使用场景

以下两种情况不要使用map方法。

1，不打算使用返回的新数组。

2，没有在回调函数中返回值。

举个Vue中的例子：

比如后台接口返回一个对象数据，我们需要将此对象数据构造成为一个新数组，展示到elementUi中的select下拉框中。那么我们应该用map方法呢，还是forEach呢？

let data = {
    product: '产品',
    service: '服务',
    micServide: '微服务',
}

let keysArr = Object.keys(data)

// 用forEach方法

let res = []
keysArr .forEach(item => {
    res.push( { value: item, label: data[item] } )
})

// 用map方法

let res1 = data.map(item => {
    return { value: item, label:  }
})

// 在Vue项目中，直接将res 换成给当前组件data中的数据赋值即可。
由以上例子可见，当我们需要构造一个新的数组时，两种方法都能用，但是map方法要更简洁。因此，能用map方法的地方，首先要用map方法。

到此这篇关于Vue中构造数组数据-map和forEach方法梳理的文章就介绍到这了,更多相关Vue构造数组数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue forEach循环数组拿到自己想要的数据方法

    如下所示: <el-checkbox v-for="(item) in jurisdictionContent" :label="item.id" :key="item.id" class="checkboxMargin"> <span>{{item.value}}{{item.checked}}</span> </el-checkbox> handleJurisdiction(

  • Vue必学知识点之forEach()的使用

    Vue必学知识点之forEach()的使用

    前言 在前端开发中,经常会遇到一些通过遍历循环来获取想要的内容的情形,而且这种情形在开发中无所不在,那么本篇博文就来分享一个比较常用又经典的知识点:forEach() 的使用. forEach() 是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是 for 循环的升级版,该语句需要有一个回调函数作为参数.回调函数的形参依次为:1.value:遍历数组的内容:2.index:对应数组的索引,3.array:数组自身. 在 Vue 项目中,标签里的循环使用 v-for,方法里面的循环使用

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

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

  • 详解vue数组遍历方法forEach和map的原理解析和实际应用

    一.前言 forEach和map是数组的两个方法,作用都是遍历数组.在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例. 二.代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3个参数item(当前项), index(当前项的索引), arr(原数组),还有一个可选参数this 匿名函数中的this默认是指向window的 对空数组不会调用回调函数 不会改变原数组(某些情况下可改变) 2. forEach (1) 没有返回值. var

  • Vue向后台传数组数据,springboot接收vue传的数组数据实例

    用axios前台代码: let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{ console.log(result) }) 后台代码: @RequestMapping(&qu

  • Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta

  • Vue中构造数组数据之map和forEach方法实现

    目录 一.手写实现 二.二者区别 三.使用场景 数组操作是前端最重要的数据操作,构造数组数据,又是数组操作中很常见的.本文将梳理下map和forEach方法在Vue项目中的使用. 想要深入理解这两个方法,一定要手写几次简易的实现,理解其中的要义.这里只考虑核心部分,一些边界问题就忽略了. 一.手写实现 简易map方法: Array.prototype.myMap = function(callback) { const res = []; for (let i = 0; i < this.len

  • Vue中v-for的数据分组实例

    使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-for,那分组呢?这里需要用到vue的computed特性,将数据动态计算分组. 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • 解决vue中修改了数据但视图无法更新的情况

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个

  • vue中更改数组中属性,在页面中不生效的解决方法

    问题描述: 使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态 解决方案: edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

  • 使用pandas将numpy中的数组数据保存到csv文件的方法

    接触pandas之后感觉它的很多功能似乎跟numpy有一定的重复,尤其是各种运算.不过,简单的了解之后发现在数据管理上pandas有着更为丰富的管理方式,其中一个很大的优点就是多出了对数据文件的管理. 如果想保存numpy中的数组元素到一个文件中,通过纯Python的文件写入当然是可以实现的,但是总觉得是少了一点便捷性.在这方面,pandas工具的使用就会让工作方便很多.下面通过一个简单的小例子来演示一下. 首先,创建numpy中的数组. In [18]: arr1 = np.arange(10

  • Vue中如何定义数据示例详解

    前言 在开发的过程中,定义变量是一件非常高频且十分基础的事情,如何合理的根据变量的使用场景和作用域范围进行定义变量,是一件很小缺很容易犯错的事情 Vue2已经流行使用了这么多年,多数开发者在开发过程中喜爱在data选项中梭哈定义很多变量,这样做非常不利于代码的阅读性.维护性和性能,想要很好的使用变量,需要结合Vue和JS的特性 在Vue中,按照是否需要双向数据绑定,可以将变量分为两种: 一种是需要被Vue的数据劫持,将data的变化实时响应到view上 只要data只能够的msg变化, temp

  • vue watch自动检测数据变化实时渲染的方法

    vue watch自动检测数据变化实时渲染的方法

    本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下: 首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 第一个hand

随机推荐