JS中的join()方法

最新推荐文章于 2024-04-11 15:21:32 发布
最新推荐文章于 2024-04-11 15:21:32 发布
阅读量2.3k 收藏 10
点赞数 2
分类专栏： JavaScript 文章标签： javascript 前端
原文链接：https://blog.csdn.net/qq_36507046/article/details/126056283
版权

join()方法就是将array数据中每个元素都转为字符串，用自定义的连接符分割

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>

 

 

HuangYH~
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发：JS中join()方法的使用总结
软贱开发攻城狮
11-09 5652
前言 在前端开发过程中，对数组的数据进行处理也是比较常见的操作之一，而且对数组进行操作的频率远远大于对 对象进行操作，因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能，尤其是对于刚入行的前端开发者来说尤为重要，所以一定要掌握好相关技能。本篇博文来分享一下关于对数组里面的元素进行指定分隔符进行分隔的操作，那么就用到了JS中join()方法使用。 join() 方法 1、定义 join() 方法用于把数组中的所有元素转换一个字符串。 2、语法 array.join(separ
javascript中join方法实例讲解
10-17
在本篇内容里小编给大家分享了关于javascript中join方法实例内容，需要的朋友们学习参考下。
js的join函数
最新发布
xiaohua0708day的博客
04-11 319
join()是 JavaScript 数组（Array）对象的一个方法，它用于将数组（或数组的一部分）的所有元素连接到一个字符串中。
JavaScript中join()方法的使用简介
12-09
JavaScript数组join()方法加入数组的所有元素为一个字符串。 语法 array.join(separator); 下面是参数的详细信息：     separator : 指定字符串分开数组的每个元素。如果省略，则数组元素用逗号分隔。 返回值: 返回接合所有数组元素之后的字符串。 例子： <html> <head> <title>JavaScript Array join Method</title> </head> <body> [removed] var arr = new Array("First","Second","Th
JS中join()、splice()、slice()和split()函数用法示例
sherly_chen的博客
10-11 1314
join()方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。 代码示例： arr.join() // 返回的是一个字符串,如果数组为空 则返回一个空字符串 var a = ['a', 'b', 'c']; var val1 = a.join(); // val1的值变为"a,b,c" var val2 = a.join(', '); // val2的值变为"a, b, c" var val3 = a..
js中join方法
seimeii的博客
07-26 1万+
js中join方法
js中的join()方法
热门推荐
qq_36507046的博客
07-29 5万+
join()方法就是将array数据中每个元素都转为字符串，用自定义的连接符分割。
JavaScript中join()方法详解
qq_42582773的博客
12-07 6779
join()方法
js 中的 join() 方法的基本使用
M_emory_的博客
03-20 1338
js 中的 join() 方法的基本使用
JavaScript中Array数组的join用法
山鬼谣弋痕夕的博客
07-21 1万+
join()，这个方法的功能就是：将array数据中每个元素都转为字符串，用自定义的连接符分割，如果 join()里面不加任何参数，用法与toString()一样 join()方法的使用，我们看一个例子来了解join的方法： var num = Array("hello","word"); console.log(num.join()); console.log(num.join(""));...
javascript(js) join函数使用方法介绍
10-30
javascript(js) join函数使用方法介绍
js中的push和join方法使用介绍
12-09
代码如下: [removed] function delWork(id){ var boxes = document.getElementsByName(“commonPage.idBox”); var selected = new Array();... } } // join()方法将数组中的所有元素转换成字符串，然后连接起来，这刚
前端Js常见的List函数集合
小心——博客
05-30 6083
前端Js常见的数组函数集合
js jQuery方法join()
likingsn的技术专栏
12-02 2582
js中join方法的定义是：join(separator?: string): string。 可以将一数组按照JOIN的参数连接起来，例子： var arr = [ "a", "b", "c", "d", "e" ]; console.log(arr.join("-"));//输出a-b-c-d-e console.log(arr.join(""));//输出abcde
join() 方法
小夏的博客
01-12 8545
join() 将数组单元中存储的数据,拼接为一个字符串* 用法： 数组.join('间隔符号') 在拼接的字符串,数组单元各数据之间,默认以逗号【,】为间隔 写法：数组.join() 在 join()括号中可以设定其他间隔符号 写法：例如 以点（.）为间隔=> 数组.join(’.’) 如果不需要间隔符号,使用空字符串,设定为间隔 写法：数组.join(’’) ...
join()
weixin_39093202的博客
12-13 1021
join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。 var a = [1, 2, 3, 4]; a.join(' ') // '1 2 3 4' a.join(' | ') // "1 | 2 | 3 | 4" a.join() // "1,2,3,4"   [undefined, null].join('#') // '#' ...
js 常用函数 push()、pop()、shift()、unshift()、slice()、splice() 等
u014212540的博客
05-26 2万+
js 常用函数 push()、pop()、shift()、unshift()、slice()、splice() 等
d3.js join
01-13
d3.js中的join是一种数据绑定和更新DOM元素的方法。它允许您将数据与DOM元素进行关联，并根据数据的不同状态（enter、update、exit）来创建、更新和删除DOM元素。 以下是一个使用d3.js join的示例： ```javascript // 创建一个包含数据的数组 var data = [10, 20, 30, 40, 50]; // 选择要绑定数据的DOM元素 var circles = d3.select("svg") .selectAll("circle") .data(data); // 处理enter状态的数据 circles.enter() .append("circle") .attr("r", function(d) { return d; }) .attr("cx", function(d, i) { return i * 50 + 50; }) .attr("cy", 50) .attr("fill", "blue"); // 处理update状态的数据 circles.attr("r", function(d) { return d; }) .attr("fill", "green"); // 处理exit状态的数据 circles.exit().remove(); ``` 在这个例子中，我们首先选择了一个SVG元素，并使用`selectAll`方法选择了所有的圆元素。然后，我们使用`data`方法将数据与这些圆元素进行绑定。接下来，我们使用`enter`方法处理新添加的数据，使用`append`方法创建新的圆元素，并设置其属性。然后，我们使用`attr`方法更新已存在的圆元素的属性。最后，我们使用`exit`方法删除多余的圆元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值