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仿PS里的羽化效果代码
Dec 20 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
js实现超级玛丽小游戏
Mar 18 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安装攻略:常见问题解答(三)
2006/10/09 PHP
UCenter Home二次开发指南
2009/05/28 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
Python的净值数据接口调用示例分享
2016/03/15 Python
python3.x实现base64加密和解密
2019/03/28 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
软件测试面试题
2015/10/21 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
大一自我鉴定范文
2013/12/27 职场文书
销售员岗位职责
2014/06/09 职场文书
交通志愿者活动总结
2014/06/27 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
MySQL系列之三 基础篇
2021/07/02 MySQL
redis复制有可能碰到的问题汇总
2022/04/03 Redis
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android