js之map映射forEach迭代

举报
彭世瑜 发表于 2021/08/14 00:47:43 2021/08/14
【摘要】 map 映射 函数定义 map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[]; 1 一个简单的map映射示例 'use strict' var list = [1, 2, 3, 4, 5]; var newList = list....

map 映射

函数定义

map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];

  
 
  • 1

一个简单的map映射示例

'use strict'

var list = [1, 2, 3, 4, 5];

var newList = list.map(value => value * 2);

console.log(newList);
// [ 2, 4, 6, 8, 10 ]

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

使用map映射对象数据,给每个元素添加新的属性

'use strict'

var list = [ { name: "Tom", age: 10 }, { name: "Jack", age: 20 }
];


var newList = list.map((item, index)=>{ return { index: index, name: item.name, age: item.age + 1, active: false }
});


console.log(newList);
/**
[ { index: 0, name: 'Tom', age: 11, active: false }, { index: 1, name: 'Jack', age: 21, active: false } 
]
*/ 


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

forEach 迭代

函数定义

forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;

  
 
  • 1

使用 forEach 给列表添加属性

'use strict'

var list = [ { name: "Tom", age: 10 }, { name: "Jack", age: 20 }
];


list.forEach((item, index)=>{ item.age = item.age + 1; item.active = false; item.index = index;
});


console.log(list);
/**
[ { name: 'Tom', age: 11, active: false, index: 0 }, { name: 'Jack', age: 21, active: false, index: 1 } 
]
*/ 


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

区别

map 和 forEach 都是迭代列表元素,参数都相同
map有返回值,forEach无返回值

文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。

原文链接:pengshiyu.blog.csdn.net/article/details/102944588

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。