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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
JS中判断null的方法分析
Nov 21 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
js实现简单的打印表格
Jan 15 Javascript
原生JavaScript实现五子棋游戏
Nov 09 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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
多广告投放代码 推荐
2006/11/13 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
学生操行评语大全
2014/04/24 职场文书
草房子读书笔记
2015/06/29 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python