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中的window.open返回object的错误的解决方法
Aug 15 Javascript
jQuery each()方法的使用方法
Mar 18 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
js实现移动端轮播图
Dec 21 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 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实现文件下载断点续传详解
2014/10/15 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php构造函数的继承方法
2015/02/09 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
pandas数据处理进阶详解
2019/10/11 Python
Python函数基本使用原理详解
2020/03/19 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
python实现数字炸弹游戏
2020/07/17 Python
python实现三壶谜题的示例详解
2020/11/02 Python
少先队入队活动方案
2014/02/08 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
大学生活感想
2015/08/10 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
react中的DOM操作实现
2021/06/30 Javascript
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
vue打包时去掉所有的console.log
2022/04/10 Vue.js