网站源码-图片-资料下载-学习资料-牛资料网!只做精品资料网
  • 首 页
  • 玩转数组中元素“分分合合、颠倒是非”之Javascript三剑客
    时间:2019-09-09 11:05 来源:www.xyhndec.com 编辑:免费资料 浏览:

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

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

    split() 方法

    定义和用法

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

    语法

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

    返回值

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

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

    提示和注释

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

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

    实例

    例子 1

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

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

    输出结果:

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

    例子 2

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

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

    例子 3

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

    
    
    1. var words = sentence.split(' ')

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

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

    例子 4

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

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

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

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

    reverse() 方法

    定义和用法

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

    语法

    
    
    1. arrayObject.reverse()

    提示和注释

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

    实例

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

    
    
    1. <script type="text/javascript">
    2.  
    3. var arr = new Array(3)
    4. arr[0] = "George"
    5. arr[1] = "John"
    6. arr[2] = "Thomas"
    7.  
    8. document.write(arr + "<br />")
    9. document.write(arr.reverse())
    10.  
    11. </script>

    输出结果:

    
    
    1. George,John,Thomas
    2. Thomas,John,George

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

    join() 方法

    定义和用法

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

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

    语法

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

    返回值

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

    实例

    例子 1

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

    
    
    1. <script type="text/javascript">
    2.  
    3. var arr = new Array(3)
    4. arr[0] = "George"
    5. arr[1] = "John"
    6. arr[2] = "Thomas"
    7.  
    8. document.write(arr.join())
    9.  
    10. </script>

    输出结果:

    
    
    1. George,John,Thomas

    例子 2

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

    
    
    1. <script type="text/javascript">
    2.  
    3. var arr = new Array(3)
    4. arr[0] = "George"
    5. arr[1] = "John"
    6. arr[2] = "Thomas"
    7.  
    8. document.write(arr.join("."))
    9.  
    10. </script>

    输出结果:

    
    
    1. George.John.Thomas

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

    例子3

     

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

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

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

    HTML代码:

    
    
    1. <table>
    2.     <tbody id="contentHtml1"></tbody>
    3. </table>

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

    三“剑”合一

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

    
    
    1. var message =  'Hello Vue.js!'

    我们可以:

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

    总结

    关于split()、reverse(),join()三剑客的知识点,基本就这些内容了,如有疑问

    郑重声明:
    牛资料网所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
    我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系牛资料网索要。
    如有侵犯您的版权,请及时联系QQ:964613048,我们尽快处理。

    JavaScript面向对象-基于原型链实现继承JavaScript面向对象-基于原型链实现继
    JavaScript事件-事件流JavaScript事件-事件流
    正则表达式-正则表达式的元字符正则表达式-正则表达式的元字符
    推荐栏目
    • 客服:我们竭诚为您服务!
    • 客服:我们竭诚为您服务!