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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 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 数组实例说明
2008/08/18 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
javascript实现数字时钟效果
2021/02/06 Javascript
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python机器学习之决策树算法
2017/12/22 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
《燕子专列》教学反思
2014/02/21 职场文书
合作投资意向书
2014/04/01 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
委托书的样本
2015/01/28 职场文书
长城导游词
2015/01/30 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript