JS数组方法shift()、unshift()用法实例分析


Posted in Javascript onJanuary 18, 2020

本文实例讲述了JS数组方法shift()、unshift()用法。分享给大家供大家参考,具体如下:

shift()方法

1. 定义:从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
2. 语法: arr.shift()
3. 参数:/
4. 返回值:从数组中删除的元素(当数组为空时返回undefined)。

代码如下:

方法一:

var arr1 = [1, 2, 3, 4, 'A', 'B', 'C']; 
var arr2 = [];
Array.prototype.copyShift = function() {
  var result = [],
    newArr = [];
  result = this[0];
  for(var i = 1; i < this.length; i++) {// 将数组的第二个至最后一项的值赋值给newArr
    newArr[newArr.length] = this[i];
  }
  for(var i = 0; i < newArr.length; i++) { //newArr赋值给原数组
    this[i] = newArr[i];
  }
  this.length = newArr.length;
  return result;
};
console.log(arr1.copyShift());  // 1
console.log(arr1); // [2, 3, 4, 'A', 'B']
console.log(arr2.copyShift()); // undefined
console.log(arr2); // []

运行结果:

JS数组方法shift()、unshift()用法实例分析

方法二:将上述代码修改为如下:(去掉中间数组newArr,直接在原数组上操作)

var arr1 = [1, 2, 3, 4, 'A', 'B', 'C']; 
var arr2 = [];
Array.prototype.copyShift = function() {
  var result = [];
  result = this[0];
/* 
  for(var i = 1; i < this.length; i++) {// 将数组的第二个至最后一项的值赋值给newArr
    newArr[newArr.length] = this[i];
  }
  for(var i = 0; i < newArr.length; i++) { //newArr赋值给原数组
    this[i] = newArr[i];
  }
  this.length = newArr.length;
 */
  // 将数组的后一项赋值给前一项
  for(var i = 0; i < this.length; i++) {
    this[i] = this[i + 1];
  }
  if(this.length > 1) {//去掉数组最后一项
    this.length = this.length - 1;
  }
  return result;
};
console.log(arr1.copyShift());  // 1
console.log(arr1); // [2, 3, 4, 'A', 'B']
console.log(arr2.copyShift()); // undefined
console.log(arr2); // []

运行结果:

JS数组方法shift()、unshift()用法实例分析

unshift()方法

1. 定义:将一个或多个元素添加到数组的开头,并返回新数组的长度。
2. 语法:arr.unshift(element1, ..., elementN)
3. 参数:数组前端添加任意个项
4. 返回值:当一个对象调用该方法时,返回其 length 属性值。

代码如下:

方法一:

var arr1 = [1, 2, 3, 4, 'A', 'B', 'C']; 
var arr2 = [1, 2, 3, 4];
Array.prototype.copyUnshift = function() {
  var newArr = [],
    argLen = arguments.length,
    len = argLen + this.length;
  for(var i = 0; i < len; i++) {
/* 
    if(i < argLen) {
      newArr[i] = arguments[i];
    }
    else {
      newArr[i] = this[i - argLen];
    }
 */
    // 上述代码也可写为:
    newArr[i] = (i < argLen) ? arguments[i] : this[i - argLen];
  }
  for(var i = 0; i < len; i++) {
    this[i] = newArr[i];
  }
  return len;
};
console.log(arr1.copyUnshift('XXX', 'YYY', 'ZZZ'));  // 10
console.log(arr1); // ['XXX', 'YYY', 'ZZZ', 1, 2, 3, 4, 'A', 'B']
console.log(arr2.copyUnshift()); // 4
console.log(arr2); // [1, 2, 3, 4]

运行结果:

JS数组方法shift()、unshift()用法实例分析

//同方法一一样,只不过是for循环以递减的形式
var arr1 = [1, 2, 3, 4, 'A', 'B', 'C']; 
var arr2 = [1, 2, 3, 4];
Array.prototype.copyUnshift = function() {
  var newArr = [],
    argLen = arguments.length,
    len = argLen + this.length;
  //同方法一一样,只不过是for循环以递减的形式
  for(var i = len - 1; i >= 0; i--) {
/*     if(i < argLen) {
      newArr[i] = arguments[i];
    }
    else {
      newArr[i] = this[i - argLen];
    } */
    // 上述代码也可写为:
    newArr[i] = (i < argLen) ? arguments[i] : this[i - argLen];
  }
  for(var i = 0; i < len; i++) {
    this[i] = newArr[i];
  }
  return len;
};

接上递减形式的for循环,进一步可修改为:

方法二: 直接修改原数组,不借助中间数组

var arr1 = [1, 2, 3, 4, 'A', 'B', 'C']; 
var arr2 = [1, 2, 3, 4];
Array.prototype.copyUnshift = function() {
  var argLen = arguments.length,
    len = argLen + this.length;
  for(var i = len - 1; i >= 0; i--) {
/*     if(i > argLen - 1) {
      this[i] = this[i - argLen];
    }
    else {
      this[i] = arguments[i];
    }
 */
    this[i] = (i > argLen - 1) ? this[i - argLen] : arguments[i]; 
  }
  return len;
};
console.log(arr1.copyUnshift('XXX', 'YYY', 'ZZZ'));  // 10
console.log(arr1); // ['XXX', 'YYY', 'ZZZ', 1, 2, 3, 4, 'A', 'B']
console.log(arr2.copyUnshift()); // 4
console.log(arr2); // [1, 2, 3, 4]

运行结果:

JS数组方法shift()、unshift()用法实例分析

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

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

Javascript 相关文章推荐
javascript 禁止复制网页
Jun 11 Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 #Javascript
JavaScript实现滑动门效果
Jan 18 #Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 #Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 #Javascript
JS数组方法join()用法实例分析
Jan 18 #Javascript
JavaScript进制转换实现方法解析
Jan 18 #Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 #Javascript
You might like
来自PHP.NET的入门教程
2006/10/09 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
清除输入框内的空格
2016/12/21 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
layui的select联动实现代码
2019/09/28 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Django的models模型的具体使用
2019/07/15 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
详细分析Python垃圾回收机制
2020/07/01 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
化学教师教学反思
2014/01/17 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
期末考试复习计划
2015/01/19 职场文书
辞职信标准格式
2015/02/27 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书