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 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
js中有关IE版本检测
Jan 04 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
详解Vue SPA项目优化小记
Jul 03 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
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
非常漂亮的JS代码经典广告
2007/10/21 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
python之生成多层json结构的实现
2020/02/27 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
python图片合成的示例
2020/11/09 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
青年教师典范事迹材料
2014/01/31 职场文书
家长评语和期望
2014/02/10 职场文书
校园环保标语
2014/06/13 职场文书
个人创业事迹材料
2014/12/30 职场文书
大学辅导员述职报告
2015/01/10 职场文书
详解Vue的options
2021/05/15 Vue.js
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle