首页IT科技vue如何定义map(Vue中构造数组数据之map和forEach方法实现)

vue如何定义map(Vue中构造数组数据之map和forEach方法实现)

时间2025-08-02 20:05:57分类IT科技浏览6742
导读:数组操作是前端最重要的数据操作,构造数组数据,又是数组操作中很常见的。本文将梳理下map和forEach方法在Vue项目中的使用。...

数组操作是前端最重要的数据操作               ,构造数组数据                        ,又是数组操作中很常见的               。本文将梳理下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构造数组数据内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

声明:本站所有文章               ,如无特殊说明或标注                        ,均为本站原创发布        。任何个人或组织        ,在未征得本站同意时               ,禁止复制        、盗用                       、采集               、发布本站内容到任何网站        、书籍等各类媒体平台        。如若本站内容侵犯了原著者的合法权益                       ,可联系我们进行处理                       。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
windows热点自动开启(Win10移动热点自动关闭怎么办) 1u服务器和2u服务器哪个好(CN2线路服务器好处有哪些)