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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
用php解析html的实现代码
2011/08/08 PHP
php安装swoole扩展的方法
2015/03/19 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
金讯Java笔试题目
2013/06/18 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
一年级班主任寄语
2014/01/19 职场文书
大气污染防治方案
2014/05/19 职场文书
模范教师事迹材料
2014/12/16 职场文书
房产公证书
2015/01/23 职场文书
单位更名证明
2015/06/18 职场文书