JS数组方法slice()用法实例分析


Posted in Javascript onJanuary 18, 2020

本文实例讲述了JS数组方法slice()用法。分享给大家供大家参考,具体如下:

slice()方法

slice(),它能基于当前数组中的一个或多个创建一个新数组。可以接受一或两个参数,即要返回的起始和结束位置。

一个参数:slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。

两个参数:该方法返回起始和结束位置之间的项(但不包括结束位置的项)。

slice不会影响原始数组。

结束位置小于起始位置,返回空数组。

可以接受负数,用数组长度加上该负数来确定相应位置。

var arr = [1, 2, 3, 'a', 'b', 'c', 'd'];
Array.prototype.copySlice =function() {
  var newArr = [];
  var len = this.length;
  var argLen = arguments.length;
  if(arguments.length == 1) {//一个参数
    var startNum = arguments[0] > 0 ? arguments[0] : (len + arguments[0]);
    for(var i = startNum; i < len; i++) {
      newArr.push(arr[i]);
    }
  }
  else if(arguments.length == 2) {//两个参数
    var startNum = arguments[0] > 0 ? arguments[0] : (len + arguments[0]);
    var endNum = arguments[1] > 0 ? arguments[1] : (len + arguments[1]);
    if(startNum >= endNum) {//起始索引大于终止索引,返回[]
      return newArr;
    }
    else {
      for(var i = startNum; i < endNum; i++) {
        newArr.push(arr[i]);
      }
    }
  }
  return newArr;
};
console.log(arr.length); // 7
// 一个参数
console.log(arr.copySlice(2)); // [3, "a", "b", "c", "d"]
// 两个参数
console.log(arr.copySlice(3, 6));  //["a", "b", "c"]
console.log(arr);  //[1, 2, 3, "a", "b", "c", "d"]
// 接收负数
console.log(arr.copySlice(-2)); // ["c", "d"]
console.log(arr.copySlice(-5, 6)); //[3, "a", "b", "c"]
//结束位置小于起始位置,返回空数组。
console.log(arr.copySlice(-5, -6)); //[]
console.log(arr.copySlice(5, 5)); //[]
console.log(arr.copySlice(5, )); // ["c", "d"]

运行结果:

JS数组方法slice()用法实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
JS实现横向轮播图(中级版)
Jan 18 #Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 #Javascript
JS数组方法concat()用法实例分析
Jan 18 #Javascript
JS实现纵向轮播图(初级版)
Jan 18 #Javascript
JS数组方法reverse()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(初级版)
Jun 24 #Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 #Javascript
You might like
Content-type 的说明
2006/10/09 PHP
php时区转换转换函数
2014/01/07 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Python利用命名空间解析XML文档
2020/08/10 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
护理助产毕业生的求职信
2014/03/02 职场文书
岗位竞聘书范文
2014/03/31 职场文书
库房管理员岗位职责
2015/02/12 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python