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实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
实测jquery data()如何存值
Aug 18 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
实现51Map地图接口(示例代码)
2013/11/22 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
js实现点击选项置顶动画效果
2020/08/25 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
Python中pygame安装方法图文详解
2015/11/11 Python
Python unittest模块用法实例分析
2018/05/25 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
骨干教师培训感言
2014/01/16 职场文书
工商行政处罚决定书
2015/06/24 职场文书
小学运动会通讯稿
2015/07/18 职场文书