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 相关文章推荐
uploadify 3.0 详细使用说明
Jun 18 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 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实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
JS实现浏览上传文件的代码
2017/08/23 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
Python中unittest用法实例
2014/09/25 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python实现基本线性数据结构
2016/08/22 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
存储过程的优缺点是什么
2015/01/10 面试题
高一历史教学反思
2014/01/13 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
爱耳日活动总结
2014/04/30 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
python中__slots__节约内存的具体做法
2021/07/04 Python