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 表单验证常见正则
Sep 28 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
Three.js快速入门教程
Sep 09 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
javascript中layim之查找好友查找群组
Feb 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脚本的10个技巧(2)
2006/10/09 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php画图实例
2014/11/05 PHP
php中define用法实例
2015/07/30 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
用javascript操作xml
2006/11/04 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
js如何打印object对象
2015/10/16 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
后勤主管岗位职责
2014/03/01 职场文书
团购业务员岗位职责
2014/03/15 职场文书
奶茶店创业计划书
2014/08/14 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
东京审判观后感
2015/06/01 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书