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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
JS出现失效的情况总结
Jan 20 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
layui select动态添加option的实例
Mar 07 Javascript
JavaScript中变量提升机制示例详解
Dec 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
Javascript实现的分页函数
2007/02/07 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
js判断是否是手机页面
2017/03/17 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
python threading模块操作多线程介绍
2015/04/08 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python在文本开头插入一行的实例
2018/05/02 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python 读取修改pcap包的例子
2019/07/23 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
初一英语教学反思
2014/01/11 职场文书
离婚协议书怎么写
2014/09/12 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
结婚十年感言
2015/07/31 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
前端JavaScript大管家 package.json
2021/11/02 Javascript
Java版 单机五子棋
2022/05/04 Java/Android