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之ESC(第二类混淆)
May 06 Javascript
js每次Title显示不同的名言
Sep 25 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 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 判断变量类型实现代码
2009/10/23 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
python 数据加密代码
2008/12/24 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
python集合删除多种方法详解
2020/02/10 Python
美国钻石商店:Zales
2016/11/20 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
歌唱比赛获奖感言
2014/01/21 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
Go语言应该什么情况使用指针
2021/07/25 Golang
Python之基础函数案例详解
2021/08/30 Python