交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • JS数组方法slice()用法实例分析

    北冥有鱼 教程大全 2020-01-19 ,,

    本文实例讲述了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"]
    
    

    运行结果:

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

    更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

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


    广而告之:
    热门推荐:
    jquery搜索框效果实现方法

    本文实例讲述了jquery搜索框效果实现方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下:<html> <head> <title>jquery:搜索框效果</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <scr···

    tp5实现微信小程序多图片上传到服务器功能

    最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助。 1,小程序端: 在wxml文件中: <!--选择图片 --> <view class="picture"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key···

    jquery()函数的三种语法介绍

    接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器: 复制代码 代码如下: jQuery(selector,[context]) 使用原始 HTML 的字符串来创建 DOM 元素: 复制代码 代码如下: jQuery(html,[ownerDocument]) 绑定一个在 DOM 文档载入完成后执行的函数: 复制代码 代码如···

    Bootstrap多级导航栏(级联导航)的实现代码

    在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下 插件地址:http://vsn4ik.github.io/bootstrap-submenu/ 先看一下,在后台系统上的显示效果 下面说一下实···

    Html5 实现微信分享及自定义内容的流程

    最近一个项目有一个微信分享并且需要自定义微信分享内容的需求,因为是第一次接触到微信分享,所以记录一下期间遇到的一些问题,以及完成功能的整个流程。 以下为大概流程 (细节放在各个阶段)   安装 weixin-js-sdk 初始化微信分享 配置微信分享自定义内容(发送给···

    jQuery中document与window以及load与ready 区别详解

    用过JavaScript的童鞋,应该知道window对象和document对象,也应该听说过load事件和ready事件,小菜当然也知道,而且自认为很了解,直到最近出了问题,才知道事情并不是那么简单。 首先说说window和document,直观上来讲,window代表的是浏览器窗口,而document代表的是浏览器···

    php压缩多个CSS为一个css的代码并缓存

    复制代码 代码如下: <?php /* Compress multiple CSS files into one and cache for an hour. Use the same code for Javascript, but replace below "text/css" with "text/javascript" and of course make sure you include .js files instead of .css ones. */ ob···

    js Canvas绘制圆形时钟教程

    本文实例为大家分享了Canvas绘制圆形时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-clock</title> </head> <body> <canvas id=···

    详解PHP PDO简单教程

    大约 80% 的 Web 应用程序由 PHP 提供支持。类似地,SQL 也是如此。PHP 5.5 版本之前,我们有用于访问 MySQL 数据库的 mysql_ 命令,但由于安全性不足,它们最终被弃用。 弃用这件事是发生在 2013 年的 PHP 5.5 上,我写这篇文章的时间是 2018 年,PHP 版本为 7.2。mysql_ 的弃···

    百家号企业开发票的税率是多少?

    您好请您根据以下公司规模和公司可开具的发票类型确定自己应该税率: