JavaScript-map与forEach

# JavaScript-map与forEach

# map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

不会对空数组进行检测
不会改变原始数组

# 场景

# 列表转下拉框配置

后端返回的接口与组件要求的字段不一样

后端接口

[
    {
        "goods_name": "飞歌",
        "sales_actual": 0,
        "goods_count": 1,
        "goods_sales": 0,
        "image_url": "xxxxxxx.jpg"
    },
    {
        "goods_name": "测试",
        "sales_actual": 3,
        "goods_count": 1,
        "goods_sales": 3,
        "image_url": "xxxxxx.jpg"
    },
    {
        "goods_name": "测试123",
        "sales_actual": 0,
        "goods_count": 10,
        "goods_sales": 0,
        "image_url": "xxxxxx.jpg"
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

下拉框参数结构

[{
	"value": "飞歌",
	"text": "飞歌"
}, {
	"value": "测试",
	"text": "测试"
}, {
	"value": "测试123",
	"text": "测试123"
}]

1
2
3
4
5
6
7
8
9
10

解决方法

this.$request('get', 'checkout/boxGoodsPayGoods').then(res => {
    console.log(res.data.data)
    const list = res.data.data
    this.range = list.map(item => {
        return {value: item.goods_name, text: item.goods_name}
    })

    console.log(this.range)

})

1
2
3
4
5
6
7
8
9
10

# forEach

用于调用数组的每个元素，并将元素传递给回调函数

对于空数组是不会执行回调函数的

# forEach与map的区别

var arr = ['10', '9', '8'];

// forEach
var result = arr.forEach(((value, index, array) => {
    return value*2
}));
// forEach:用来遍历数组中的每一项；这个方法执行是没有返回值的，对原来数组也没有影响；
console.log('返回值',result); // 返回值 undefined
console.log('原数组',arr); // 原数组 [ '10', '9', '8' ]


// map
var mapResult = arr.map((value,index,array)=>{
    return value*2
}).sort((x,y)=>{
    return x-y
});
console.log(mapResult); // [ 20, 18, 16 ] 返回一个新数组  [ 16, 18, 20 ]  排序
console.log(arr); // [ '10', '9', '8' ] 原数组没有改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

map速度比forEach快
map会返回一个新数组，不对原数组产生影响；foreach不会产生新数组，forEach返回undefined
map因为返回数组所以可以链式操作，forEach不能
map里可以用return（return的是什么，相当于把数组中的这一项变为什么（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）
forEach里用return不起作用，forEach不能用break，会直接报错

map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样

forEach()的返回值并不是array。如果你想用函数式编程写个链式表达式，.map()将会是你不二的选择

**forEach适合于你并不打算改变数据的时候，而

上次更新: 2024/08/14, 04:14:33

← JavaScript-对象应用 JavaScript-sort()→