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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python3生成随机数实例
2014/10/20 Python
python paramiko模块学习分享
2017/08/23 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
群胜软件Java笔试题
2012/09/29 面试题
市级优秀班主任事迹材料
2014/05/13 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
催款律师函范文
2015/05/27 职场文书