js map满足条件跳出循环_js.es5 map循环一大坑:循环遍历竟然出现逗号!

一、map

1baa8e9d72124beec0aca7b1d61a823b.png

map大法好

作为当今程序界最好用的循环方法之一map, 在我的项目里基本替代了for循环

map循环常用的一些方法

/********* ES6 **********/

//一行代码可以省略return

array.map( item => console.log(item))

=>

array.map( item => {

return console.log(item)

})

//多行代码需要{}

array.map( item => {

//do someting 花括号一般是处理某些逻辑

})

//返回组件

array.mao( item => (

{item}
//这种比较常出现在react的jsx

))

上面总结了一些我经常用的map方法

下面我就要小小批评一下map的坑爹之处...

当用map循环遍历元素的时候, 会出现多余的逗号,!

虽然对于单页面应用开发基本遇不上. 但还是做一个记录.防止日后落坑

二、测试案例

为了生动形象说明一下问题, 我分别循环遍历四张图片和四个文字, 且看

//js

//歌曲url.聪明的你会发现这个路径有点奇怪...

let imgArr = ['./yaba.jpg', './siwujidan.jpg', './motiandalou.jpg', './nashini.jpg', ]

//歌曲名字

let titleArr = ['哑巴', '肆无忌惮', '摩天大楼', '那是你离开了北京的生活']

let imghtml = '' //输出img

let titlehtml = '' //输出title

imghtml += arrobj.map(function(item){

return ''%20+%20item%20+%20''

})

titlehtml += name.map(function(item){

return '

' + item + '
'

})

document.getElementById('output').innerHTML = imghtml

document.getElementById('output').innerHTML += titlehtml

//html

我们看一下输出的效果:

74a669ff9e22dda0e8a40c4f03b21161.png

嘿嘿嘿, 果然出来了。什么?你说图片没出现, 你再仔细看看...

对于react里面直接return这个dom也是一样会出现这种情况的.

三、KO Bug

我们可以思考一下为什么会出现这个烦人的,呢?

原来:

利用map插入到DOM时 调用了toString方法. 而我们再看看数组结构[1, 2, 3] 好家伙, 里面居然是这个逗号, 转换的时候把它带上了!

我们知道了原因之后就非常方便解决了。我们可以巧妙地利用join方法:join()可以切开一个数组,指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

嘻嘻。明白了!我只要改成这样!

imghtml += arrobj.map(function(item){

return ''%20+%20item%20+%20''

}).join('')

titlehtml += name.map(function(item){

return '

' + item + '
'

}).join('')

大功告成!但是要注意记得不要附带参数哦!不然可恶的,就会变成你传入的参数啦!

imghtml += arrobj.map(function(item){

return ''%20+%20item%20+%20''

}).join('***')

410da23817b0d2bdcf2bbc44658e041f.png

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

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

相关文章

logstash grok mysql_【Logstash系列】使用Redis并自定义Grok匹配

之前提到,用RabbitMQ作为消息队列。但是这个东西实在太过高精尖,不懂erlang不会调优的情况下,很容易挂掉——基本上我这里试验结果跑不了半小时日志传输就断了。所以改用简单易行的redis来干这个活。 之前的lib里,有inputs/redis.…

micropython按键控制流水灯_【micro:bit Micropython】The LED Display(1)控制像素点

使用DFrobot研发的micropython编程软件uPyCraft,下载固件(Firmware)和下载程序都非常方便。可以在DFrobot论坛中进行下载。uPyCraft软件运行界面官网中的micro:bit Micropython API介绍得非常详细,为开发人员提供了详细的文字说明和参照。micro:bit Micr…

php mysql 写法_php 类的写法

php 类的写法//Db.class.phpclass Db {private $_dblink;public $result;public function __construct($host, $user, $password, $dbname, $charset utf8) {try{if($this->_dblink mysql_connect($host, $user, $password)) {if(mysql_select_db($dbname)) {$this->qu…

python中exp_python中的exp是什么

Python exp() 函数描述exp() 函数返回 x 的指数,。语法import mathmath.exp(x)注意:exp() 是不能直接访问的,需导入 math 模块,通过静态对象调用该方法。参数x -- 数值表达式。返回值返回 x 的指数,。实例# -*- coding…

python干货_python 基础干货 02

list 与 tuplelist 类似 数组tuple 跟 list 一样, 只是一旦定义, 里边的内容不可以改变.这样, 上边的内容就不可以改变了."可变的" tuple, 不是说 tuple 是不可以改变的么?想内存dict 与 setdict 是 python内置字典, 其他语言中称为 map, 使用键-值(key-value)存储&…

在centOS7中装mysql_在 CentOS7 上安装 MySQL5.7

在 CentOS7 上安装 MySQL5.71 通过 SecureCRT 连接到阿里云 CentOS7 服务器;2 进入到目录 /usr/local/ 中:cd /usr/local/3 创建目录 /usr/local/tools,如果有则忽略:mkdir -p tools4 创建 /usr/local/mysql 目录,如果…

asp mysql insert_用asp把表单数据插入数据库的2种常用方法

用asp把表单数据插入数据库的2种常用方法:1.直接使用sql语句的优点:速度快,不耗资源缺点:不能传递太长的字段内容,字段比较多时不易排错.推荐有经验的编程者优先考虑.具体操作:假设表单中有以下字段:username,password,sex,age对应的,在程序中有username,password,s…

mysql min怎么用_MySQL中MIN()函数的使用教程

MySQL的MIN函数是用来找出一个记录集最小值的记录。要了解MIN函数考虑的EMPLOYEE_TBL表具有以下记录:mysql> SELECT * FROM employee_tbl;--------------------------------------------| id | name | work_date | daily_typing_pages |------------------------…

mysql安装目录问题_Windows下MySQL的安装目录问题

今天发现一个MySQL的问题,当把MySQL的文件目录安放在t字母打头的目录下时,比如d:/test目录,mysql服务就起不来了,报告找不到文件:D:/test/mysql>bin/mysqld-nt.exe --console090811 10:09:55 [ERROR] Cant find messagefile D:…

python pandas 行数_Python Pandas:增加最大行数

我正在处理一个大文本文件(500k行),格式如下:S1_A160.141,0.0093402216497486760.141,4.192618196894668E-50.11,0.014122135626540204S1_A170.188,2.3292323316081486E-60.469,0.0079287068567941380.172,3.726771730573038E-5我正在使用下面的代码返回每个系列的相…

python中rim的用法_Python并发开发简介

Python的并发程序可以使用multiprocessing库、threading库、asyncio库、concurrent.futures库以及selectors库等等协助编写:multiprocessing库可以创建多个进程,由系统协调调度各个任务;threading库则是创建多个线程,由Python解释…

大学考试分数越高学分越多吗_大学的绩点和学分有什么用?影响学生毕业吗

原标题:大学的绩点和学分有什么用?影响学生毕业吗网友一:读大学也要关心成绩,绩点和学分是两个重要指标,到底是什么,怎么计算?有什么用处?为什么很重要?面试官最看重哪些…

fedora java 开发环境_在Linux(Fedora)下搭建JAVA开发环境

参考ORACLE的官方文档:https://docs.oracle.com/javase/tutorial/getStarted/cupojava/index.htmlJAVA开发基本上有这三个平台:"Hello World!" for the NetBeans IDE"Hello World!" for Microsoft Windows"Hello World!" …

pandas输出到excel_python读写excel等数据文件方法汇总

python处理数据文件第一步是要读取数据,文件类型主要包括文本文件(csv、txt等)、excel文件、数据库文件、api等。下面整理下python有哪些方式可以读取数据文件。1. python内置方法(read、readline、readlines)read()&a…

dijkstra算法_Python实现图的经典DFS、BFS、Dijkstra、Floyd、Prim、Kruskal算法

讲在前面的话,图的算法太多,理论知识肯定一篇文章讲不完,关于理论知识大家可以参考教材Sedgewick的《算法》或reference的链接,本文主要还是想在一篇文章中记录六种算法的Python代码。同样想吐槽一下,虽然网上博客很多&#xff0c…

java 和 区别_java 和 =的区别

java >> 和 >>> 以及 >>> 的区别可能大家都知道java中>> 和 >>> 的区别,那这里我也啰嗦一下,>> 和 >>> 都是右移操作,只不过>>>是无符号右移,也就是右移之后高位…

java exception 二次抛出_java – 如何在scheduleWithFixedDelay抛出异常时重新启动计划?...

你可能应该在一个while(true)循环中包含try块,因为如果第一次运行没有抛出异常,你将退出你的方法,如果第二次调用抛出一个,你将无法捕获它.我还会在自己的线程中运行递归调用,以避免在事情变坏时出现StackOverFlow错误的风险.所以它看起来像这样:private void start…

深度学习试题_高中生物:今年高考试题3点显著变化及5个备考建议!不看准吃亏...

新课标下的新高考即将开启,最后一届旧高考模式在不同寻常的2020年七月份已圆满结束。今年全国Ⅰ卷理综生物试题有几个明显变化。1.内容、范围不变,考查理解能力和实践能力加强作为过渡期的高考,全国高考Ⅰ卷理综生物试题题型结构保持不变&…

电脑工具栏怎么调整到下面_雷电模拟器4.0怎么玩召唤与合成 一键下载轻松游玩 - 工具软件...

召唤与合成是一款既不是卡牌,也不是消除,也不算策略的高烧脑解谜手游,很多玩家想要利用雷电模拟器来在电脑上运行手游,却不知道怎么操作,下面就来教教大家如何在雷电模拟器上玩召唤与合成。1、首先要下载游戏&#xff…

ESP8266网络相框采用TFT_eSPI库TJpg_Decoder库mixly库UDP库实现图片传送

用ESP8266和TFT_ESPI模块来显示图片数据。具体来说,我们将使用ILI9431显示器作为显示设备,并通过UDP协议将图片数据从发送端传输到ESP8266。最后,我们将解析这些数据并在TFT屏幕上显示出来。在这个过程中,我们将面临一些编程挑战&…