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 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
微信小程序中显示倒计时代码实例
May 09 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
详解python编译器和解释器的区别
2019/06/24 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
python selenium 获取接口数据的实现
2020/12/07 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
Collection和Collections的区别
2016/05/02 面试题
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
Hibernate持久层技术
2013/12/16 面试题
自考生自我评价分享
2014/01/18 职场文书
公司合作协议书范本
2014/04/18 职场文书
信息员培训方案
2014/06/12 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
出差报告范文
2014/11/06 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书