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 相关文章推荐
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
JS实现关闭小广告特效
Jan 29 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 年月日的三级联动实例代码
2017/05/24 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python求质数列表的例子
2019/11/24 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
怎样填写就业意向
2014/04/02 职场文书
难忘的一课教学反思
2014/04/30 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL