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

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

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

split() 方法

定义和用法

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

语法

stringObject.split(separator,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)

返回值

返回一个字符串。该字符串是通过把 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群讨论。