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 相关文章推荐
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
JavaScript函数重载操作实例浅析
May 02 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
Js获取事件对象代码
2010/08/05 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python常用函数与用法示例
2019/07/02 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
大学生自我评价范文
2015/03/03 职场文书
党支部考察意见范文
2015/06/02 职场文书
导游词之介休绵山
2019/12/31 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
tree shaking对打包体积优化及作用
2022/07/07 Java/Android