脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS数组方法shift()、unshift()

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

 更新时间：2020年01月18日 10:55:51   作者：林飞的梦呓  
这篇文章主要介绍了JS数组方法shift()、unshift()用法,结合实例形式分析了JavaScript数组shift()与unshift()方法功能、用法及相关操作注意事项,需要的朋友可以参考下

本文实例讲述了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); // []

运行结果：

方法二：将上述代码修改为如下：（去掉中间数组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); // []

运行结果：

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]

运行结果：

//同方法一一样，只不过是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]

运行结果：

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

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

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

您可能感兴趣的文章:

相关文章

  • Function.prototype.call.apply结合用法分析示例

    Function.prototype.call.apply结合用法分析示例

    昨天在网上看到一个很有意思的js面试题：var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);alert(a); 分析步骤如下，感兴趣的朋友可以参考下哈
    2013-07-07
  • JavaScript如何从listbox里同时删除多个项目

    JavaScript如何从listbox里同时删除多个项目

    要从列表框同时删除多个项目只能从下向上删除，这样就不会出现索引号乱变的问题了，下面有个不错的示例，大家可以感受下
    2013-10-10
  • js实现随机数字字母验证码

    js实现随机数字字母验证码

    这篇文章主要为大家详细介绍了js随机验证码的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 巧用canvas

    巧用canvas

    作为一项有意思的新技术，canvas给我们带来了对网页绘图和网页动画的新革命。本文简单介绍下canvas实用的功能，下面跟着小编一起来看下吧
    2017-01-01
  • JS实现六边形3D拖拽翻转效果的方法

    JS实现六边形3D拖拽翻转效果的方法

    这篇文章给大家分享一个利用javascript实现3D六边形拖拽翻转的效果实例，实现后的效果很赞，对大家的学习Javascript具有一定的参考借鉴价值，有需要的朋友们一起去来看看吧。
    2016-09-09
  • 微信小程序实现菜单左右联动

    微信小程序实现菜单左右联动

    这篇文章主要为大家详细介绍了微信小程序实现菜单左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • js制作简易年历完整实例

    js制作简易年历完整实例

    这篇文章主要介绍了js制作简易年历的方法,包括实现的思路以及js、css与html各个部分的实现技巧,需要的朋友可以参考下
    2015-01-01
  • BootStrap中的Fontawesome 图标

    BootStrap中的Fontawesome 图标

    这篇文章主要介绍了BootStrap中Fontawesome 图标的相关知识,需要的朋友可以参考下
    2017-05-05
  • Bootstrap字体图标无法正常显示的解决方法

    Bootstrap字体图标无法正常显示的解决方法

    这篇文章主要为大家详细介绍了Bootstrap字体图标无法正常显示的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript中变量提升机制示例详解

    JavaScript中变量提升机制示例详解

    这篇文章主要给大家介绍了关于JavaScript中变量提升机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-12-12

最新评论