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


Posted in Javascript onAugust 24, 2018

本文实例讲述了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.3water.com/code/HtmlJsRun测试运行一下文中所述代码。

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

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

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
js预加载图片方法汇总
Jun 15 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
浅谈Express异步进化史
Sep 09 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 #Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 #Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 #Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 #Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 #Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 #Javascript
浅谈Vue组件及组件的注册方法
Aug 24 #Javascript
You might like
网站当前的在线人数
2006/10/09 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python实现Windows电脑定时关机
2018/06/20 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python next()和iter()函数原理解析
2020/02/07 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
聊聊python中的循环遍历
2020/09/07 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
《散步》教学反思
2014/03/02 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
党支部工作总结2015
2015/04/01 职场文书
承兑汇票延期证明
2015/06/23 职场文书
丧事主持词
2015/07/02 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL