JS Array.slice 截取数组的实现方法


Posted in Javascript onJanuary 02, 2016

slice定义和用法

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

语法
arrayObject.slice(start,end)

参数 描述
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回值

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

说明

请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

提示和注释

注释:您可使用负值从数组的尾部选取元素。
注释:如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。

实例

例子 1

在本例中,我们将创建一个新数组,然后显示从其中选取的元素:

<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

例子 2

在本例中,我们将创建一个新数组,然后显示从其中选取的元素:

<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

核心代码:

<script type="text/javascript">
//JS Array.slice 截取数组
//在JavaScript中,Array对象的slice(start[,end])方法返回数组从下标[start,end)的部分(不包含下标为end的元素)如果没有指定end参数,则从start开始到数组结尾的部分,slice()方法不改变原数组,如果要删除数组的一部分,可以使用splice()方法。
//参数:
//(1)start:开始截取的数组下标,如果start是负数,表明从数组尾部开始计算。
//(2)end:结束截取的数组下标,如果end是负数,表明从数组尾部开始计算。
//例1:

var arr = [1,2,3,4,5,6,7,8,9];
    // [0,1,2,3,4,5,6,7,8]
  // [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1]
  
document.writeln(arr.slice(5)); // 输出:6,7,8,9
document.writeln(arr.slice(-5)); // 输出:5,6,7,8,9
document.writeln(arr.slice(0,3)); // 输出:1,2,3
document.writeln(arr.slice(1,2)); // 输出:2
document.writeln(arr.slice(3,-2)); // 输出:4,5,6,7
document.writeln(arr.slice(1,9999)); // 输出:2,3,4,5,6,7,8,9
//==================================================================================================
//JS Array.splice(start,delete_count,value,...) 插入、删除、替换数组
//参数:
//(1)start:开始插入和(或)删除的数组元素的下标。
//(2)delete_count:结束截取的数组下标,如果end是负数,表明从数组尾部开始计算。
//(3)value,...:要插入数组的元素。
//返回:如果从数组中删除了元素,则返回的是被删除的元素的数组
//
//例1:
document.write("<hr>");
//
var arr = [1,2,3,4,5,6,7,8,9];
document.writeln("arr=" + arr); // 输出:arr=1,2,3,4,5,6,7,8,9
document.writeln("arr.splice(5)=" + arr.splice(5)); // 输出:arr.splice(5)=6,7,8,9
document.writeln("arr=" + arr); // 输出:arr=1,2,3,4,5
document.write("<br>");
//
var arr = [1,2,3,4,5,6,7,8,9];
document.writeln("arr=" + arr); // 输出:arr=1,2,3,4,5,6,7,8,9
document.writeln("arr.splice(5,1,99,100)=" + arr.splice(5,1,99,100)); // 输出:arr.splice(5,1,99,100)=6
document.writeln("arr=" + arr); // 输出:arr=1,2,3,4,5,99,100,7,8,9
document.write("<br>");
</script>

ok了,其实就是使用array.alice(0,20);截取前20个。

Javascript 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
axios学习教程全攻略
Mar 26 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
Vue项目分环境打包的实现步骤
Apr 02 Javascript
基于vue.js实现购物车
Jan 15 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
js实现简易ATM功能
Oct 27 Javascript
jquery实现简单的全选和反选功能
Jan 02 #Javascript
基于Javascript实现弹出页面效果
Jan 01 #Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 #Javascript
基于jQuery实现返回顶部实例代码
Jan 01 #Javascript
详解JavaScript 中的 replace 方法
Jan 01 #Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 #Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 #Javascript
You might like
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP中比较时间大小实例
2014/08/21 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
js实现iframe动态调整高度的代码
2008/01/06 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
详解Django中的权限和组以及消息
2015/07/23 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python批量更改文件名的实现方法
2017/10/29 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python日志模块logging基本用法分析
2018/08/23 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
django 类视图的使用方法详解
2019/07/24 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
成品库仓管员岗位职责
2014/04/06 职场文书
社区活动策划方案
2014/08/21 职场文书
2014年管理工作总结
2014/11/22 职场文书
北京颐和园导游词
2015/01/30 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle