js之map映射forEach迭代

简介: js之map映射forEach迭代

map 映射

函数定义


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

一个简单的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 ]

使用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 
    } 
]
*/

forEach 迭代

函数定义


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

使用 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 
    } 
]
*/

区别

map 和 forEach 都是迭代列表元素,参数都相同

map有返回值,forEach无返回值

相关文章
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储
`map()`方法在什么场景下会比 `forEach()`方法更高效?
综上所述,当需要对数组元素进行复杂的转换并生成新数组、进行链式调用和函数式编程、处理元素之间存在明确映射关系的情况以及与其他数组方法结合使用时,`map()`方法比`forEach()`方法更高效,能够使代码更加简洁、清晰和易于维护。
204 32
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
|
存储 JavaScript 前端开发
如何选择使用`map()`方法和`forEach()`方法?
选择使用`map()`方法还是`forEach()`方法主要取决于操作的目的、是否需要返回值、代码的可读性和维护性等因素。在实际开发中,需要根据具体的业务需求和场景来灵活选择合适的方法,以实现更高效、更易读和更易维护的代码。
183 3
|
存储 JavaScript 前端开发
`forEach()`方法和`map()`方法哪个执行效率更高?
`forEach()`方法和`map()`方法哪个执行效率更高?
|
存储 JavaScript 前端开发
js中map属性
js中map属性
277 0
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
421 0
数组方法中的`forEach()`方法和`map()`方法有什么区别?
数组方法中的`forEach()`方法和`map()`方法有什么区别?
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。