python的array如何使用map_你应该了解的JavaScript Array.map()五种用途小结

前言

从经典的 for 循环到 forEach() 方法,用于迭代数据集合的各种技术和方法比比皆是。但是现在比较流行的方法是 .map() 方法。

.map() 通过指定函数调用一个数组中每一项元素,来创建一个新数组。 .map() 是一种 non-mutating(非变异) 方法,它创建一个新数组,而不是只对调用数组进行更改的 mutating(变异) 方法。这可能很难记住。

语法:

array.map(function(currentValue,index,arr), thisValue)

currentValue:必须。当前元素的值

index:可选。当期元素的索引值

arr:可选。当期元素属于的数组对象

thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。可改变this指向,

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

map() 方法按照原始数组元素顺序依次处理元素。

注意:map() 不会对空数组进行检测。

注意:map() 不会改变原始数组。

在这篇文章中,我们将探讨一下 JavaScript 中 .map() 的 4 个值得注意的用法。让我们开始!

在数组中的每一项元素上调用一个函数

将字符串转换为数组

在 JavaScript 库中用于渲染列表

重新格式化数组对象

小技巧使用案例

1. 在数组中的每一项元素上调用一个函数

如前所述,.map() 接受回调函数作为其参数之一,该函数的一个重要参数是由该函数处理的项的当前值。这是一个必需的参数。有了这个参数,我们可以修改数组中的每个单独项,并在其上创建一个新元素。这里有一个例子:

const sweetArray = [2, 3, 4, 5, 35]

const sweeterArray = sweetArray.map(sweetItem => {

return sweetItem * 2

})

console.log(sweetArray) // [2, 3, 4, 5, 35]

console.log(sweeterArray) // [4, 6, 8, 10, 70]

我们可以看到,原数组 sweetArray 并没有被修改,所以 .map() 是一种 non-mutating(非变异) 方法。这里值得一提的是 forEach() 方法,它是遍历数组,对原来的数据操作,会改变原数组。

这甚至可以进一步简化,使其更清洁:

// 创建一个要使用的函数

const makeSweeter = sweetItem => sweetItem * 2;

// 我们有一个数组

const sweetArray = [2, 3, 4, 5, 35];

// 调用我们制作的函数。更具可读性

const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray); // [4, 6, 8, 10, 70]

拥有像 sweetArray.map(makeSweeter) 这样的代码可以让你在跳转到这段代码时更具可读性。

2.将字符串转换为数组

已知的 .map() 属于 Array 原型。 我们如何使用它将字符串转换为数组。 不用担心,我们不需要再开发一个方法来处理字符串,而是使用特殊的 .call() 方法。

JavaScript 中的所有内容都是对象,方法只是附加到这些对象的函数。 .call() 允许我们利用另一个对象的上下文。 因此,我们将数组中的 .map() 上下文复制到字符串。

.call() 可以传递参数,要使用的上下文和“参数原始函数的参数”。 听起来有点拗口? 这是一个例子:

const name = "Chuloo"

const map = Array.prototype.map

const newName = map.call(name, eachLetter => {

return `${eachLetter}a`

})

console.log(newName) // ["Ca", "ha", "ua", "la", "oa", "oa"]

这里,我们只是在String上使用 .map() 的上下文,并传递了 .map() 所期望的函数参数。 你可以看看控制台里打印出来的内容。

这类似于 String 的 .split() 方法,不过 .split() 方法只能在返回数组之前修改每个单独的字符串字符。

3.在 JavaScript 库中用于渲染列表

像 React 这样的 JavaScript 库利用 .map() 来渲染列表中的项目。这需要 JSX 语法,但是 .map() 方法包含在类似于 mustache 的 JSX 语法中。这是 React 组件的一个很好的例子。

import React from "react";

import ReactDOM from "react-dom";

const names = ["john", "sean", "mike", "jean", "chris"];

const NamesList = () => (

  • {names.map(name =>
  • {name} )}

);

const rootElement = document.getElementById("root");

ReactDOM.render(, rootElement);

如果你不熟悉 React ,那么我告诉这是 React 中的一个简单的无状态组件,它使用列表渲染div。 使用 .map() 渲染单个列表项以迭代最初创建的 names 数组。 此组件使用 ReactDOM 渲染 ID为 root 的 DOM 元素 。

4.重新格式化数组对象

如何处理数组中的对象? .map() 可用于迭代数组中的对象,并以与传统数组类似的方式,修改每个单独对象的内容 并返回一个新数组。 这个修改是基于回调函数中返回的内容来完成的。这里有一个例子:

const myUsers = [

{ name: 'chuloo', likes: 'grilled chicken' },

{ name: 'chris', likes: 'cold beer' },

{ name: 'sam', likes: 'fish biscuits' }

]

const usersByFood = myUsers.map(item => {

const container = {};

container[item.name] = item.likes;

container.age = item.name.length * 10;

return container;

})

console.log(usersByFood);

// [{chuloo: "grilled chicken", age: 60}, {chris: "cold beer", age: 50}, {sam: "fish biscuits", age: 30}]

我们所做的就是使用括号和点符号简单地修改数组中的每个对象。这个用例可以用于在前端应用程序上保存或解析之前处理或压缩接收到的数据。

5.小技巧使用案例

通常情况下,.map() 方法中的 callback 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。 生成新数组元素的 callback 函数,有 三个参数:

currentValue – callback 的第一个参数,数组中正在处理的当前元素,最常用的参数。

index – callback 的第二个参数,数组中正在处理的当前元素的索引。

array – callback 的第三个参数,map 方法被调用的数组。

来看一下例子:

// 下面的语句返回什么呢:

["1", "2", "3"].map(parseInt);

// 你可能觉的会是[1, 2, 3]

// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.

// 但实际上,parseInt可以有两个参数.第二个参数是进制数.

// 可以通过语句"alert(parseInt.length)===2"来验证.

// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素,

// 元素索引, 原数组本身.

// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,

// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

function returnInt(element) {

return parseInt(element, 10);

}

['1', '2', '3'].map(returnInt); // [1, 2, 3]

// 意料之中的结果

// 也可以使用简单的箭头函数,结果同上

['1', '2', '3'].map( str => parseInt(str) );

// 一个更简单的方式:

['1', '2', '3'].map(Number); // [1, 2, 3]

// 与`parseInt` 不同,下面的结果会返回浮点数或指数:

['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

还有一个非常实用的小技巧,像 .map() ,.reduce(), .filter() 这些方法支持链式调用。例如:

var myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

var result = myArr

.map(function(element) {

// 数值大于5的数值视为5

if (element > 5)

return 5;

return element;

})

.reduce(function(prev, element) {

// 与之前的数值加总,回传后代入下一轮的处理

return prev + element;

}, 0);

// 40

console.log(result);

这代码看着有点啰嗦是吧?感谢 pythonicx 提供的优化代码:

var myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

let result = myArr.map(m => m>5 ? 5 : m).reduce((x,y) => x+y);

console.log(result); // 40

小结

在这篇文章中,我们研究了 JavaScript 中 .map() 方法的主要用途。 需要注意的是,与其他方法结合使用时,.map() 的函数可以得到强大的扩展和利用。 尝试找出更多用例。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/560979.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(dp)数字三角形

题目方案1:递归方案二:递推 题目 数字三角形问题。有一个由非负整数组成的三角形,第一行只有一个数,除了最下行 之外每个数的左下方和右下方各有一个数 从第一行的数开始,每次可以往左下或右下走一格,直…

long在C语言中是非法字符吗,C程序设计实践——实验指导

一、课程的总体目标和具体要求总体目标:利用C语言和程序设计方法编制程序,借助计算机解决问题的基本能力。(支撑毕业能力要求1)独立解决文本处理、数学上的一些问题,编写较规范化的代码。(支撑毕业能力要求3)综合运用数学和程序设计方法&…

动规最长上升子序列

#include<iostream> #include<algorithm> using namespace std; #define maxx 101 int a[maxx]; int n; int maxlen[maxx];int main() {int i,j;cin>>n;for(i1;i<n;i){cin>>a[i];//数组a存数maxlen[i]1;//边界条件,每个数最长子序列至少为一}for(i2…

C语言实现一个随机测试加减乘除,编写程序:C语言实现一个随堂测试,能进行加减乘除运算...

//需要导入一个时间头文件&#xff1b;#include//bool类型;long show(){int num1,num2,x;long s;char c;srand((unsigned) time(NULL));//用时间做种子&#xff0c;每次产生的随机序列不同&#xff1b;num1rand()%101;num2rand()%101;xrand()%4;switch(x){case 0:c;snum1num2;b…

前端实现图片悬浮_悬浮图片之上效果实现

其实很简单&#xff0c;就是一个margin-top的问题&#xff0c;但是需要relative的定位方式才能悬在上面。html部分草帽的创新聚集国内外优秀人才&#xff0c; 聚焦新技术及产品研究&#xff0c; 以开放互联的理念&#xff0c; 驱动企业创新发展。实现怎样的创新服务全国品牌用户…

动规最长公共子序列

首先&#xff0c;有俩参数分别是s1,s2&#xff0c;那就要用二维数组. 确定状态maxlen(i,j)&#xff0c;表示s1第i个与s2第j个元素组成的最长公共子序列个数 再找临界状态&#xff1a;maxlen(i,0)0,maxlen(0,j)0 再找状态转移方程&#xff1a; 如果s1第i-1个元素和s2第i-1个…

用c语言程序编写电池管理系统,基于Freescale单片机的电池管理系统设计.doc

摘? 要&#xff1a;为了实现电动汽车电池的实时监控&#xff0c;在研究了锂离子电池特点的基础上&#xff0c;提出了一种用于混合动力汽车的分布式电池管理系统。其中&#xff0c;硬件系统包括电源模块、基于Freescale 系列单片机的主控制模块和子模块、均衡模块以及CAN 总线通…

华为手机解锁码计算工具_华为手机强制解锁工具

《华为解锁助手》是当前唯一一款华为手机强制解锁工具。华为解锁助手也是当前全球首款华为手机解锁工具&#xff0c;由绿豆团队根据华为官方技术规范精心打造&#xff0c;旨在极大简化华为手机的解锁流程并提升解锁效率。清晰的流程设计&#xff0c;手机基本信息只需输入一次就…

深入剖析:Super Jumping! Jumping! Jumping! (动规)

分析&#xff1a; 题意就是&#xff0c;在一个数组里找递增的子序列的最大和&#xff0c;而且子序列元素可以不相邻。 我先上一个错误代码&#xff0c;这是我刚看完题后一分钟就写的&#xff0c;事实上没想象中简单&#xff0c;等会我分析一下错误原因 #include<iostream…

文本导入数据到oracle_oracle导出数据到文本、从文本导入数据

.sqlset line 1000 --设置行的长度set pagesize 0 --输出不换页set feedback off --默认的当一条sql发出的时候&#xff0c;oracle会给一个反馈&#xff0c;比如说创建表的时候&#xff0c;如果成功命令行会返回类似&#xff1a;Table created的反馈,off后…

c语言5版第10章答案,第10章 指 针 参考答案 c语言(1)

10.1 输入3个整数&#xff0c;按由小到大的顺序输出。解&#xff1a;程序如下&#xff1a;(xt10-1.c)#includemain(){ intn1,n2,n3;int *p1,*p2,*p3;printf("Input three integers n1,n2,n3: ");scanf("%d,%d,%d",&n1,&n2,&n3);p1&n1;p2&a…

震惊!printf 与scanf 不可告人的秘密

目录 1. printf与scanf2.sqrt函数3.π4.三位数反转5.三整数排序 1. printf与scanf #include<stdio.h> int main() {printf("%lf\n",8.0/5.0);printf("%lf\n",8/5.0);printf("%lf\n",8/5);printf("%d\n",8.0/5.0);printf(&quo…

华为防火墙查看日志命令_华为防火墙异常日志,请高手进来查看,跪谢

华为Sec-Path500防火墙&#xff0c;用控制线登进去之后&#xff0c;一直在显示如下日志&#xff0c;根本无法进行命令的输入操作&#xff1a;%Jul 6 11:12:39:486 2016 FW1.BJ SEC/4/ATCKDF:atckType(1016)(0)IP-spoofing;rcvIfName(1023)GigabitEthernet1/0;srcIPAddr(1017)1…

2014年二级c语言,2014年计算机二级考试C语言选择题

2014年计算机二级考试C语言选择题{ char x0xFFFF;printf("%d\n"&#xff0c;x--);}A.-32767B.FFFEC.1D.3276822.下面的函数调用语句中func函数的实参个数是( )。func((f2v1&#xff0c;v2)&#xff0c;(v3&#xff0c;v4&#xff0c;v5)&#xff0c;(v6&#xff0c;m…

算法竞赛入门经典 第二章总结

1.例题aabb 输出 所有形如aabb的4位完全平方数 分析&#xff1a; 方案1.判断a*1100b*11是不是完全平方数&#xff08;枚举a和b&#xff09; 方案2.判断4位完全平方数是否满足aabb形式(枚举1000到9999中的完全平方数&#xff09; 代码&#xff1a; #include<stdio.h&g…

mfc tabcontrol 修改白色背景_初级会计报名准备工作如何使用美图秀秀PC版修改照片尺寸、格式、大小...

点击上方蓝字关注我们证件照是我们生活中常用的东西&#xff0c;大学考证需要证件照&#xff0c;制作简历也需要用到证件照&#xff0c;工作有时也需要用到&#xff0c;然而最让我们头疼的是每次报名证件照的要求都不一样&#xff0c;其中底色和尺寸是经常需要修改的&#xff0…

东莞理工c语言作业,东莞理工学院 c语言复习题

第一部分1. C语言的主要特点有哪些?(多选)A.简洁、紧凑&#xff0c;使用方便、灵活&#xff0c;易于学习和应用。B.&#xff23;语言是面向结构化程序设计的语言。C.&#xff23;语言允许直接对位、字节和地址进行操作。D.数据类型丰富。E.&#xff23;语言生成的目标代码质量…

算法竞赛入门经典 第五章总结1

例题1&#xff1a; 输入多行数据&#xff0c;每行包含若干个以空格隔开的整数&#xff0c;输出每行中所有整数之和 #include<iostream> #include<string> #include<sstream> using namespace std; int main(){string line;while(getline(cin,line)){int su…

python 3维正态分布图_三维正态分布图

听起来你要找的是一个Multivariate Normal Distribution。这在scipy中实现为scipy.stats.multivariate_normal。重要的是要记住&#xff0c;你要传递一个协方差矩阵给函数。所以为了简单起见&#xff0c;将非对角元素保留为零&#xff1a;[X variance , 0 ][ 0 ,Y Variance]下面…

16位浮点 c语言,C语言中的16位浮点乘法

我正在开发一个小项目&#xff0c;我需要浮点乘法和16位浮点数(半精度)。不幸的是&#xff0c;我遇到了算法的一些问题&#xff1a;示例输出1 * 5 52 * 5 103 * 5 14.54 * 5 205 * 5 24.5100 * 4 100100 * 5 482源代码const int bits 16;const int exponent_length 5;…