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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 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
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
js 操作符实例代码
2009/10/24 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
客户接待方案
2014/02/26 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
销售提升方案
2014/06/07 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python