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 图像裁剪插件Jcrop的简单使用
May 22 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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 工厂模式使用方法
2010/05/18 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
Python实现多行注释的另类方法
2014/08/22 Python
Python threading多线程编程实例
2014/09/18 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python自动化办公操作PPT的实现
2021/02/05 Python
Python操作Excel的学习笔记
2021/02/18 Python
MySQL面试题目集锦
2016/04/14 面试题
岗位职责说明书
2014/05/07 职场文书
公司庆典主持词
2015/07/04 职场文书
寒假致家长的一封信
2015/10/10 职场文书
财产分割协议书
2016/03/22 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
python入门学习关于for else的特殊特性讲解
2021/11/20 Python