JavaScript数组函数unshift、shift、pop、push使用实例


Posted in Javascript onAugust 27, 2014

如何声明数组

s中数组的声明可以有几种方式声明

var tmp = [];  // 简写模式

var tmp = new Array(); // 直接new一个

var tmp = Array();  // 或者new也可以

在new数组的时候可以传入一个参数,表示数组的初始化长度
// new的时候传入一个参数表示初始化数组长度

var tmp = new Array(3); 

 

alert(tmp.length);  // 3

但如果你想创建一个只有一个元素3的数组,那么使用 new 方法是不能实现的,因为系统会把你传入的3当作数组的长度,除非你使用引号引起来当作字符串,如
var tmp = new Array('3'); 

alert(tmp);  // 3

我们可以使用简写模式创建数组,这样就可以创建只有一个数字元素3的数组
var tmp = [3]

alert(typeof tmp[0]);  // number

也可以初始多个元素,并且元素的值可以是任意类型
// 简约模式创建数组

// 数组的元素可以是任意一种数据类型

var tmp = [3,true,8.5,{'name':'lizhong'},['a','b']];

alert(tmp.length); // 5

一、unshift 在数组第一个元素前插入元素

// 使用unshift在数组第一个元素前插入元素

// 返回数组长度

var tmp = ['a','b'];

var len = tmp.unshift('c');

alert(len); // 3

alert(tmp); // c,a,b

也可以一次插入多个元素,顺序依次从左边排起
// 使用unshift在数组第一个元素前插入元素

// 返回数组长度

var tmp = ['a','b'];

var len = tmp.unshift('c','d');

alert(len); // 4

alert(tmp); // c,d,a,b

二、shift弹出数组第一个元素,返回被弹出的元素值

小实例:

// 使用shift弹出数组第一个元素

// 返回被弹出的元素值

var tmp = ['a','b','c'];

var val = tmp.shift();

alert(val); // a

alert(tmp); // b,c

如果是一个空数组:
// 使用shift弹出数组第一个元素

// 返回被弹出的元素值

var tmp = [];

var val = tmp.shift();

alert(val); // undefined

alert(tmp); // 空

三、push在数组末尾添加元素

跟unshift相反,push在数组末尾添加元素,返回添加元素以后的数组长度

// 使用push在数组末尾添加多个元素

// 返回数组最新长度

var tmp = ['a','b','c'];

var len = tmp.push('d');

alert(len); // 4

alert(tmp); // a,b,c,d

也可以一次添加多个元素
// 使用push在数组末尾添加多个元素

// 返回数组最新长度

var tmp = ['a','b','c'];

var len = tmp.push('d','e','f');

alert(len); // 6

alert(tmp); // a,b,c,d,e,f

四、pop函数删除数组末尾元素

跟shift相反,pop弹出的是数组末尾元素,返回被弹出的元素值

// 使用pop弹出数组末尾元素

// 返回被弹出的元素值

var tmp = ['a','b','c'];

var val = tmp.pop();

alert(val); // c

alert(tmp); // a,b

如果数组为空,返回undefined
// 使用pop弹出数组末尾元素

// 返回被弹出的元素值

var tmp = [];

var val = tmp.pop();

alert(val); // undefined

alert(tmp); // 空

 
利用以上四个函数,我们可以做一些队列处理,具体案例就不写代码了。
push功能其实也可以这么实现
var tmp = ['a','b','c'];

tmp[tmp.length] = 'd';

alert(tmp); // a,b,c,d

注意:以上四个函数unshift、shift、pop、push函数操作都会在数组本身上修改。
Javascript 相关文章推荐
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
js+css3制作时钟特效
Oct 16 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
JavaScript实现的in_array函数
Aug 27 #Javascript
JavaScript AJAX之惰性载入函数
Aug 27 #Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 #Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 #Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 #Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 #Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 #Javascript
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
Javascript 解疑
2009/11/11 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
基于python实现操作git过程代码解析
2020/07/27 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
运动会入场词200字
2014/02/15 职场文书
销售内勤岗位职责
2014/04/15 职场文书
励志演讲稿800字
2014/08/21 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
九九重阳节标语
2014/10/07 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
教师节老师寄语
2015/05/28 职场文书
鸡毛信观后感
2015/06/11 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python