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_03(ExtJs Grid的简单使用)
Oct 02 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 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图片处理之图片背景、画布操作
2014/11/19 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
vue项目实战总结篇
2018/02/11 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python实现网页自动签到功能
2019/01/21 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python数据预处理方式 :数据降维
2020/02/24 Python
python实现贪吃蛇双人大战
2020/04/18 Python
python实现文字版扫雷
2020/04/24 Python
python3中for循环踩过的坑记录
2020/12/14 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
工地资料员岗位职责
2013/12/31 职场文书
社区健康教育实施方案
2014/03/18 职场文书
建筑投标担保书
2014/05/20 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
物资采购管理制度
2015/08/06 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js