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 组件,递归渲染每个节点及其子节点,支持自定义颜色、文本和布局,通过独特的样式巧妙处理不同层级,为用户打造丰富的视觉盛宴,文中通过代码给大家介绍的非常详细,感兴趣的同学可以自己动手尝试一下2024-02-02
vite是VUE3创建项目的工具,项目大了之后,性能明显优于webpack,下面这篇文章主要给大家介绍了关于vite构建vue3项目的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue+web端仿微信网页版聊天室功能，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Vue中的 DOM与Diff详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助2022-08-08
这篇文章主要介绍了vue项目打包部署到服务器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）
这篇文章主要介绍了vue搜索页开发实例（热门搜索，历史搜索，淘宝接口演示）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了Vue基于iview table展示图片实现点击放大,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下2021-09-09
vue3+vite加载本地js/json文件不能使用require浅析
这篇文章主要给大家介绍了关于vue3+vite加载本地js/json文件不能使用require的相关资料,require 是属于 Webpack 的方法,在v3+vite的项目里面并不适用,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue两种组件类型:递归组件和动态组件的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论