通过指定函数处理数组的每个元素,并返回处理后的数组。

1、计算数组中每个元素的平方

let arr = [1, 2, 3, 4, 5, 6];

let newArr = arr.map(item => item * item);
console.log(newArr);// [ 1, 4, 9, 16, 25, 36 ]

2、元素替换

const ball = {
'0000': '篮球',
'0001': '足球',
'0002': '乒乓球'
};
let arr = ['0002', '0000', '0001']; let newArr = arr.map((value, index, array) => ball[value]);
console.log(newArr);// [ '乒乓球', '篮球', '足球' ]

  

ES5新增数组方法(2):map的更多相关文章

  1. 4日6日--ES5新增数组方法

    forEach使用的函数调用,所以占内存比较大,不如定长for循环和迭代for循环 1.通过forEach将数组中的元素逐个表示出来(遍历方法,读取操作). 2.通过map将原数组中的元素进行算数运算 ...

  2. js数组定义和方法 (包含ES5新增数组方法)

    数组Array 1. 数组定义 一系列数据的集合成为数组.数组的元素可以为任何类型的数据(包括数组,函数等),每个元素之间用逗号隔开,数组格式:[1,2,3]. 2. 数组创建方式 (1) 字面量方法 ...

  3. ES5新增数组方法测试和字符串常见API测试

    首先是ES5新增数组方法测试: <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  4. ES5新增数组方法every()、some()、filter()、map()

    JavaScript ES5标准中新增了一些Array方法,如every().some().filter().map().它们的出现使我们能够更加便利地操作数组,但对IE9以下浏览器的兼容性比较差.下 ...

  5. ES5新增数组方法

    forEach/map   every/some  indexOf/lastIndexOf  filter reduce Array.isArray

  6. ES5新增数组方法(4):every

    检查数组元素的每个元素是否符合条件. // 数组中的元素全部满足指定条件返回true let arr = [1, 3, 5, 7, 9]; console.log(arr.every((value, ...

  7. ES5新增数组方法(3):some

    检查数组元素中是否有元素符合指定. // 数组中的元素部分满足指定条件返回true let arr = [1, 3, 5, 7, 9]; console.log(arr.some((value, in ...

  8. ES5新增数组方法(1):filter

    检测数组元素,并返回符合条件所有元素的数组. 1.过滤数组中不符合条件的元素 let arr = [1, 2, 3, 4, 5, 6]; // 方式一 let newArr = arr.filter( ...

  9. ES5新增数组的方法

    ES5新增数组的方法 ES5新增数组常见方法(indexOf/forEach/map/filter/some/every) .indexOf( data , start)  检测数组中是否存在指定数据 ...

随机推荐

  1. 【转】深度分析Java的ClassLoader机制(源码级别)

    原链接 Java中的所有类,必须被装载到jvm中才能运行,这个装载工作是由jvm中的类装载器完成的,类装载器所做的工作实质是把类文件从硬盘读取到内存中, JVM在加载类的时候,都是通过ClassLoa ...

  2. Mysql索引学习笔记

    1.btree索引与hash索引 下列范围查询适用于 btree索引和hash索引: SELECT * FROM t1 WHERE key_col = 1 OR key_col IN (15,18,2 ...

  3. Ubuntu连接上海大学校园网(ShuWlan-1x & Shu(For All))

    1.连接Shu(For All):直接连接,打开网页后可能会自动弹出登录页面,也可能需要点击浏览器菜单栏下方的跳转按钮. 2.连接ShuWlan-1x配置注意点: 认证方式:Protected EAP ...

  4. 外部的 JavaScript

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. SpringBoot非官方教程 | 第十九篇: 验证表单信息

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot19/ 本文出自方志朋的博客 这篇文篇主要简述如何 ...

  6. 嵌入式:指针的指针、链表、UCOS 的 OSMemCreate 。

    初看,UCOS 的 OSMemCreate 代码,感觉有点怪怪的,比如,把 指针指向的地址 强制转换成 指针的指针的指向地址 ?那转换后 指针的指针 又是什么? void OSMemCreate (O ...

  7. 【例题收藏】◇例题·6◇ 电压机制(voltage)

    ◆例题·6◆ 电压机制 周六日常模拟赛……已经不知道该说什么了(感觉做不出来的都是好题) ▷ 题目 (终于不用自己翻译英文题了╮(╯-╰)╭) [问题描述] 科学家在“无限神机”(Infinity M ...

  8. pt-online-schema-change 脚本化

    mysql在线更改表可用工具 pt-online-schema-change 更改,或者用gh-ost更改.pt-online-schema-change 在原表创建索引,跟踪新插入的数据.gh-os ...

  9. css3新样式

    超出两行变省略号 overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-w ...

  10. 使用CSS3制作首页登录界面实例

    响应式设计 在这个页面中,使用下面3点来完成响应式设计 1.最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容.: 2.margin : 30px auto; 使其保持时刻居中 ...