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 中遍历数组对象存到一个新数组里
vue 中遍历数组对象存到一个新数组里(亲测可行!!!) 参考文档 : MDN-解构赋值方法一 : For of 迭代和解构 var people = [{name: 'Mike Smith',f ...
调用html模板显示数据,通过str_replace（）显示html模板中的数组数据
我正在处理一个PHP类,在这里我用数据替换变量到HTML电子邮件模板文件.它通过将数据替换为"{{first_name}}"这样的字符串.通过str_replace()显示html ...
vue中删除数组元素
vue中删除数组元素 let arr = [{ name: 'aa',id: 11},{name: 'bb',id: 12} ] 1.filter arr = arr.filter(t => t ...
高德地图 Vue 中加载数据可视化 Loca 的方式
高德地图 Vue 中加载数据可视化 Loca 的方式今天想用 Loca 试试如何的,结果怎么都加载不上,我的代码是这样的 AMapLoader.load({key: "这个就不展示了& ...
Python中用pandas将numpy中的数组数据保存到csv文件
Python中用pandas将numpy中的数组数据保存到csv文件本博客转载自:[1]https://blog.csdn.net/grey_csdn/article/details/7018587 ...
Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...
Wed APIS-Window对象、本地存储、数组的map（）方法、数组的join（）方法
目录 Window对象 1.BOM(浏览器对象模型) 2.定时器-延时函数 3.JS执行机制 4.location对象 5.navigator对象 6.histroy对象本地存储 1.分类 1.1. ...
vue中ztree使用懒加载的方法
vue中ztree使用懒加载的方法正常引用过后使用: import tree from "vue-giant-tree"; <tree:setting="sett ...
python csv库,Python 中导入csv数据的三种方法
Python 中导入csv数据的三种方法,具体内容如下所示: 1.通过标准的Python库导入CSV文件: Python提供了一个标准的类库CSV文件.这个类库中的reader()函数用来导入CSV文 ...

Vue中构造数组数据-map和forEach方法梳理

Vue中构造数组数据-map和forEach方法梳理相关推荐

最新文章

热门文章