js中join()方法举例详解

更新时间：2023年10月19日 08:31:03 作者：铃儿响叮当不响

这篇文章主要给大家介绍了关于js中join()方法的相关资料,join方法用于把数组中的所有元素放入一个字符串,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下

1、join('')将数组元素无缝拼接

<script>
        let s = Array('a','p','p','l','e')
        document.write(s.join(''))
 </script>

输出结果:apple

2、join(' ') 将数组元素以空格分割

    <script>
        let s = Array('Apple','is','on','my','table')
        document.write(s.join(' '))
    </script>

输出结果:Apple is on my table

3、join()将数组每个元素都转为字符串，用法等同于toString()

    <script>
        let s = Array(1,2,3)
        console.log(s)
        console.log(s.join())
    </script>

4、join()将数组转换为页面元素的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <ul id="list"></ul>
     <script>
        let data = ['第一个','第二个','第三个','第四个']
        let list = document.querySelector('#list')
        let content = '<li>' + data.join('</li><li>') + '</li>'
        list.innerHTML = content
     </script>
</body>
</html>

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body style="padding: 20px;">
<table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
    </table>
    
    <script>
      let tb = document.querySelector('#tb')
      data = [
        {id:1, bookname:'红楼梦', author:'曹雪芹', publisher:'河南出版社'},
        {id:2, bookname:'活着', author:'余华', publisher:'海南出版社'},
        {id:3, bookname:'我与地坛', author:'史铁生', publisher:'湖南出版社'}
      ]
      let content = []
      for(i = 0; i < data.length; i++){
       content.push('<tr><td>'+data[i].id+'</td><td>'+data[i].bookname+'</td><td>'+data[i].author+'</td><td>'+data[i].publisher+'</td><td><a href="javascript:;">删除</a></td></tr>')
       tb.innerHTML = content.join('')
      }
    </script>  
</body>
</html>
</html>

总结

到此这篇关于js中join()方法的文章就介绍到这了,更多相关js join()方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js
join()

js中DOM事件绑定分析
在这篇文章中小编给大家整理了关于JS中DOM事件绑定的相关知识点，有兴趣的朋友赶快学习参考下。
2018-03-03
js对象继承之原型链继承实例
这篇文章主要介绍了js对象继承之原型链继承,以实例形式分析了原型链继承的实现方法与注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
JS实现很酷的水波文字特效实例
这篇文章主要介绍了JS实现很酷的水波文字特效,实例分析了javascript操作图层特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
CSS javascript 结合实现悬浮固定菜单效果
本篇文章给大家介绍基于CSS javascript 结合实现悬浮固定菜单效果，附有源码下载，需要的朋友可以参考下
2015-08-08
javascript之分片上传，断点续传的实际项目实现详解
在本篇文章里小编给大家整理了关于javascript之分片上传，断点续传的实际项目实现的详细内容，有需要的朋友们学习下。
2019-09-09
小程序实现分页查询列表的模板
这篇文章主要为大家详细介绍了小程序实现分页查询列表的模板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
js限制input标签中只能输入中文
这篇文章主要介绍了js限制input标签中只能输入中文的的相关资料,需要的朋友可以参考下
2015-06-06
ES6新特性之变量和字符串用法示例
这篇文章主要介绍了ES6新特性之变量和字符串用法,结合具体实例形式分析了ES6中变量与字符串的特性、使用方法与相关注意事项,需要的朋友可以参考下
2017-04-04
Javascript实现图片懒加载插件的方法
最近由于公司项目需要，要利用Javascript实现图片懒加载效果，尝试起来发现并不难，于是将自己的实现过程分享出来给大家学习和参考，希望对有需要的朋友们带来一定的帮助，感兴趣的朋友们下面来一起看看吧。
2016-10-10
常用js字符串判断方法整理
js常用方法及字符串的常用判断方法都是在工作中经常用到的，在本文整理了一些，感兴趣的朋友可以参考下
2013-10-10