脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript join()、splice()、slice()和split()

JavaScript中join()、splice()、slice()和split()函数用法示例

 更新时间：2018年08月24日 15:19:14   作者：u013063153  
这篇文章主要介绍了JavaScript中join()、splice()、slice()和split()函数用法,结合实例形式较为详细的分析了join()、splice()、slice()和split()函数的功能、使用方法及相关操作注意事项,需要的朋友可以参考下

本文实例讲述了JavaScript中join()、splice()、slice()和split()函数用法。分享给大家供大家参考，具体如下：

join()

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

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

<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

<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

split()

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

<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:3:4:5".split(":") //将返回["2", "3", "4", "5"]
"|a|b|c".split("|") //将返回["", "a", "b", "c"]
"hello".split("") //可返回 ["h", "e", "l", "l", "o"]
"hello".split("", 3) //可返回 ["h", "e", "l"]

slice()

slice() 方法可从已有的数组中返回选定的元素。

<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.slice(1)
 + "<br />")
document.write(arr)
</script>

运行结果：

George,John,Thomas
John,Thomas
George,John,Thomas

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(
arr.slice(2,4)
 + "<br />")
document.write(arr)
</script>

运行结果：

George,John,Thomas,James,Adrew,Martin
Thomas,James
George,John,Thomas,James,Adrew,Martin

splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")
</script>

运行结果：

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)
</script>

运行结果：

George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)
</script>

运行结果：

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试运行一下文中所述代码。

更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《JavaScript字符与字符串操作技巧总结》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数组操作技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • js控制当再次点击按钮时的间隔时间

    js控制当再次点击按钮时的间隔时间

    这篇文章主要介绍通过js如何控制当再次点击按钮是的间隔时间,需要的朋友可以参考下
    2014-06-06
  • 前端html2canvas生成截图实现步骤与踩坑记录

    前端html2canvas生成截图实现步骤与踩坑记录

    这篇文章主要介绍了前端html2canvas生成截图实现步骤与踩坑的相关资料,主要步骤包括使用html2canvas生成截图以及处理图片跨域和CSS样式丢失问题,可选方案包括转换图片为base64编码和使用domtoimage插件,需要的朋友可以参考下
    2024-09-09
  • 实例学习JavaScript读取和写入cookie

    实例学习JavaScript读取和写入cookie

    本篇内容主要给大家通过实例讲述了JavaScript读取和写入cookie的相关知识点，有这方面需要的朋友参考下吧。
    2018-01-01
  • JavaScript ES6模块导入和导出的方法

    JavaScript ES6模块导入和导出的方法

    ES6在语言标准的层面上实现了模块功能,而且实现的相当简单,完全可以取代CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案,下面这篇文章主要给大家介绍了关于ES6模块导入和导出的方法,需要的朋友可以参考下
    2022-07-07
  • JavaScript常用本地对象小结

    JavaScript常用本地对象小结

    这篇文章主要介绍了JavaScript常用本地对象小结的相关资料,需要的朋友可以参考下
    2016-03-03
  • js实现黑色简易的滑动门网页tab选项卡效果

    js实现黑色简易的滑动门网页tab选项卡效果

    这篇文章主要介绍了js实现黑色简易的滑动门网页tab选项卡效果,可实现简单的鼠标滑过tab项切换对应菜单的功能,涉及javascript鼠标事件控制页面元素的遍历与样式改变实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js中onclick和addEventListener的区别详解

    js中onclick和addEventListener的区别详解

    这篇文章深入探讨了JavaScript中处理事件的两种不同方法,即熟悉的onclick和多功能的addEventListener方法，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • js动态创建、删除表格示例代码

    js动态创建、删除表格示例代码

    生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号，具体的实现过程如下，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • 微信小程序 flexbox layout快速实现基本布局的解决方案

    微信小程序 flexbox layout快速实现基本布局的解决方案

    flexbox layout 弹性盒子布局。弹性盒子可以快速的对小程序进行布局。这篇文章主要介绍了微信小程序 flexbox layout快速实现基本布局的方法,需要的朋友可以参考下
    2020-03-03
  • JS定时器实例

    JS定时器实例

    在javascritp中，有两个关于定时器的专用函数
    2013-04-04

最新评论