×

玩转数组中元素“分分合合、颠倒是非”之Javascript三剑客

作者:admin2019.07.10来源:Web前端之家浏览:278评论:0
微信公众号

微信公众号

500.jpg

其实JS操作数组元素的应用的方法,先前文章有分享过;今天是想分享下数组中元素“分分合合、颠倒是非”的Javascript三剑客:split()、reverse(),join()。

这三种方法,大家估计最熟悉的是join()吧,因为项目中经常会遇到,接下来我一起来详细了解下它们的基础和应用。

split() 方法

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

语法

stringObject.split(separator,howmany)
参数描述
separator必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。
howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

返回值

一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

但是,如果 separator 是包含子表达式的正则表达式,那么返回的数组中包括与这些子表达式匹配的字串(但不包括与整个正则表达式匹配的文本)。

提示和注释

注释:如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

注释:String.split() 执行的操作与 Array.join 执行的操作是相反的。

实例

例子 1

在本例中,我们将按照不同的方式来分割字符串:

<script type="text/javascript">
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
</script>

输出结果:

How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

例子 2

在本例中,我们将分割结构更为复杂的字符串:

"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//将返回["", "a", "b", "c"]

例子 3

使用下面的代码,可以把句子分割成单词:

var words = sentence.split(' ')

或者使用正则表达式作为 separator:

var words = sentence.split(/\s+/)

例子 4

如果您希望把单词分割为字母,或者把字符串分割为字符,可使用下面的代码:

"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]

若只需要返回一部分字符,请使用 howmany 参数:

"hello".split("", 3)	//可返回 ["h", "e", "l"]

reverse() 方法

定义和用法

reverse() 方法用于颠倒数组中元素的顺序。

语法

arrayObject.reverse()

提示和注释

注释:该方法会改变原来的数组,而不会创建新的数组。

实例

在本例中,我们将创建一个数组,然后颠倒其元素的顺序:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.reverse())

</script>

输出结果:

George,John,Thomas
Thomas,John,George

最后来了解下常用的join()方法。

join() 方法

定义和用法

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

语法

arrayObject.join(separator)
参数描述
separator可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

返回值

返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。

实例

例子 1

在本例中,我们将创建一个数组,然后把它的所有元素放入一个字符串:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join())

</script>

输出结果:

George,John,Thomas

例子 2

在本例中,我们将使用分隔符来分隔数组中的元素:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join("."))

</script>

输出结果:

George.John.Thomas

join()方法还可以拼接HTML代码,结合push()方法,这里我拿一段现做项目的片段代码来解析下:

例子3

var contentHtml1=[]; //定义一个数组
contentHtml1.push('<tr');
contentHtml1.push('<td>'+111+'</td>');//被推荐人名称
contentHtml1.push('<td>'+data[i].recommmendedName+'</td>');//被推荐人名称
contentHtml1.push('<td>'+data[i].activateDate+'</td>');//激活时间
if(parseInt(data[i].tradeLot)>=15){
    contentHtml1.push('<td>'+data[i].tradeLot+'</td>');//交易手数
}else{
    contentHtml1.push('<td>'+data[i].tradeLot+'</td>');//交易手数
}
contentHtml1.push('<td>'+effectiveName+'</td>');//是否是有效推荐人
contentHtml1.push('</tr>');

定义一个数组contentHtml1,然后把表格的HTML装进去,然后用join()方法拼接,在页面上输出:

$("#contentHtml1").html(contentHtml1.join('')).show();

HTML代码:

<table>
    <tbody id="contentHtml1"></tbody>
</table>

说明:这是我们常用的处理列表数据的方法。

三“剑”合一

其实我们可以三种方法合并起来用

var message =  'Hello Vue.js!'

我们可以:

document.write(message.split('').reverse().join(''));

总结

关于split()、reverse(),join()三剑客的知识点,基本就这些内容了,如有疑问,可以加QQ群讨论。

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/splitreversejoin20190710.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 老部落运维

    都是拼音的错呵呵...

  • admin

    已加上,麻烦把我的文字改下:Web前端之家...

  • 老部落运维

    已添加贵站链接我站:https://www.laobuluo.com/(老部落运维)...

  • admin

    这个问题需要看不同的终端预览,可以加群具体聊,谢谢!...

  • 竹叶轻拂水

    在写PC端页面的时候,字体超过16px有的字体会显示的上下不一,凸出来一点,很难看,有没有什么好的方...

  • 素材火

    前三意料之中,中国只有百度上榜...

  • 开创者素材

    网站资源下载站,交换个友链如何?www.kaicz.com...

  • CSS66

    关于CSS组合选择符总结得全面,学习了!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero