×

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

作者:Terry2019.07.10来源:Web前端之家浏览:8117评论: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群讨论。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/splitreversejoin20190710.html

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

发表评论: