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学习笔记(十七)js 优化
Feb 04 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
Vue实现可移动水平时间轴
Jun 29 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
js资料prototype 属性
2007/03/13 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python运行异常管理解决方案
2020/03/09 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
就业自荐书
2013/12/05 职场文书
大学活动邀请函
2014/01/28 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
新教师培训心得体会
2014/09/02 职场文书
医德医魂心得体会
2014/09/11 职场文书
商铺租房协议书范本
2014/12/04 职场文书
Python中的程序流程控制语句
2022/02/24 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang