【JavaScript】内置对象 - 数组对象 ⑤ ( 数组转字符串 | toString 方法 | join 方法 )

news2024/11/17 13:49:00

文章目录

  • 一、数组转字符串
    • 1、数组转字符串 ( 逗号分割 ) - toString()
    • 2、数组转字符串 ( 自定义分割符 ) - join()


Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array






一、数组转字符串




1、数组转字符串 ( 逗号分割 ) - toString()


调用 Array 数组对象的 toString() 方法 , 可以获取一个字符串 , 元素之间使用逗号隔开 ;

toString()

toString 方法是 Object 的方法 , Array 数组重写了该方法 , 在重写的方法内部 , 调用了 join 方法拼接数组元素 , 数组元素之间使用逗号隔开 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toString


代码示例 :

        // 创建数组对象
        let arr = [9, 5, 2, 7, 5];

        // 数组转字符串
        var str = arr.toString();

        // 输出 : 9,5,2,7,5
        console.log(str);

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建数组对象
        let arr = [9, 5, 2, 7, 5];

        // 数组转字符串
        var str = arr.toString();

        // 输出 : 9,5,2,7,5
        console.log(str);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述


2、数组转字符串 ( 自定义分割符 ) - join()


调用 Array 数组对象的 join() 方法 , 可以获取一个字符串 , 元素之间默认使用逗号隔开 , 也可以使用自定义的分隔符隔开 ;

如果 数组中 只有一个元素 , 则没有分隔符 ;


join 函数语法如下 :

join()
join(separator)

调用 join() 方法 , 不传入任何参数 , 默认使用逗号分隔数组中的元素 , 如 :

  • 数组元素为 [1, 2, 3] ,
  • 最终得到的字符串为 '1,2,3' , 默认使用逗号隔开 ;

调用 join(separator) 方法 , 传入一个分隔符字符串 , 则数组中的元素使用分割字符串进行隔开 , 如 :

  • 数组元素为 [1, 2, 3] ,
  • 设置分割字符串为 '$' ;
  • 最终得到的字符串为 '1$2$3'

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join


代码示例 :

        // 创建数组对象
        let arr = [9, 5, 2, 7, 5];

        // 数组转字符串 , 使用默认逗号分隔符
        var str1 = arr.join();
        // 输出 : 9,5,2,7,5
        console.log(str1);

        // 数组转字符串 - 设置自定义分隔符
        var str2 = arr.join('$');
        // 输出 : 9$5$2$7$5
        console.log(str2);

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建数组对象
        let arr = [9, 5, 2, 7, 5];

        // 数组转字符串 , 使用默认逗号分隔符
        var str1 = arr.join();
        // 输出 : 9,5,2,7,5
        console.log(str1);

        // 数组转字符串 - 设置自定义分隔符
        var str2 = arr.join('$');
        // 输出 : 9$5$2$7$5
        console.log(str2);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1662741.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每日一练 2024.5.10

题目&#xff1a; 给定一个非负整数数组 nums&#xff0c; nums 中一半整数是 奇数 &#xff0c;一半整数是 偶数 。 对数组进行排序&#xff0c;以便当 nums[i] 为奇数时&#xff0c;i 也是 奇数 &#xff1b;当 nums[i] 为偶数时&#xff0c; i 也是 偶数 。 示例 1&#…

景联文科技:用高质量数据采集标注赋能无人机技术,引领无人机迈入新纪元!

随着无人机技术的不断发展与革新&#xff0c;它已成为现代社会中一个前景无限的科技领域。 无人机应用领域 边境巡逻与安防&#xff1a;边境管理部门利用无人机监控边境线&#xff0c;防止非法越境和其他安全威胁&#xff0c;同时也能监控地面安保人员的工作状态和行动路线。 …

双目相机标定流程(MATLAB)

一&#xff1a;经典标定方法 1.1OPENCV 1.2ROS ROS进行双目视觉标定可以得到左右两个相机的相机矩阵和畸变系数&#xff0c;如果是单目标定&#xff0c;用ROS会非常方便。 3.MATLAB标定&#xff08;双目标定&#xff09; MATLAB用来双目标定会非常方便&#xff0c;主要是为…

【oj题】环形链表

目录 一. OJ链接&#xff1a; 环形链表 【思路】 快慢指针 ​编辑【扩展问题】 为什么快指针每次走两步&#xff0c;慢指针走一步可以解决问题&#xff1f; ​编辑【扩展问题】快指针一次走3步&#xff0c;走4步&#xff0c;...n步行吗&#xff1f; 二. OJ链接&#xff1a…

2024年第九届“数维杯”大学生数学建模挑战赛B题

第一个问题为&#xff1a;正己烷不溶物对热解产率是否产生显著影响&#xff1f; 第一个问题&#xff1a;正己烷不溶物(INS)对热解产率是否产生显著影响&#xff1f; 解析&#xff1a;正己烷不溶物(INS)主要是由生物质和煤中的非挥发性物质组成&#xff0c;它们在共热解过程中会…

Django 静态文件管理与部署指南

title: Django 静态文件管理与部署指南 date: 2024/5/10 17:38:36 updated: 2024/5/10 17:38:36 categories: 后端开发 tags: WebOptCDN加速DjangoCompressWebpackStaticDeployCICD-ToolsSecStatic 第一章&#xff1a;介绍 Django 静态文件的概念和重要性 在 Web 开发中&a…

【Docker】Docker部署Java程序

Maven中使用打包插件 <build><finalName>duanjian</finalName><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><mainClass…

一次完整的GC流程

Java堆中内存区分 Java的堆由新生代&#xff08;Young Generation&#xff09;和老年代&#xff08;Old Generation&#xff09;组成。新生代存放新分配的对象&#xff0c;老年代存放长期存在的对象。 新生代&#xff08;Young&#xff09;由年轻区&#xff08;Eden&a…

Blender细节补充

1.饼状菜单&#xff0c;用于快速切换/选择 例如&#xff1a; ~&#xff1a;切换视图 Z&#xff1a;切换着色方式 &#xff0c;&#xff1a;切换坐标系 .&#xff1a;切换基准点 Shift S&#xff1a;吸附 有两种使用方式&#xff1a; -点选 -滑选&#xff0c;按快捷键…

手机一键换ip地址到湖南

怎么把手机ip改成湖南&#xff1f;想要手机一键换ip地址到湖南&#xff0c;可以试试使用虎观代理app&#xff0c;一键操作&#xff0c;简单又方便。你会惊讶地发现&#xff0c;更改手机IP至湖南竟然如此便捷。 选用APP优势&#xff1a; ★IP资源丰富 已经在国内各大省份提供服…

Fastapi+docker+tortoise-orm+celery

因为项目是后期引入celery,所以导致构建docker的时候只有fastapi的项目&#xff0c;celery的重启比较麻烦 1.docker安装celery pip install celery安装celery的时候注意python版本与celery版本的适配&#xff0c;有些celery的版本不支持python的版本&#xff0c;具体的版本请看…

泰迪智能科技携手新乡学院开展“泰迪智能双创工作室”共建交流会

为深化校企合作&#xff0c;实现应用型人才培养目标。5月8日&#xff0c;广东泰迪智能科技股份有限公司河南分公司市场总监张京瑞到访新乡学院数学与统计学院参观交流&#xff0c;数学与统计学院院长赵国喜、副院长皮磊、张秦&#xff0c;教研室主任许寿方、姚广出席本次交流会…

【基础算法总结】二分查找一

二分查找一 1. 二分查找2.在排序数组中查找元素的第一个和最后一个位置3.x 的平方根4.搜索插入位置 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1…

Dependencies:查找项目中dll关联文件是否缺失。

前言 Dependencies工具作为一款优秀的DLL解析工具&#xff0c;能让你很直观地看到DLL的相关信息&#xff0c;如具备哪些功能函数、参数&#xff0c;又比如该DLL基于哪些DLL运行。判断该dll基于哪些dll运行&#xff0c;如果基于的dll丢失&#xff0c;那么就会提示。就能判断缺少…

RobbitMQ基本消息队列的消息接收

1.先给工程引入依赖 父工程有了子工程就不用导了 <!--AMQP依赖&#xff0c;包含RabbitMQ--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 2.配置yml…

前端组件库图片上传时候做自定义裁剪操作

不论是vue还是react项目&#xff0c;我们在使用antd组件库做上传图片的时候&#xff0c;有一个上传图片裁剪的功能&#xff0c;但是这个功能默认是只支持1:1的裁剪操作&#xff0c;如何做到自定义的裁剪操作&#xff1f;比如显示宽高比&#xff1f;是否可以缩放和旋转操作&…

vue 中的 Vuex

Vuex Vuex是什么&#xff1f; 概念&#xff1a;专门在vue中实现集中式状态&#xff08;数据&#xff09;管理的一个Vue插件&#xff0c;对Vue应用中多个组件的共享状态进行集中式的管理(读/写&#xff09;&#xff0c;也是一种组件间通信的方式&#xff0c;且适用于任意组件间…

【二叉树算法题记录】二叉树的所有路径,路径总和——回溯

目录 257. 二叉树的所有路径题目描述题目分析cpp代码 112. 路径总和题目描述题目分析cpp代码 257. 二叉树的所有路径 题目描述 给你一个二叉树的根节点root &#xff0c;按任意顺序&#xff0c;返回所有从根节点到叶子节点的路径。 题目分析 其实从根节点往下走&#xff0c…

C语言/数据结构——(链表的回文结构)

一.前言 今天在牛客网上刷到了一道链表题——链表的回文结构https://www.nowcoder.com/practice/d281619e4b3e4a60a2cc66ea32855bfa?&#xff0c;巧合的是它的解题思路恰好是我们一起分享过两道链表题的汇总。这两道题分别是反转链表和链表的中间节点。废话不多数&#xff0c…

css 案例 横向滚动渐变

效果 完整代码&#xff1a; <template><view class"content"><view class"tab"><view class"tab-item" v-for"(item,index) in tab" :key"index" click"handlerTab(index)":class"ind…