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 相关文章推荐
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
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在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python轮询机制控制led实例
2020/05/03 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
linux面试题参考答案(7)
2014/07/24 面试题
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
软件工程专业推荐信
2013/10/28 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
中等生评语大全
2014/05/04 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书