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实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
jquery cookie的用法总结
Nov 18 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
javascript常用对话框小集
2013/09/13 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
jquery实现拖动效果
2016/08/10 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python计数排序和基数排序算法实例
2014/04/25 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
上班离岗检讨书
2014/01/27 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
Python实现天气查询软件
2021/06/07 Python
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers