js中map()函数的使用案例详解

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

关键词：map

项目中我们常常会遇到要对后端返回的数据进行修改，从而达到符合我们前端开发人员的需要，其中map是常用到的对数组元素进行修改的重要函数。

提示：以下是本篇文章正文内容，下面案例可供参考

一、概念

map() 方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。值得注意的是：1、map()函数不会对空数组进行检测；2、map()函数不会改变原始数组，它形成的是 一个新的数组

二、相关语法

array.map(function(currentValue, index, arr), thisIndex)—
参数说明：

• function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：

1. currentValue：必须。表述当前元素的的值(item)
2. index：可选。当前元素的索引也就是第几个数组元素。
3. arr：可选。当前元素属于的数组对象

• thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值

三、示例

例1：对原数组元素进行平方后再赋值给新的数组

let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]

例2：将int类型的数据换成字符串类型

this.tableData = list.map(function (item) {
                if (item.leaseStatus === 0) {
                  item.leaseStatus = '已租';
                } else if (item.leaseStatus === 1) {
                  item.leaseStatus = '未租';
                } else if (item.leaseStatus === 2) {
                  item.leaseStatus = '已租';
                }
                if (res.data.data === null) {
                  item = '暂无记录';
                }
                return item;
              });

选择Object还是Map

（1）内存占用

Object和Map的工程级实现在不同浏览器间存在明显差异，但存储单个键/值对所占用的内存数量都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。不同浏览器的情况不同，但给定固定大小的内存，Map大约可以比Object多存储50%的键/值对

（2）插入性能

向Object和Map中插入新键/值对的消耗大致相当，不过插入Map在所有浏览器中一般会稍微快一点儿。对这两个类型来说，插入速度并不会随着键/值对数量而线性增加。如果代码涉及大量插入操作，那么显然Map的性能更佳

（3）查找速度

与插入不同，从大型Object和Map中查找键/值对的差异极小，但如果只包含少量键/值对，则Object有时候速度更快。在把Object当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎可以进行优化，在内存中使用更高效的布局。这对Map来说是不可能的。对这两个类型而言，查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作，那么某些情况下可能选择Object更好一些

（4）删除性能

使用delete删除Object属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪删除对象属性的操作，包括把属性设置为undefined或null。但很多时候，这都是一种讨厌的或不适宜的折中。而对大多数浏览器引擎来说，Map的delete()操作都比插入和查找更快。如果代码涉及大量删除操作，那么毫无疑问应该选择Map

最后

到此这篇关于js中map()函数的使用的文章就介绍到这了,更多相关js中map()函数的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论